/* Catalogue: on top of mma-theme.css. Sector = collision parts (red), set by data-surface="par". */

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

.cat-main { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(2rem, 5vw, 4rem); min-height: 60vh; }
.cat-nav .badge {
  display: inline-block; min-width: 1.5em; padding: 0 0.4em; margin-left: 0.2em;
  border-radius: 999px; background: var(--chroma); color: var(--ink);
  font-weight: 700; font-size: 0.875rem; text-align: center;
}

/* Login */
.cat-login {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 5vw, 4rem); align-items: start;
}
.cat-login-form, .cat-admin-login { display: flex; flex-direction: column; gap: 1.1rem; }
.cat-admin-login { max-width: 26rem; }
.cat-admin-login label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; }

/* Search */
.cat-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.cat-tabs a {
  text-decoration: none; padding: 0.55rem 1rem; border: 1px solid var(--line);
  border-radius: 999px; color: var(--chrome-2); font-weight: 600; font-size: 0.95rem;
}
.cat-tabs a:hover { color: var(--chrome); border-color: var(--chrome-3); }
.cat-tabs a[aria-current="page"] { color: var(--ink); background: var(--chroma); border-color: var(--chroma); }
.cat-search { display: flex; flex-direction: column; gap: 1.1rem; }
.cat-search .btn { align-self: flex-start; }
.cat-vehicle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cat-q input { font-size: 1.15rem; padding-block: 0.75rem; }
.cat-vehicle-set { border: 0; padding: 0; margin: 0; min-width: 0; }
.cat-vehicle-set legend { padding: 0; margin-bottom: 0.6rem; font-weight: 600; color: var(--chrome-2); }
.cat-count { margin: 1.5rem 0 0.5rem; color: var(--chrome-2); }

/* Results */
.cat-results { display: flex; flex-direction: column; }
.cat-group {
  font-size: 1.2rem; font-stretch: 110%; margin: 2rem 0 0.25rem; padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--chroma);
}
.cat-product {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto;
  gap: 1.25rem; align-items: center;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.cat-photo {
  position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.cat-photo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.cat-nophoto { display: none; font-size: 0.9rem; color: var(--chrome-2); text-align: center; padding: 0.5rem; }
.cat-photo.no-img .cat-nophoto { display: block; }
.cat-photo.no-img img { display: none; }
.cat-desc { font-weight: 600; margin: 0 0 0.5rem; }
.cat-nums { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; font-size: 0.9rem; }
.cat-nums div { display: flex; gap: 0.4rem; }
.cat-nums dt { color: var(--chrome-2); }
.cat-nums dd { margin: 0; }
.cat-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; text-align: right; }
.cat-price { margin: 0; display: flex; flex-direction: column; }
.cat-price .muted { font-size: 0.85rem; }
.cat-price strong { font-size: 1.35rem; font-family: var(--display); font-stretch: 110%; }
.cat-retail { margin: 0; font-size: 0.85rem; }
.cat-add, .cat-qty-form { display: flex; align-items: center; gap: 0.5rem; }
.cat-qty input { width: 4.5rem; text-align: center; padding: 0.5rem; }
.cat-cert { margin: 0 0 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--chroma); }

/* Same part, other offer */
.cat-others { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 0.5rem; margin-top: -0.25rem; }
.cat-alt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.5rem 1rem; align-items: center;
  padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 6px; background: var(--ink-2);
}
.cat-alt p { margin: 0; }
.cat-alt-info { font-size: 1rem; }
.cat-alt-info .code { font-size: 1em; }
.cat-alt-label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--chrome-2); }
.cat-alt-price { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.cat-alt-price strong { font-size: 1.1rem; }

/* Cart / checkout */
.cat-cart td .btn { white-space: nowrap; }
.cat-cart tfoot th { text-align: right; color: var(--chrome); }
.cat-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.5rem; }
.cat-checkout { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; max-width: 40rem; }
.cat-checkout .btn { align-self: flex-start; }
.notice h2 { font-size: 1.4rem; margin-bottom: 0.5rem; }

/* Catalogue landing */
.cat-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; margin-top: 2rem; }
.cat-section {
  --chip: var(--chroma);
  display: flex; flex-direction: column; gap: 0.6rem;
  border: 1px solid var(--line); border-top: 3px solid var(--chip);
  border-radius: 6px; padding: 1.25rem; background: var(--ink-2);
}
.cat-section h2 { font-size: 1.35rem; font-stretch: 110%; margin: 0; }
.cat-section p { margin: 0; color: var(--chrome-2); }
.cat-section .btn { align-self: flex-start; margin-top: auto; }
.cat-section-swatch {
  height: 4.5rem; border-radius: 4px;
  background: linear-gradient(155deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%), var(--chip);
}

/* Admin */
.cat-admin .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.cat-admin .stat { text-align: center; text-decoration: none; }
.cat-admin .edit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem 1.1rem; align-items: end; }
.cat-admin .edit-grid label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; font-size: 0.95rem; }
.cat-admin .edit-grid .chk { flex-direction: row; align-items: center; gap: 0.5rem; }
.cat-admin .edit-grid .chk input { width: auto; }
.cat-admin .edit-grid button { grid-column: 1 / -1; justify-self: start; }
.cat-admin .status { font-size: 0.85rem; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-3); color: var(--chrome); }
.cat-admin .status-new { border-color: var(--chroma); }
.cat-admin .status-cancelled { color: var(--chrome-2); }
.cat-admin select { width: auto; }

/* Phones and tablets */
@media (max-width: 960px) {
  .cat-vehicle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-login { grid-template-columns: minmax(0, 1fr); }
  .cat-admin .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-admin .edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cat-header { flex-wrap: wrap; row-gap: 0.4rem; }
  .cat-header .mma-wordmark em { display: none; }
  .cat-nav { gap: 0.25rem 0.9rem; justify-content: flex-start; }
  .cat-nav a:not(.btn):not(.lang) { display: inline-block; } /* the theme hides nav links on phones; the catalogue needs them */
  .cat-nav a { padding: 0.6rem 0.1rem; }
  .cat-nav .lang { padding: 0.45rem 0.8rem; }
  .cat-vehicle { grid-template-columns: minmax(0, 1fr); }
  .cat-search .btn { align-self: stretch; text-align: center; }
  .cat-product { grid-template-columns: 6rem minmax(0, 1fr); align-items: start; }
  .cat-buy { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; }
  .cat-others { grid-column: 1 / -1; margin-top: 0; }
  .cat-alt { grid-template-columns: minmax(0, 1fr) auto; }
  .cat-alt .cat-add { grid-column: 1 / -1; justify-content: flex-end; }
  .cat-tabs a { padding: 0.7rem 1rem; }
  .cat-admin .edit-grid { grid-template-columns: minmax(0, 1fr); }

  /* Cart table becomes one card per line */
  .cat-cart thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cat-cart, .cat-cart tbody, .cat-cart tfoot, .cat-cart tr, .cat-cart td, .cat-cart th { display: block; width: 100%; }
  .cat-cart tr { border-bottom: 1px solid var(--line); padding: 0.75rem 0; }
  .cat-cart td, .cat-cart th { border: 0; padding: 0.3rem 0; text-align: left; }
  .cat-cart td[data-label]::before { content: attr(data-label); display: block; font-family: var(--text); font-size: 0.85rem; color: var(--chrome-2); }
  .cat-cart td.num { text-align: left; }
  .cat-cart tfoot th { display: none; }
  .table-wrap { overflow: visible; }
  .cat-actions .btn, .cat-actions form, .cat-actions form .btn, .cat-checkout .btn { width: 100%; text-align: center; }
}

@media (pointer: coarse) {
  .btn, .btn-small { min-height: 44px; }
  .cat-qty input, select, input[type="text"], input[type="password"] { min-height: 44px; }
}

.fb-link { display: inline-flex; align-items: center; gap: 0.5rem; }
.fb-icon { flex: none; color: var(--chroma); }

/* Keep the Facebook icon beside its label even where touch rules make links inline-block */
.site-footer a.fb-link, .contact-line a.fb-link, .mma-footer a.fb-link { display: inline-flex; }

/* Admin: password forms */
.pw-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); margin: 1.5rem 0; }
.pw-form { display: flex; flex-direction: column; gap: 1rem; }
.pw-form h2 { font-size: 1.35rem; margin: 0; }
.pw-form .btn { align-self: flex-start; }
.cat-who { margin: 0; font-size: 0.9rem; }
.pw-form + .pw-form, .table-wrap + .pw-form { margin-top: 1.5rem; }

/* Banner when an admin/manager browses for a client */
.cat-acting {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; align-items: center; justify-content: space-between;
  padding: 0.6rem var(--gutter); background: color-mix(in oklab, var(--chroma) 16%, var(--ink)); border-bottom: 1px solid var(--chroma);
}
.cat-acting p { margin: 0; }
/* One line only: catalogue.js shrinks the text until it fits (never cut) */
.cat-acting-who { flex: 1 1 100%; min-width: 0; white-space: nowrap; overflow: hidden; }
.cat-acting a { margin-right: 1rem; display: inline-block; padding-block: 0.4rem; }
@media (pointer: coarse) { .cat-acting a { padding-block: 0.75rem; } }

.cat-admin .stat .num { display: block; font-family: var(--display); font-size: 1.8rem; font-weight: 800; color: var(--chroma); }
.cat-admin .stat .lbl { display: block; color: var(--chrome-2); font-size: 0.9rem; margin-top: 0.25rem; }
.cat-delete { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }

.cat-deleted { margin: 2rem 0; }
.cat-restore { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; }
.cat-restore .field span { font-size: 0.85rem; }
.cat-delete p { flex-basis: 100%; margin: 0; }

/* Availability */
.cat-avail { margin: 0; font-size: 0.9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; }
.cat-avail::before { content: ''; width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; }
.cat-avail-stock::before { background: var(--chroma); }
.cat-avail-call { color: var(--chrome-2); }
.cat-avail-call::before { border: 2px solid var(--chrome-2); }

/* Minimum 14px everywhere in results (mobile rule) */
.cat-nums { font-size: 0.95rem; }
.cat-nums .code { font-size: 1em; }
.cat-price .muted, .cat-retail, .cat-search .hint { font-size: 0.9rem; }
.cat-retail .num, .cat-price .num { font-family: inherit; }
.cat-alt-desc { display: block; color: var(--chrome-2); font-size: 0.9rem; margin-top: 0.15rem; }

/* Admin order detail */
.cat-order-totals { display: grid; gap: 0.4rem; max-width: 22rem; margin: 1.25rem 0 0 auto; }
.cat-order-totals div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding: 0.35rem 0; }
.cat-order-totals dt { color: var(--chrome-2); }
.cat-order-totals dd { margin: 0; }
@media (max-width: 720px) { .cat-order-totals { margin-left: 0; max-width: none; } }

.cat-admin .cat-main > p > a + a { margin-left: 1.25rem; }

/* Results toolbar: view toggle + filters */
.cat-tools { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin: 0.5rem 0 1rem; }
.cat-view { display: inline-flex; gap: 0.35rem; }
.cat-view .btn[aria-pressed="true"] { background: var(--chroma); color: var(--ink); border-color: var(--chroma); }
.cat-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.cat-cert-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; margin: 0; padding: 0; }
.cat-shown { margin: 0; font-size: 0.9rem; }
/* Filters hide with the hidden attribute: it must win over every display rule above and below
   (grid view sets .cat-results.is-grid .cat-product { display: flex }, more specific than
   .cat-product[hidden] — filtered cards stayed visible in grid view). */
[hidden] { display: none !important; }

/* Long result lists (270+ cards): the browser lays out only the cards near the screen, the others
   keep a reserved height (their real one once seen) — half the time to show the page on a phone. */
.cat-product { content-visibility: auto; contain-intrinsic-block-size: auto 11rem; }
@media (max-width: 960px) { .cat-product { contain-intrinsic-block-size: auto 13rem; } }
@media (max-width: 720px) { .cat-product { contain-intrinsic-block-size: auto 24rem; } }
.cat-results.is-grid .cat-product { contain-intrinsic-block-size: auto 36rem; }

/* Grid view ("quadrillé") */
.cat-results.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.cat-results.is-grid .cat-group { grid-column: 1 / -1; margin-top: 1.25rem; }
.cat-results.is-grid .cat-product {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem;
  padding: 0.9rem; border: 1px solid var(--line); border-radius: 6px; background: var(--ink-2);
}
.cat-results.is-grid .cat-photo { width: 100%; }
.cat-results.is-grid .cat-desc { font-size: 0.95rem; }
.cat-results.is-grid .cat-buy { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; margin-top: auto; }
.cat-results.is-grid .cat-others { margin-top: 0; }
@media (max-width: 720px) {
  .cat-tools { gap: 0.6rem; }
  .cat-results.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .cat-results.is-grid .cat-product { padding: 0.6rem; }
  .cat-results.is-grid .cat-buy .cat-add { width: 100%; }
}

.cat-new-client { margin-bottom: 1.5rem; }
#fiche { margin-bottom: 1.5rem; }

/* Grid on phones: two narrow columns, so the add-to-cart row wraps instead of overflowing */
@media (max-width: 720px) {
  .cat-results.is-grid .cat-product, .cat-results.is-grid .cat-buy, .cat-results.is-grid .cat-alt { min-width: 0; }
  .cat-results.is-grid .cat-add { flex-wrap: wrap; }
  .cat-results.is-grid .cat-add .cat-qty, .cat-results.is-grid .cat-add .cat-qty input { width: 100%; }
  .cat-results.is-grid .cat-add .btn { flex: 1 1 100%; }
  .cat-results.is-grid .cat-nums { flex-direction: column; gap: 0.15rem; }
  .cat-results.is-grid .code { white-space: normal; overflow-wrap: anywhere; }
}
@media (pointer: coarse) {
  .cat-tools .choice { min-height: 44px; }
  .cat-tools .choice input { width: 1.25rem; height: 1.25rem; }
}

/* long tokens in supplier descriptions (e.g. "M37/M56") must wrap inside narrow grid cards */
.cat-desc { overflow-wrap: anywhere; }
.cat-select { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; color: var(--chrome-2); }
.cat-select select { width: auto; padding: 0.45rem 0.6rem; }
@media (pointer: coarse) { .cat-select select { min-height: 44px; } }
@media (max-width: 720px) {
  .cat-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; width: 100%; }
  .cat-select { justify-content: space-between; }
  .cat-select select { flex: 0 1 60%; }
}

/* Admin order filters */
.cat-order-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem 1rem; align-items: end; margin-bottom: 1.25rem; }
.cat-order-filter .cat-of-q { grid-column: 1 / -1; }
.cat-order-filter .cat-of-actions { grid-column: 1 / -1; margin-top: 0; }
.cat-order-filter select, .cat-order-filter input { width: 100%; }
@media (max-width: 960px) { .cat-order-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cat-order-filter { grid-template-columns: minmax(0, 1fr); } }
@media (pointer: coarse) { .cat-order-filter select, .cat-order-filter input { min-height: 44px; } }

/* Grid view: "Autre option" blocks stack (info, then price + availability, then add) instead of 3 columns */
.cat-results.is-grid .cat-others { grid-column: auto; width: 100%; }
.cat-results.is-grid .cat-alt { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; }
.cat-results.is-grid .cat-alt-info, .cat-results.is-grid .cat-alt-desc { overflow-wrap: anywhere; }
.cat-results.is-grid .cat-alt-price { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.cat-results.is-grid .cat-alt .cat-add { justify-content: flex-start; flex-wrap: wrap; }

/* checkbox filters wrap as pills on phones */
@media (max-width: 720px) { .cat-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; } }

/* Admin: upload a photo for a part without one */
.cat-upload { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.cat-upload-file input[type="file"] { max-width: 15rem; padding: 0.35rem; font-size: 0.9rem; }
.cat-own { margin-top: 2.5rem; }
.cat-own-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.cat-own-item { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.cat-own-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 4px; }
.cat-own-item figcaption { display: flex; flex-direction: column; gap: 0.2rem; }
@media (max-width: 720px) { .cat-upload-file input[type="file"] { max-width: 100%; } }
.cat-upload-link input { min-width: 12rem; padding: 0.4rem 0.6rem; font-size: 0.9rem; }
@media (max-width: 720px) { .cat-upload-link, .cat-upload-link input { width: 100%; } }

.cat-lookup { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.5rem; }
.cat-cps-hint { position: sticky; bottom: 0.5rem; background: var(--ink-2); border: 1px solid var(--chroma); border-radius: 6px; padding: 0.6rem 0.9rem; }

/* "Application mobile" page (PWA install) */
.cat-app-page { max-width: 52rem; }
.cat-app-icon { border-radius: 22%; margin-bottom: 1rem; }
.cat-app-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.cat-app-ways h2 { font-size: 1.4rem; }
.cat-app-steps { padding-left: 1.2rem; margin: 0; display: grid; gap: 0.5rem; }
.cat-app-install:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 720px) { .cat-app-ways { grid-template-columns: minmax(0, 1fr); } }

/* Header link to the app page: full label, short on phones */

/* Catalogue footer: one compact band across the page (text left, links right), wraps on small screens */
.cat-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.75rem; padding: 1rem var(--gutter) 1.25rem; font-size: 0.9rem; }
.cat-footer p { margin: 0; max-width: none; }
.cat-footer p:first-child { flex: 1 1 auto; }
.cat-footer a { margin-right: 1rem; }
.cat-footer a:last-child { margin-right: 0; }
/* Short pages: the footer sits at the bottom of the screen, not mid-page */
body.cat { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.cat > .cat-main { flex: 1 0 auto; width: 100%; }

/* Page not found: the second language sits below, quieter */
.nf-block + .nf-block { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.nf-block .cat-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: none; }

/* Login page: the guest entry, above the account request */
.cat-guest { margin: 1.5rem 0 1rem; }
.cat-guest h2 { margin-top: 0; }

/* Guest checkout: pickup store, one tappable box per store.
   Same 2 columns and gaps as the contact .grid-2 above, so the boxes line up with the fields;
   1 column under 720px, like .grid-2. Radio in a fixed column, centred on the store name. */
.cat-stores { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 0.75rem 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cat-stores legend { font-weight: 700; margin: 0 0 0.75rem; padding: 0; }
.cat-store { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: 0.75rem; align-items: start; min-height: 44px;
  padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--ink-2); cursor: pointer; line-height: 1.45; }
.cat-store:hover { border-color: var(--chrome-3); }
.cat-store:has(input:checked) { border-color: var(--chroma); box-shadow: inset 0 0 0 1px var(--chroma); }
.cat-store:has(input:focus-visible) { outline: 2px solid var(--chroma); outline-offset: 2px; }
.cat-store input { margin: 0.125rem 0 0; width: 1.25rem; height: 1.25rem; accent-color: var(--chroma); }
.cat-store > span { display: block; min-width: 0; font-size: 0.95rem; overflow-wrap: anywhere; }
.cat-store strong { display: block; font-size: 1.0625rem; line-height: 1.5rem; }
.cat-store strong + br { display: none; }
.cat-store small { display: block; font-size: 0.85rem; margin-top: 0.15rem; }
.cat-stores .field-error { grid-column: 1 / -1; }
@media (max-width: 720px) { .cat-stores { grid-template-columns: minmax(0, 1fr); } }
.cat-checkout .tel { white-space: nowrap; }
.cat-pp { max-width: 28rem; margin-top: 1rem; }

/* Click-to-zoom on product photos (catalogue.js) */
.cat-photo img.cat-zoomable { cursor: zoom-in; }
.cat-photo img.cat-zoomable:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cat-zoom { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, .85); cursor: zoom-out; }
.cat-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: 6px; }
.cat-zoom-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: #000; font-size: 28px; line-height: 44px; cursor: pointer; }

/* ===== Results first on phones (audit C8–C10), compact cart and order steps (C13–C14), one-row header (C2) ===== */

/* Folded search summary: phones only (catalogue.js shows it after a search with results) */
.cat-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin: 0 0 0.75rem; padding: 0.6rem 0.6rem 0.6rem 0.9rem;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px;
}
.cat-summary-txt { margin: 0; min-width: 0; line-height: 1.3; }
.cat-summary-txt strong { display: block; font-size: 1.05rem; overflow-wrap: anywhere; }
.cat-summary-n { color: var(--chrome-2); font-size: 0.95rem; }
.cat-summary-edit { flex: none; }
@media (min-width: 721px) { .cat-summary { display: none; } }
@media (max-width: 720px) {
  .cat-sum-on .cat-search-h, .cat-sum-on .cat-count { display: none; }
  .cat-folded .cat-search { display: none; }
  .cat-sum-on .cat-search { margin-bottom: 0.75rem; }
}

/* "Go to" shortcuts towards each section of the list */
.cat-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.75rem; }
.cat-jump-h { font-size: 0.9rem; color: var(--chrome-2); margin-right: 0.25rem; }
.cat-jump a {
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
  padding: 0.4rem 0.75rem; border-radius: 8px; border: 1px solid var(--line);
  background: var(--ink-3); color: var(--chrome); text-decoration: none; font-size: 0.95rem;
}
.cat-jump a:hover { border-color: var(--chroma); }
.cat-jump-n { color: var(--chrome-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
/* A heading reached by a shortcut lands below the sticky header */
.cat-group { scroll-margin-top: 6rem; }

@media (max-width: 720px) {
  /* Toolbar: view buttons and the "x shown of y" count on one row, then one sliding row of filters */
  .cat-tools { gap: 0.5rem 0.75rem; margin: 0 0 0.6rem; }
  .cat-view { order: 0; }
  .cat-shown { order: 1; margin-left: auto; font-size: 0.875rem; }
  .cat-view .btn { padding-inline: 0.8rem; }
  .cat-filters, .cat-jump {
    order: 2; display: flex; flex-wrap: nowrap; gap: 0.4rem; width: auto;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    /* the last pill fades out at the edge: there is more to slide to */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
  }
  .cat-filters { flex-basis: calc(100% + 2 * var(--gutter)); }
  .cat-filters::-webkit-scrollbar, .cat-jump::-webkit-scrollbar { display: none; }
  .cat-filters .choice, .cat-jump a { flex: none; white-space: nowrap; }
  .cat-jump a { min-height: 44px; }
  .cat-jump-h { flex: none; }
  .cat-group { scroll-margin-top: 8.75rem; margin-top: 1.25rem; }   /* the phone header has two rows */
}

/* Header on phones: Catalogue / Search / Cart on the second row; App and Sign out move to the footer */
.cat-foot-more { display: none; }
@media (max-width: 720px) {
  .cat-header .cat-nav a.cat-nav-more { display: none; }
  .cat-header .cat-nav a:not(.lang) { flex: 1 1 0; justify-content: center; text-align: center; }
  .cat-header .cat-nav a.cart-link { white-space: nowrap; }
  .cat-footer .cat-foot-more { display: block; }
}

/* Order steps (guests): 1 Cart · 2 Details · 3 Payment */
.cat-steps { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; list-style: none; margin: -0.25rem 0 1.25rem; padding: 0; font-size: 0.95rem; color: var(--chrome-2); }
.cat-steps li { display: inline-flex; align-items: center; }
.cat-steps a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
.cat-step-n {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: 0.45rem;
  border-radius: 50%; border: 1px solid var(--chrome-3); font-weight: 700; font-size: 0.875rem;
}
.cat-steps .is-current { color: var(--chrome); font-weight: 700; }
.cat-steps .is-current .cat-step-n { background: var(--chroma); border-color: var(--chroma); color: var(--ink); }
.cat-steps .is-done .cat-step-n { border-color: var(--chroma); }
.cat-steps li + li::before { content: ''; width: 1.25rem; height: 1px; background: var(--line); margin-right: 1.25rem; margin-left: -0.75rem; }
@media (max-width: 720px) { .cat-steps { gap: 0.35rem 0.7rem; flex-wrap: nowrap; } .cat-steps li + li::before { width: 0.5rem; margin-right: 0.7rem; margin-left: -0.35rem; } .cat-step-n { margin-right: 0.35rem; } }

/* Prices: same font as the results, figures lined up (they were monospace in the cart only) */
.cat-cart td.num { font-family: inherit; font-variant-numeric: tabular-nums; }

/* Cart quantity: − / + (catalogue.js); the Update button is then not needed */
.cat-qty-form.is-auto > .btn[type="submit"] { display: none; }
.cat-qty-step { min-width: 2.75rem; justify-content: center; font-family: var(--text); font-weight: 700; font-size: 1.35rem; line-height: 1; padding-inline: 0.6rem; }
.cat-qty-form .cat-qty input { width: 3.5rem; }
.cat-qty-form.is-busy { opacity: 0.6; pointer-events: none; }

@media (max-width: 720px) {
  /* Cart and order summary: one compact card per line — description, then ref | total, then quantity | remove */
  .cat-cart tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; padding: 0.85rem 0; }
  .cat-cart tbody td { width: auto; padding: 0; }
  .cat-cart tbody td[data-label]::before { display: none; }
  .cat-cart td.c-desc { order: 0; flex: 1 1 100%; font-weight: 600; }
  .cat-cart td.c-ref { order: 1; flex: 1 1 auto; color: var(--chrome-2); font-size: 0.95rem; }
  .cat-cart td.c-total { order: 2; flex: none; font-weight: 700; font-size: 1.05rem; }
  .cat-cart td.c-unit { order: 3; flex: 1 1 100%; color: var(--chrome-2); font-size: 0.9rem; }
  .cat-cart td.c-unit.is-one { display: none; }
  .cat-cart td.c-unit[data-label]::before { display: inline; content: attr(data-label) " : "; font-size: inherit; }
  :lang(en) .cat-cart td.c-unit[data-label]::before { content: attr(data-label) ": "; }
  .cat-cart td.c-qty { order: 4; flex: 1 1 auto; }
  .cat-cart td.c-qty-ro[data-label]::before { display: inline; content: attr(data-label) " "; color: var(--chrome-2); font-size: inherit; }
  .cat-cart td.c-rm { order: 5; flex: none; }
  .cat-cart td.c-rm .btn { min-height: 44px; }
  /* Totals: label left, amount right, one line each */
  .cat-cart tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.45rem 0; border-bottom: 0; }
  .cat-cart tfoot tr:first-child { border-top: 1px solid var(--line); padding-top: 0.75rem; }
  .cat-cart tfoot th { display: block; width: auto; padding: 0; color: var(--chrome-2); font-weight: 500; text-align: left; }
  .cat-cart tfoot td { width: auto; padding: 0; text-align: right; }
  .cat-cart tfoot td[data-label]::before { display: none; }
  .cat-cart tfoot td:empty { display: none; }
  .cat-cart tfoot tr:last-child th { color: var(--chrome); font-weight: 700; }
  /* Actions: pay full width; keep searching and empty side by side */
  .cat-cart-actions { margin-top: 1rem; gap: 0.6rem; }
  .cat-cart-actions > .btn-big { flex: 1 1 100%; }
  .cat-cart-actions > .btn-ghost, .cat-cart-actions > form { flex: 1 1 0; width: auto; }
  .cat-cart-actions .btn-ghost { padding-inline: 0.75rem; font-size: 0.95rem; justify-content: center; }
  /* Checkout: the big button keeps its label on one line */
  .cat-checkout.card { padding: 1.1rem 1rem; }
  .cat-checkout .btn-big { padding-inline: 1rem; font-size: 1.05rem; justify-content: center; white-space: nowrap; }
}
/* "Change my details" on the payment step: a full-size touch target */
@media (pointer: coarse) { .cat-checkout p > a:not(.btn) { display: inline-block; padding-block: 0.75rem; } }
/* Store phone numbers were 13.6px */
.cat-store small { font-size: 0.9rem; }
/* Touch screens (tablets too): group shortcuts get a full-size target */
@media (pointer: coarse) { .cat-jump a { min-height: 44px; display: inline-flex; align-items: center; } }