/* 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; }
.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; }
.cat-product[hidden], .cat-group[hidden] { display: none; }

/* 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%; } }