/* =========================================================================
   Meridian Parts — storefront stylesheet
   Ported from the design handoff's inline styles into a token system.
   ========================================================================= */

:root {
  --ink: #0F1114; --dark: #1A1D22; --steel: #2A2F36;
  --body: #3C4550; --muted: #5B6470; --faint: #9AA3AE; --light: #C3C9D1;
  --border: #E3E6EA; --border-strong: #CDD2D8; --surface: #EEF0F2; --page: #F5F6F7; --white: #fff;
  --amber: #F2A50C; --auto: #3B5B7A; --marine: #0F6E7A;
  --auto-grad: linear-gradient(135deg,#1C2733,#2E4257); --marine-grad: linear-gradient(135deg,#0B2F34,#0F6E7A);
  --ok: #17803D; --ok-bg: #E6F4EA; --ok-border: #B7DFC3;
  --warn: #8A5200; --warn-bg: #FFF4DC; --warn-border: #F2D9A0; --warn-text: #6B4300;
  --err: #B3261E; --err-bg: #FCE8E6; --err-border: #F3B9B4;
  --ui: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r4: 4px; --r6: 6px; --r8: 8px; --r10: 10px; --r12: 12px; --r14: 14px;
  --shadow-finder: 0 24px 60px rgba(0,0,0,.4);
  --shadow-card: 0 12px 28px rgba(15,17,20,.1);
  --shadow-tile: 0 8px 20px rgba(15,17,20,.08);
  --shadow-drop: 0 12px 32px rgba(0,0,0,.25);
  --shadow-toast: 0 12px 32px rgba(0,0,0,.35);
  --hatch: repeating-linear-gradient(45deg,#EEF0F2 0 10px,#E7EAEE 10px 20px);
  --grid: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  --container: 1280px; --dept: var(--auto);
  /* Type roles — one scale, used everywhere the role appears. */
  --t-body: 15px; --t-small: 13px; --t-micro: 12px; --t-label: 11px;
  --t-card: 15px; --t-h3: 16px; --t-h2: 24px; --t-h1: 32px; --t-display: clamp(38px, 5.2vw, 64px);
  --lh-body: 1.55; --lh-tight: 1.15;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
.m-dept-marine { --dept: var(--marine); }

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--border-strong) var(--page); }
body.m-body { margin: 0; color: var(--ink); font-family: var(--ui); font-size: var(--t-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; font-optical-sizing: auto; min-height: 100vh; display: flex; flex-direction: column;
  /* Page ground: paper with a faint steel wash at the top so white cards read as lifted, not floating on flat grey. */
  background: radial-gradient(1200px 420px at 50% -120px, rgba(59,91,122,.10), transparent 70%), var(--page); }
/* Browser surfaces belong to the design too. */
::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
.m-body input, .m-body select, .m-body button { accent-color: var(--ink); }
.m-mono, .m-price, .m-facet__count, .m-card__ident, .m-idents, .m-suggest__ident { font-variant-numeric: tabular-nums; }
/* Links inherit their surface colour (ink on light, white on dark) so a single
   base rule cannot out-rank component colours; hover is the steel accent. */
.m-body a { color: inherit; text-decoration: none; }
.m-body a:hover { color: var(--auto); }
.m-prose a, .entry-content a { text-decoration: underline; }
select,input,button,textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4 { margin: 0; line-height: 1.15; }
p { margin: 0; }
.m-main { flex: 1 0 auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

@keyframes fitpop { 0%{transform:scale(.7);opacity:0} 60%{transform:scale(1.06);opacity:1} 100%{transform:scale(1)} }
@keyframes fadeup { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes drawcheck { from{stroke-dashoffset:30} to{stroke-dashoffset:0} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes slidein { from{transform:translateY(16px);opacity:0} to{transform:none;opacity:1} }
.m-drawcheck { animation: drawcheck .5s .2s ease-out both; }
.m-spin { animation: spin .9s linear infinite; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- layout primitives ---------- */
.m-container { max-width: var(--container); margin: 0 auto; padding-inline: 20px; }
.m-container--narrow { max-width: 1100px; }
.m-container--finder { max-width: 880px; }
.m-kicker { font-size: var(--t-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.m-kicker--amber { color: var(--amber); letter-spacing: .14em; }
.m-mono { font-family: var(--mono); }
.m-muted { color: var(--muted); }
.m-section-title { font-size: var(--t-h2); font-weight: 800; letter-spacing: -.02em; line-height: var(--lh-tight); text-wrap: balance; }
.m-page-title { font-size: var(--t-h1); font-weight: 800; letter-spacing: -.025em; line-height: var(--lh-tight); text-wrap: balance; }
.m-lead { font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 42em; text-wrap: pretty; }
/* Prose measure: 65–75ch. */
.m-prose, .entry-content p { max-width: 70ch; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- buttons ---------- */
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--r6); padding: 11px 16px; font-weight: 700; font-size: 13px; text-decoration: none; line-height: 1; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
/* Variant selectors carry two classes so they out-rank `.m-body a:hover`. */
.m-btn.m-btn--primary { background: var(--amber); color: var(--ink); font-weight: 800; border-radius: var(--r8); }
.m-btn.m-btn--primary:hover { background: #F8B22A; color: var(--ink); }
.m-btn.m-btn--dark { background: var(--ink); color: var(--white); font-weight: 800; border-radius: var(--r8); }
.m-btn.m-btn--dark:hover { background: var(--steel); color: var(--white); }
.m-btn.m-btn--secondary { background: var(--white); color: var(--ink); border: 1px solid var(--border-strong); }
.m-btn.m-btn--secondary:hover { background: var(--page); color: var(--ink); }
.m-btn.m-btn--white { background: var(--white); color: var(--ink); font-weight: 800; }
.m-btn.m-btn--white:hover { background: var(--surface); color: var(--ink); }
.m-btn.m-btn--outline-light { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.4); }
.m-btn.m-btn--outline-light:hover { background: rgba(255,255,255,.08); color: var(--white); }
.m-btn.m-btn--outline-auto { background: transparent; color: var(--white); border: 1px solid var(--auto); }
.m-btn.m-btn--outline-auto:hover { background: #1A2A3A; color: var(--white); }
.m-btn.m-btn--outline-marine { background: transparent; color: var(--white); border: 1px solid var(--marine); }
.m-btn.m-btn--outline-marine:hover { background: #0B2F34; color: var(--white); }
.m-btn.m-btn--ghost-amber { background: transparent; color: var(--amber); border: 1px solid var(--amber); }
.m-btn.m-btn--ghost-amber:hover { background: rgba(242,165,12,.1); color: var(--amber); }
.m-btn.m-btn--link { background: transparent; color: var(--auto); padding: 0; font-weight: 700; font-size: 14px; }
.m-btn.m-btn--link:hover { color: var(--ink); }
.m-btn--lg { height: 48px; font-size: 15px; padding: 0 18px; }
.m-btn--xl { height: 52px; font-size: 16px; }
.m-btn--block { width: 100%; }
.m-btn[disabled], .m-btn.is-disabled { background: var(--surface) !important; color: var(--faint) !important; cursor: not-allowed; border-color: transparent; }

/* ---------- inputs ---------- */
.m-input, .m-select, .m-textarea { width: 100%; height: 44px; border: 1px solid var(--border-strong); border-radius: var(--r6); padding: 0 10px; font-size: 14px; background: var(--white); color: var(--ink); }
.m-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B6470' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }
.m-select:disabled { background-color: var(--page); color: var(--faint); }
.m-select--lg, .m-input--lg { height: 48px; font-size: 15px; }
.m-textarea { height: 88px; padding: 10px; resize: vertical; }
.m-input:focus, .m-select:focus, .m-textarea:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); }
.m-input--mono { font-family: var(--mono); }
.m-input[readonly] { background: var(--page); color: var(--body); font-size: 13px; }
.m-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--body); }
.m-check { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.m-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }

/* ---------- header ---------- */
.m-header { background: var(--ink); color: var(--white); position: sticky; top: 0; z-index: 20; }
.m-header__inner { display: flex; align-items: center; gap: 18px; height: 64px; }
.m-logo { display: flex; align-items: center; gap: 10px; color: var(--white) !important; text-decoration: none; flex: none; }
.m-logo__mark { width: 30px; height: 30px; border: 2px solid var(--amber); border-radius: 5px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--amber); }
.m-logo__name { font-weight: 800; font-size: 15px; letter-spacing: .01em; }
.m-search { flex: 1 1 260px; position: relative; max-width: 620px; min-width: 200px; }
.m-search__box { display: flex; align-items: center; background: var(--white); border-radius: var(--r6); height: 42px; overflow: hidden; color: var(--ink); }
.m-search__icon { margin: 0 10px 0 12px; flex: none; color: var(--muted); display: grid; }
.m-search__input { flex: 1; border: 0; outline: 0; font-size: 14px; color: var(--ink); min-width: 0; background: transparent; height: 100%; }
.m-search__btn { border: 0; background: var(--amber); color: var(--ink); font-weight: 800; font-size: 13px; padding: 0 16px; height: 100%; }
.m-suggest { position: absolute; top: 46px; left: 0; right: 0; background: var(--white); color: var(--ink); border-radius: var(--r8); box-shadow: var(--shadow-drop); padding: 6px; z-index: 30; animation: fadeup .18s ease-out; }
.m-suggest[hidden] { display: none; }
.m-suggest__head { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 6px 10px; }
.m-suggest__item { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: var(--r6); text-decoration: none; color: var(--ink); }
.m-suggest .m-suggest__item:hover { background: var(--page); color: var(--ink); }
.m-suggest__ident { font-family: var(--mono); font-size: 12px; color: var(--auto); font-weight: 600; }
.m-suggest__name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-suggest__price { font-size: 12px; color: var(--muted); }
.m-suggest__empty { padding: 8px 10px; font-size: 13px; color: var(--muted); }
.m-nav { display: flex; gap: 4px; font-size: 13px; font-weight: 600; margin-left: auto; flex: none; white-space: nowrap; }
.m-nav a { color: var(--white); padding: 8px 10px; border-radius: var(--r4); text-decoration: none; }
.m-nav a.is-soft { color: var(--light); }
.m-nav a:hover { background: var(--steel); color: var(--white); }
.m-cart-btn { flex: none; display: flex; align-items: center; gap: 8px; border: 1px solid var(--steel); background: var(--dark); color: var(--white) !important; border-radius: var(--r6); padding: 0 12px; height: 40px; font-weight: 700; font-size: 13px; text-decoration: none; }
.m-cart-btn:hover { background: var(--steel); }
.m-subbar { background: var(--dark); border-top: 1px solid var(--steel); }
.m-subbar__inner { display: flex; align-items: center; gap: 14px; height: 40px; font-size: 13px; }
.m-appchip { display: flex; align-items: center; gap: 8px; color: var(--white) !important; font-weight: 700; text-decoration: none; min-width: 0; }
.m-appchip__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-appchip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }
.m-has-app .m-appchip__dot { background: var(--ok); }
.m-subbar__sep { color: var(--muted); }
.m-appchip__action { color: var(--amber) !important; font-weight: 700; text-decoration: none; white-space: nowrap; }
.m-subnav { margin-left: auto; display: flex; gap: 2px; white-space: nowrap; font-weight: 600; }
.m-subnav a { color: var(--light); padding: 6px 9px; border-radius: var(--r4); text-decoration: none; font-size: 13px; }
.m-subnav a:hover { color: var(--white); background: var(--steel); }
@media (max-width: 759px) {
  .m-nav, .m-subnav { display: none; }
  .m-header__inner { gap: 10px; }
  .m-search { min-width: 0; flex: 1 1 120px; }
  .m-search__btn { padding: 0 12px; }
  .m-cart-btn { padding: 0 10px; gap: 6px; }
  .m-main { padding-bottom: 64px; }
  .m-appchip__text { max-width: 55vw; }
}
@media (max-width: 480px) {
  .m-logo__name { display: none; }
  .m-search__icon { margin: 0 6px 0 10px; }
}

/* ---------- hero ---------- */
.m-hero { position: relative; overflow: hidden; background: var(--ink); color: var(--white); background-image: var(--grid); background-size: 48px 48px; }
/* Workshop light: two slow-moving glows — amber from the finder side, steel from the copy side —
   drifting on transform only. The one authored ambient motion on the site. */
.m-hero::before, .m-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(70px); opacity: .55; will-change: transform; }
.m-hero::before { width: 640px; height: 640px; right: -180px; top: -260px; background: radial-gradient(closest-side, rgba(242,165,12,.42), transparent 72%); animation: m-glow-a 22s ease-in-out infinite alternate; }
.m-hero::after  { width: 720px; height: 720px; left: -260px; bottom: -380px; background: radial-gradient(closest-side, rgba(59,91,122,.55), transparent 72%); animation: m-glow-b 28s ease-in-out infinite alternate; }
@keyframes m-glow-a { from { transform: translate3d(0,0,0) } to { transform: translate3d(-90px,70px,0) } }
@keyframes m-glow-b { from { transform: translate3d(0,0,0) } to { transform: translate3d(110px,-60px,0) } }
.m-hero > * { position: relative; }
.m-hero__inner { padding: 64px 20px 72px; display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 48px; align-items: center; }
.m-hero__title { margin: 16px 0 18px; font-size: var(--t-display); line-height: .96; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
/* Light on dark: a touch more leading and tracking, and the copy fills its column instead of stopping at a fixed width. */
.m-hero__sub { margin: 0 0 28px; font-size: 17px; line-height: 1.6; letter-spacing: .005em; color: var(--light); max-width: 34em; text-wrap: pretty; }
.m-trust { border-top: 1px solid rgba(255,255,255,.08); }
.m-trust__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; }
.m-trust__item { display: flex; gap: 10px; align-items: flex-start; padding: 16px 20px 16px 0; font-size: var(--t-small); line-height: 1.45; color: var(--light); }
.m-trust__item + .m-trust__item { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.08); }
.m-trust__item svg { flex: none; width: 18px; height: 18px; color: var(--amber); margin-top: 1px; }
.m-trust__item b { color: var(--white); font-weight: 700; display: block; }
.m-trust__item .m-mono { color: var(--amber); }
@media (max-width: 759px) { .m-trust__item + .m-trust__item { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.08); } }
.m-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- finder card ---------- */
.m-finder-card { background: var(--white); color: var(--ink); border-radius: var(--r12); padding: 22px; box-shadow: var(--shadow-finder); animation: fadeup .4s ease-out; }
.m-finder-card--page { box-shadow: none; border: 1px solid var(--border); padding: 24px; animation: none; }
.m-finder-card__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; gap: 10px; }
.m-finder-card__head h2 { font-size: 18px; font-weight: 800; }
.m-finder-card__head span { font-size: 12px; color: var(--muted); }
.m-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--surface); padding: 4px; border-radius: var(--r8); margin-bottom: 16px; }
.m-seg__btn { border: 0; border-radius: var(--r6); padding: 10px; font-weight: 700; font-size: 13px; background: transparent; color: var(--body); transition: background .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s; }
.m-seg__btn:hover:not(.is-active) { background: rgba(15,17,20,.06); }
.m-seg__btn.is-active { background: var(--ink); color: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
/* The CTA lights up once the application is complete: one sheen pass, then it rests. */
.m-finder-card__submit { position: relative; overflow: hidden; transition: background .25s var(--ease-out), color .25s var(--ease-out); }
.m-finder-card__submit:not([disabled])::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: m-sheen .9s var(--ease-out) .05s 1 both; pointer-events: none; }
@keyframes m-sheen { to { transform: translateX(120%); } }
.m-finder-card--page .m-seg { margin-bottom: 20px; }
.m-finder-card--page .m-seg__btn { padding: 12px; font-size: 14px; }
.m-selects { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 10px; }
.m-finder-card--page .m-selects { grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 12px; }
.m-selects .is-span { grid-column: 1 / -1; }
.m-finder-card__submit { margin-top: 14px; }
.m-finder-card--page .m-finder-card__submit { margin-top: 20px; }
.m-finder-card__note { margin-top: 8px; font-size: 12px; color: var(--muted); }
.m-finder-card--page .m-finder-card__note { margin-top: 14px; font-size: 13px; line-height: 1.5; }
.m-finder-card__nodata { margin-top: 8px; font-size: 12px; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--r6); padding: 8px 10px; line-height: 1.5; }
.m-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--faint); font-size: 12px; }
.m-divider::before, .m-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.m-numsearch { display: flex; border: 1px solid var(--border-strong); border-radius: var(--r6); overflow: hidden; height: 44px; }
.m-numsearch input { flex: 1; border: 0; outline: 0; padding: 0 12px; font-size: 14px; font-family: var(--mono); min-width: 0; }
.m-numsearch button { border: 0; border-left: 1px solid var(--border-strong); background: var(--page); font-weight: 700; font-size: 13px; padding: 0 14px; }
.m-finder-card [data-pane][hidden] { display: none; }

/* ---------- home sections ---------- */
.m-about { padding: 56px 20px 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 40px; align-items: center; }
/* The copy column fills its grid track; measure is held by the track, not a fixed cap. */
.m-about__text { display: flex; flex-direction: column; gap: 14px; }
.m-about__text h2 { font-size: 28px; font-weight: 800; letter-spacing: -.025em; line-height: var(--lh-tight); text-wrap: balance; }
.m-about__text p { font-size: 16px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.m-minicards { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 10px; font-size: 13px; }
.m-minicard { background: var(--white); border: 1px solid var(--border); border-radius: var(--r8); padding: 12px; }
.m-minicard b { display: block; margin-bottom: 2px; }
.m-minicard span { color: var(--muted); line-height: 1.45; }
.m-about__photo { border: 1px solid var(--border); border-radius: var(--r12); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); }
.m-about__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-placeholder { background: var(--hatch); border: 1px solid var(--border); border-radius: var(--r12); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); text-align: center; padding: 8px; width: 100%; }
.m-placeholder__label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.m-placeholder__sub { font-size: 12px; max-width: 260px; font-family: var(--mono); }
.m-dept-cards { padding: 48px 20px 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 16px; }
.m-dept-card { border-radius: var(--r12); padding: 28px; color: var(--white); position: relative; overflow: hidden; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.m-dept-card--auto { background: var(--auto-grad); }
.m-dept-card--marine { background: var(--marine-grad); }
.m-dept-card__tex { position: absolute; inset: 0; }
.m-dept-card--auto .m-dept-card__tex { background-image: radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px); background-size: 14px 14px; opacity: .4; }
.m-dept-card--marine .m-dept-card__tex { background-image: repeating-linear-gradient(-8deg,rgba(255,255,255,.08) 0 1px,transparent 1px 18px); opacity: .5; }
.m-dept-card__num { position: absolute; top: 20px; right: 20px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--light); }
.m-dept-card--marine .m-dept-card__num, .m-dept-card--marine p { color: #BFE3E6; }
.m-dept-card__body { position: relative; }
.m-dept-card h2 { margin: 0 0 6px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.m-dept-card p { margin: 0 0 16px; color: var(--light); font-size: 15px; }
.m-dept-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.m-cats { padding: 40px 20px 0; }
.m-cats__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.m-cats__head span { font-size: 13px; color: var(--muted); }
.m-cat-tiles { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 10px; }
.m-cat-tile { text-align: left; background: var(--white); border: 1px solid var(--border); border-radius: var(--r10); padding: 14px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink) !important; transition: transform .15s, box-shadow .15s; }
.m-cat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-tile); }
.m-cat-tile__dept { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dept); }
.m-cat-tile__dept::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dept); }
.m-cat-tile__name { font-size: 15px; font-weight: 700; }
.m-cat-tile__count { font-size: 12px; color: var(--muted); }
.m-how { padding: 48px 20px 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 16px; }
.m-how__title { grid-column: 1 / -1; }
.m-how__card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r10); padding: 20px; }
.m-how__num { font-family: var(--mono); font-size: 12px; color: var(--auto); margin-bottom: 8px; }
.m-how__card b { display: block; margin-bottom: 6px; }
.m-how__card p { font-size: 13px; color: var(--muted); line-height: 1.5; }
.m-how__pro { background: var(--ink); color: var(--white); border-radius: var(--r10); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.m-how__pro .m-how__num { color: var(--amber); }
.m-how__pro p { color: var(--faint); }
.m-how__pro .m-btn { margin-top: auto; align-self: flex-start; padding: 8px 12px; }
.m-contact-band { background: var(--ink); color: var(--white); margin-top: 56px; }
.m-contact-band__inner { padding: 56px 20px; display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 32px; align-items: start; }
.m-contact-band__text { display: flex; flex-direction: column; gap: 14px; }
.m-contact-band__text h2 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.m-contact-band__text p { font-size: 15px; line-height: 1.6; color: var(--light); max-width: 480px; text-wrap: pretty; }
.m-kv-dark { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; line-height: 1.5; margin-top: 6px; }
.m-kv-dark dt { color: var(--faint); margin: 0; }
.m-kv-dark dd { color: var(--amber); margin: 0; }
.m-kv-dark dd.is-set { color: var(--white); }
.m-form-card { background: var(--white); color: var(--ink); border-radius: var(--r12); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.m-form-card h3 { font-size: 18px; font-weight: 800; }
.m-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-form-grid .is-span { grid-column: 1 / -1; }
.m-form-card .m-input, .m-form-card .m-select { height: 42px; }
.m-form-note { font-size: 12px; color: var(--faint); }
.m-success { background: var(--ok-bg); border-radius: var(--r8); padding: 16px; color: var(--ok); font-weight: 700; animation: fitpop .4s ease-out; }
@media (max-width: 480px) { .m-form-grid { grid-template-columns: 1fr; } }

/* ---------- finder page ---------- */
.m-finder-page { padding: 40px 20px 80px; }
.m-finder-page .m-page-title { margin: 0 0 6px; }
.m-finder-page .m-lead { margin: 0 0 24px; }

/* ---------- results ---------- */
.m-results { padding: 24px 20px 80px; }
.m-crumb { font-size: 12px; color: var(--muted); margin-bottom: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.m-crumb a { color: var(--muted); text-decoration: none; }
.m-crumb a:hover { color: var(--auto); }
.m-crumb .is-current { color: var(--ink); }
.m-confirm { display: flex; align-items: center; gap: 14px; background: var(--ok-bg); border: 1px solid var(--ok-border); border-radius: var(--r10); padding: 14px 16px; margin-bottom: 20px; animation: fitpop .5s cubic-bezier(.2,.8,.2,1); color: var(--ok); }
.m-confirm__title { font-weight: 800; color: var(--ok); font-size: 15px; }
.m-confirm__note { font-size: 13px; color: #2E5A3A; }
.m-confirm__change { margin-left: auto; border: 0; background: transparent; color: var(--ok) !important; font-weight: 700; font-size: 13px; text-decoration: underline; }
.m-results__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.m-results__head h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
.m-results__count { font-size: 13px; color: var(--muted); }
.m-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.m-sort select { height: 36px; border: 1px solid var(--border-strong); border-radius: var(--r6); padding: 0 8px; font-size: 13px; background: var(--white); width: auto; }
.m-results__grid { display: grid; grid-template-columns: minmax(0,240px) minmax(0,1fr); gap: 24px; align-items: start; }
/* Filters sidebar is hidden below 760px for Phase 1; a Filters drawer replaces it in production.
   Two-class selector so this out-ranks the base .m-facets rule declared later. */
@media (max-width: 759px) { .m-results__grid { grid-template-columns: 1fr; } .m-results .m-facets { display: none; } }
.m-facets { background: var(--white); border: 1px solid var(--border); border-radius: var(--r10); padding: 16px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 120px; }
.m-facet__title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.m-facet__list { display: flex; flex-direction: column; gap: 2px; }
.m-facet__btn { display: flex; justify-content: space-between; gap: 8px; text-align: left; border: 0; border-radius: 5px; padding: 7px 8px; font-size: 13px; background: transparent; color: var(--ink) !important; font-weight: 500; text-decoration: none; }
.m-facet__btn:hover { background: var(--page); }
.m-facet__btn.is-active { background: var(--surface); font-weight: 700; }
.m-facet__count { color: var(--faint); font-family: var(--mono); font-size: 11px; }
.m-facet__checks { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.m-facet__checks .m-check { justify-content: space-between; }
.m-facet__checks .m-check > span { display: flex; gap: 8px; align-items: center; }
.m-facet__note { font-size: 12px; color: var(--faint); line-height: 1.5; border-top: 1px solid var(--surface); padding-top: 12px; }
.m-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 14px; }
.m-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r10); overflow: hidden; display: flex; flex-direction: column; transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s; }
.m-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--border-strong); }
.m-card__media { position: relative; display: block; background: var(--white); overflow: hidden; }
.m-card__media img { width: 100%; height: 100%; object-fit: contain; background: var(--white); padding: 8%; transition: transform .45s var(--ease-out); }
.m-card:hover .m-card__media img { transform: scale(1.04); }
.m-card__media--empty { border: 0; border-radius: 0; }
.m-card__badge { position: absolute; top: 10px; left: 10px; background: var(--ink); color: var(--white); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--r4); }
.m-card__body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.m-card__meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.m-card__cat { color: var(--dept); }
/* Titles hold exactly two lines so every card's price row lands on the same baseline. */
.m-card__title { font-size: var(--t-card); font-weight: 700; line-height: 1.35; text-decoration: none; text-wrap: pretty; color: var(--ink) !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.35em); letter-spacing: -.005em; }
.m-card__ident { font-family: var(--mono); font-size: var(--t-micro); color: var(--muted); }
.m-card__foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: 8px; gap: 8px; }
.m-price { font-size: 22px; font-weight: 800; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.m-price del { color: var(--faint); font-weight: 600; font-size: 13px; margin-right: 6px; }
.m-price ins { text-decoration: none; }
.m-avail { font-size: 12px; font-weight: 600; text-align: right; }
.m-avail--ok { color: var(--ok); } .m-avail--warn { color: var(--warn); } .m-avail--error { color: var(--err); }
.m-card__actions { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 6px; }
.m-card__actions .m-btn { height: 38px; padding: 0 12px; border-radius: var(--r6); }
.m-empty { grid-column: 1 / -1; background: var(--white); border: 1px dashed var(--border-strong); border-radius: var(--r10); padding: 40px; text-align: center; color: var(--muted); }
.m-empty__title { font-weight: 800; color: var(--ink); font-size: 18px; margin-bottom: 6px; }
.m-empty p { font-size: 14px; margin-bottom: 16px; line-height: 1.5; }
.m-hidden-note { grid-column: 1 / -1; font-size: 13px; color: var(--muted); padding: 8px 4px; }
.m-hidden-note a { color: var(--auto); font-weight: 700; }
.m-pagination { grid-column: 1 / -1; display: flex; justify-content: center; gap: 6px; padding-top: 16px; }
.m-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--r6); background: var(--white); text-decoration: none; font-weight: 700; font-size: 13px; }
.m-pagination .page-numbers.current { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ---------- brand page header · application banner · search note ---------- */
.m-brandhead { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 16px; align-items: start; background: var(--white); border: 1px solid var(--border); border-radius: var(--r12); padding: 18px; margin-bottom: 20px; }
.m-brandhead__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.m-brandhead__chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: var(--t-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.m-appbanner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--dept); border-radius: var(--r10); padding: 12px 16px; margin-bottom: 20px; font-size: var(--t-small); color: var(--body); }
.m-appbanner__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dept); flex: none; }
.m-appbanner .m-btn { margin-left: auto; }
.m-searchnote { font-size: var(--t-small); color: var(--muted); background: var(--surface); border-radius: var(--r8); padding: 10px 14px; margin-bottom: 18px; line-height: 1.5; }

/* ---------- guides / article ---------- */
.m-article__head { background: var(--ink); color: var(--white); padding: 40px 0 44px; }
.m-article__head .m-crumb, .m-article__head .m-crumb a { color: var(--faint); }
.m-article__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-small); color: var(--light); margin: 14px 0 12px; }
.m-article__title { font-size: clamp(30px, 4vw, 44px); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; max-width: 22em; }
.m-article__summary { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--light); max-width: 34em; text-wrap: pretty; }
.m-article__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 32px; padding-top: 32px; padding-bottom: 56px; align-items: start; }
@media (min-width: 900px) { .m-article__grid { grid-template-columns: 220px minmax(0,1fr); gap: 48px; } .m-toc { position: sticky; top: 120px; } }
.m-toc { background: var(--white); border: 1px solid var(--border); border-radius: var(--r10); padding: 14px 16px; font-size: var(--t-small); }
.m-toc[hidden] { display: none; }
.m-toc__title { font-size: var(--t-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.m-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.m-toc__list a { display: block; padding: 5px 8px 5px 10px; border-left: 2px solid transparent; color: var(--body); border-radius: 0 var(--r4) var(--r4) 0; transition: color .15s, border-color .15s, background .15s; }
.m-toc__list a:hover { background: var(--page); color: var(--ink); }
.m-toc__list a.is-active { border-left-color: var(--dept); color: var(--ink); font-weight: 700; }
.m-article__body { font-size: 17px; line-height: 1.65; color: var(--body); }
.m-article__body h2 { font-size: var(--t-h2); color: var(--ink); margin: 40px 0 12px; letter-spacing: -.02em; scroll-margin-top: 130px; }
.m-article__body h3 { font-size: 19px; color: var(--ink); margin: 28px 0 8px; }
.m-article__body p { margin: 0 0 16px; }
.m-article__body ul, .m-article__body ol { margin: 0 0 16px 22px; }
.m-article__body img { border-radius: var(--r10); }
.m-article__figure { margin: 0 0 24px; border-radius: var(--r12); overflow: hidden; border: 1px solid var(--border); }
.m-article__shop { background: var(--ink); color: var(--white); padding: 48px 0 56px; }
.m-article__shop-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; align-items: center; }

/* ---------- fitment pill ---------- */
.m-pill { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; margin-top: 2px; line-height: 1.2; white-space: nowrap; }
.m-pill--sm { font-size: 11px; padding: 3px 8px; }
.m-pill--select, .m-pill--unknown { background: var(--surface); color: var(--body); }
.m-pill--unknown { color: var(--muted); }
.m-pill--fits { background: var(--ok-bg); color: var(--ok); }
.m-pill--verify { background: var(--warn-bg); color: var(--warn); }
.m-pill--nofit { background: var(--err-bg); color: var(--err); }

/* ---------- product ---------- */
.m-product { padding: 20px 20px 80px; }
.m-product .m-crumb { margin-bottom: 16px; }
/* Exactly two tracks: gallery and buy box. auto-fit produced a phantom third column at desktop widths. */
.m-product__top { display: grid; grid-template-columns: minmax(0,1fr); gap: 32px; align-items: start; }
@media (min-width: 760px) { .m-product__top { grid-template-columns: minmax(0,11fr) minmax(0,9fr); gap: 40px; } .m-buy { position: sticky; top: 120px; } }
.m-gallery { display: flex; flex-direction: column; gap: 10px; }
.m-gallery__main { border: 1px solid var(--border); border-radius: var(--r12); aspect-ratio: 1/1; overflow: hidden; background: var(--white); display: grid; place-items: center; }
.m-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.m-gallery__main .m-placeholder { border: 0; border-radius: 0; height: 100%; }
.m-gallery__thumbs { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.m-gallery__thumb { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r8); aspect-ratio: 1; display: grid; place-items: center; font-size: 10px; color: var(--muted); text-align: center; padding: 4px; overflow: hidden; cursor: pointer; }
.m-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.m-gallery__thumb.is-active { border: 2px solid var(--ink); }
.m-buy { display: flex; flex-direction: column; gap: 14px; }
.m-chips { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.m-chip { background: var(--surface); color: var(--body); padding: 4px 8px; border-radius: var(--r4); }
.m-chip--dark { background: var(--ink); color: var(--white); }
.m-buy__brand { font-size: 13px; font-weight: 700; color: var(--auto); margin-bottom: 4px; }
.m-buy__title { font-size: 30px; line-height: 1.12; font-weight: 800; letter-spacing: -.028em; text-wrap: balance; }
.m-idents { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: 13px; }
.m-idents .k { color: var(--muted); } .m-idents .v { font-weight: 600; } .m-idents .sep { color: var(--border-strong); }
.m-copy { border: 1px solid var(--border-strong); background: var(--white); border-radius: var(--r4); padding: 3px 8px; font-size: 11px; font-weight: 700; font-family: var(--ui); }
.m-buy__price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.m-buy__price .m-price { font-size: 34px; letter-spacing: -.02em; }
.m-buy__price .m-avail { font-size: 14px; font-weight: 700; }
.m-fitpanel { border-radius: var(--r10); padding: 16px; display: flex; flex-direction: column; gap: 10px; border: 1px solid; }
.m-fitpanel--select, .m-fitpanel--unknown { background: var(--surface); border-color: var(--border-strong); --fit: var(--body); }
.m-fitpanel--unknown { --fit: var(--muted); }
.m-fitpanel--fits { background: var(--ok-bg); border-color: var(--ok-border); --fit: var(--ok); }
.m-fitpanel--verify { background: var(--warn-bg); border-color: var(--warn-border); --fit: var(--warn); }
.m-fitpanel--nofit { background: var(--err-bg); border-color: var(--err-border); --fit: var(--err); }
.m-fitpanel__row { display: flex; align-items: center; gap: 10px; }
.m-fitpanel__icon { font-size: 20px; color: var(--fit); }
.m-fitpanel__head { font-weight: 800; font-size: 15px; color: var(--fit); }
.m-fitpanel__sub { font-size: 13px; color: var(--body); }
.m-fitpanel__cta { align-self: flex-start; border: 1px solid var(--fit); background: var(--white); color: var(--fit) !important; border-radius: var(--r6); padding: 8px 12px; font-weight: 700; font-size: 13px; text-decoration: none; }
.m-buyrow { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; }
@media (max-width: 480px) { .m-buyrow { grid-template-columns: 1fr 1fr; } .m-buyrow .m-qty { grid-column: 1 / -1; justify-self: start; } }
.m-qty { display: flex; border: 1px solid var(--border-strong); border-radius: var(--r8); overflow: hidden; height: 48px; }
.m-qty button { border: 0; background: var(--white); width: 40px; font-size: 18px; }
.m-qty input { width: 44px; border: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.m-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.m-buyrow .m-btn { height: 48px; font-size: 15px; border-radius: var(--r8); }
.m-quote-cta { border: 1px dashed var(--border-strong); background: var(--white); border-radius: var(--r8); padding: 10px; font-weight: 700; font-size: 13px; color: var(--body); text-align: center; }
.m-tiles { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 8px; font-size: 12px; }
.m-tile { background: var(--white); border: 1px solid var(--border); border-radius: var(--r8); padding: 10px; }
.m-tile b { display: block; margin-bottom: 2px; }
.m-tile span { color: var(--muted); line-height: 1.4; }
.m-tabs { margin-top: 40px; border-bottom: 1px solid var(--border); display: flex; gap: 4px; overflow-x: auto; }
.m-tab { border: 0; background: transparent; padding: 12px 14px; font-weight: 700; font-size: 14px; white-space: nowrap; border-bottom: 2px solid transparent; color: var(--muted); margin-bottom: -1px; }
.m-tab.is-active { border-bottom-color: var(--ink); color: var(--ink); }
.m-tabpanel { background: var(--white); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--r12) var(--r12); padding: 24px; animation: fadeup .25s ease-out; }
.m-tabpanel[hidden] { display: none; }
.m-tabpanel h3 { font-size: 16px; font-weight: 800; margin: 0 0 8px; }
.m-tabpanel .m-prose { font-size: 14px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.m-tabpanel .m-prose p { margin: 0 0 10px; }
.m-two { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 24px; }
.m-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.m-kv dt { color: var(--muted); } .m-kv dd { margin: 0; font-weight: 600; }
.m-notonfile { color: var(--warn); font-weight: 600; }
.m-specs { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 0 32px; }
.m-spec { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--surface); font-size: 13px; }
.m-spec span:first-child { color: var(--muted); } .m-spec span:last-child { font-weight: 600; }
.m-fine { margin-top: 12px; font-size: 12px; color: var(--faint); }
.m-tabhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.m-tabhead span { font-size: 12px; color: var(--muted); }
.m-tablewrap { overflow-x: auto; }
.m-fittable { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.m-fittable th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); font-weight: 700; }
.m-fittable td { padding: 10px; border-bottom: 1px solid var(--surface); }
.m-fittable tr.is-verify { background: var(--warn-bg); }
.m-notice { background: var(--surface); border-radius: var(--r8); padding: 16px; font-size: 13px; color: var(--body); line-height: 1.5; }
.m-xref { display: flex; flex-wrap: wrap; gap: 8px; }
.m-xref span { font-family: var(--mono); font-size: 13px; background: var(--page); border: 1px solid var(--border); border-radius: var(--r6); padding: 6px 10px; }
.m-three { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 20px; font-size: 13px; line-height: 1.6; color: var(--body); }
.m-three h3 { color: var(--ink); margin: 0 0 6px; }

/* ---------- footer / mobile bar / toast / overlay ---------- */
.m-footer { background: var(--ink); color: var(--faint); margin-top: auto; }
.m-footer__inner { padding: 36px 20px; display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 24px; font-size: 13px; line-height: 1.7; }
.m-footer__brand { color: var(--white); font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.m-footer__col { display: flex; flex-direction: column; align-items: flex-start; }
.m-footer__col b { color: var(--white); font-weight: 700; margin-bottom: 4px; }
.m-footer__col a { color: var(--faint); text-decoration: none; }
.m-footer__col a:hover { color: var(--white); }
.m-footer__pending { color: var(--amber); }
.m-mobilebar { display: none; }
@media (max-width: 759px) { .m-mobilebar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--ink); border-top: 1px solid var(--steel); display: grid; grid-template-columns: repeat(4,1fr); z-index: 30; } }
.m-mobilebar a { display: grid; place-items: center; color: var(--white); padding: 10px 4px; font-size: 11px; font-weight: 700; text-decoration: none; min-height: 56px; text-align: center; white-space: nowrap; }
.m-mobilebar .m-cart-count { display: inline; }
.m-mobilebar a:hover { color: var(--white); }
.m-mobilebar a.is-amber, .m-mobilebar a.is-amber:hover { color: var(--amber); }
.m-toast { position: fixed; right: 20px; bottom: 24px; background: var(--ink); color: var(--white); border-radius: var(--r10); padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-toast); z-index: 60; animation: slidein .3s ease-out; font-size: 14px; max-width: calc(100vw - 40px); }
.m-toast[hidden] { display: none; }
.m-toast__check { width: 24px; height: 24px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: none; }
.m-toast__text { font-weight: 600; }
.m-toast .m-btn { padding: 6px 10px; font-size: 12px; border-radius: var(--r6); }
@media (max-width: 759px) { .m-toast { bottom: 72px; right: 12px; left: 12px; } }
.m-overlay { position: fixed; inset: 0; background: rgba(15,17,20,.72); z-index: 50; display: grid; place-items: center; padding: 20px; }
.m-overlay[hidden] { display: none; }
.m-overlay__card { background: var(--white); border-radius: var(--r14); padding: 32px 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; animation: fitpop .35s ease-out; min-width: 280px; text-align: center; color: var(--ink); }
.m-overlay__title { font-weight: 800; font-size: 16px; }
.m-overlay__sub { font-size: 13px; color: var(--muted); }

/* ---------- 404 · account ---------- */
.m-404__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.m-page .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 20px; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.m-page .woocommerce-MyAccount-navigation a { display: inline-block; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--r6); font-weight: 700; font-size: var(--t-small); }
.m-page .woocommerce-MyAccount-navigation .is-active a { background: var(--ink); color: var(--white) !important; border-color: var(--ink); }
.m-page .woocommerce-form-login, .m-page .woocommerce-form-register { max-width: 420px; }
.m-page .woocommerce-form-login .input-text, .m-page .woocommerce-form-register .input-text { width: 100%; height: 44px; border: 1px solid var(--border-strong); border-radius: var(--r6); padding: 0 10px; }
.m-page .woocommerce-button, .m-page .woocommerce-form-login .button, .m-page .woocommerce-form-register .button { background: var(--amber); color: var(--ink); border: 0; border-radius: var(--r8); height: 44px; padding: 0 16px; font-weight: 800; }

/* ---------- generic page content (Phase 2 pages, Woo cart/checkout shell) ---------- */
.m-page { padding: 32px 20px 80px; }
.m-page .entry-content { background: var(--white); border: 1px solid var(--border); border-radius: var(--r12); padding: 24px; }
.m-page .m-page-title { margin-bottom: 16px; }
.woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-error { border-radius: var(--r8); }

/* =========================================================================
   Phase 2
   ========================================================================= */

/* ---------- shared bits ---------- */
.m-flag { font-size: 12px; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--r6); padding: 8px 10px; line-height: 1.5; }
.m-flag--wide { grid-column: 1 / -1; font-size: 13px; color: var(--warn-text); border-radius: var(--r10); padding: 14px 16px; }
.m-status { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: var(--r4); background: var(--surface); color: var(--muted); white-space: nowrap; }
.m-status--live { background: var(--ok-bg); color: var(--ok); }
.m-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.m-dot--auto { background: var(--auto); } .m-dot--marine { background: var(--marine); }
.m-dept-chip { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--r4); color: var(--white); }
.m-dept-chip--auto { background: var(--auto); } .m-dept-chip--marine { background: var(--marine); }
.m-amber-mono { font-size: 12px; color: var(--amber); margin-bottom: 6px; }
.m-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.m-form-error { color: var(--err); background: var(--err-bg); border: 1px solid var(--err-border); border-radius: var(--r6); padding: 8px 10px; font-size: 13px; }
.m-form-error[hidden], .m-success[hidden] { display: none; }
.m-form-card--bordered { border: 1px solid var(--border); padding: 24px; }
.m-dark-band { margin-top: 32px; background: var(--ink); color: var(--white); border-radius: var(--r12); padding: 24px; display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 20px; align-items: center; }
.m-dark-band__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; }
.m-dark-band__grid > div { background: var(--dark); border: 1px solid var(--steel); border-radius: var(--r8); padding: 12px; line-height: 1.5; }
.m-dark-band__grid span { color: var(--muted); } .m-dark-band__grid span.is-amber { color: var(--amber); }

/* ---------- brands ---------- */
.m-brand-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 14px; }
.m-brand-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r12); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.m-brand-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.m-brand-card__logo { width: 56px; height: 56px; border-radius: var(--r10); background: repeating-linear-gradient(45deg,#EEF0F2 0 6px,#E7EAEE 6px 12px); display: grid; place-items: center; font-size: 10px; color: var(--muted); text-align: center; line-height: 1.2; }
.m-brand-card__depts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.m-brand-card h2 { font-size: 20px; font-weight: 800; margin-bottom: 2px; }
.m-brand-card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 6px; gap: 8px; }

/* ---------- guides ---------- */
.m-guides__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.m-guides__head h2 { font-size: 18px; font-weight: 800; }
.m-guides__list { display: flex; flex-direction: column; gap: 8px; }
.m-guide { background: var(--white); border: 1px solid var(--border); border-radius: var(--r10); padding: 14px 16px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; transition: transform .15s; color: var(--ink) !important; }
.m-guide:hover { transform: translateX(3px); }
.m-guide[aria-disabled="true"] { cursor: default; }
.m-guide__title { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.m-guide__topic { font-size: 12px; color: var(--muted); }

/* ---------- pro ---------- */
.m-pro-cards { display: grid; gap: 10px; }
.m-pro-card { background: var(--dark); border: 1px solid var(--steel); border-radius: var(--r10); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.m-pro-card b { font-weight: 800; } .m-pro-card span { font-size: 13px; color: var(--faint); line-height: 1.5; }
.m-pro-card.is-dim { opacity: .7; }

/* ---------- support ---------- */
.m-tiles-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 10px; margin-bottom: 36px; }
.m-support-tile { text-align: left; background: var(--white); border: 1px solid var(--border); border-radius: var(--r10); padding: 16px; display: flex; flex-direction: column; gap: 6px; min-height: 104px; transition: transform .15s, box-shadow .15s; color: var(--ink) !important; }
.m-support-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-tile); }
.m-support-tile__title { font-size: 15px; font-weight: 700; }
.m-support-tile__desc { font-size: 12px; color: var(--muted); line-height: 1.45; }
.m-faq { display: flex; flex-direction: column; gap: 6px; }
.m-faq__item { background: var(--white); border: 1px solid var(--border); border-radius: var(--r10); overflow: hidden; }
.m-faq__q { width: 100%; text-align: left; border: 0; background: transparent; padding: 14px 16px; font-weight: 700; font-size: 14px; display: flex; justify-content: space-between; gap: 12px; }
.m-faq__chev { color: var(--muted); }
.m-faq__a { padding: 0 16px 14px; font-size: 13px; line-height: 1.6; color: var(--body); animation: fadeup .2s ease-out; }
.m-faq__a[hidden] { display: none; }
.m-policy { background: var(--white); border: 1px solid var(--border); border-radius: var(--r10); padding: 16px; font-size: 13px; line-height: 1.6; color: var(--body); }
.m-policy b { display: block; color: var(--ink); font-weight: 800; margin-bottom: 4px; }

/* ---------- contact ---------- */
.m-contact__grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(280px,1fr); gap: 24px; align-items: start; }
@media (max-width: 759px) { .m-contact__grid { grid-template-columns: 1fr; } }
.m-biz-card { background: var(--ink); color: var(--white); border-radius: var(--r12); padding: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.m-biz-card__note { font-size: 12px; color: var(--faint); line-height: 1.5; border-top: 1px solid var(--steel); padding-top: 10px; }
.m-shortcuts { background: var(--white); border: 1px solid var(--border); border-radius: var(--r12); padding: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.m-shortcuts a, .m-shortcuts button { text-align: left; border: 1px solid var(--border); background: var(--page); border-radius: var(--r8); padding: 10px 12px; font-weight: 700; font-size: 13px; color: var(--ink) !important; }

/* ---------- about ---------- */
.m-about-blocks { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16px; padding-top: 40px; }
.m-about-block { background: var(--white); border: 1px solid var(--border); border-radius: var(--r12); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.m-about-block h2 { font-size: 18px; font-weight: 800; }
.m-about-block p { font-size: 14px; line-height: 1.6; color: var(--body); text-wrap: pretty; }

/* ---------- quote modal ---------- */
.m-modal { position: fixed; inset: 0; background: rgba(15,17,20,.6); z-index: 70; display: grid; place-items: center; padding: 20px; }
.m-modal[hidden] { display: none; }
.m-modal__card { background: var(--white); border-radius: var(--r14); padding: 26px; max-width: 520px; width: 100%; display: flex; flex-direction: column; gap: 12px; animation: fadeup .25s ease-out; max-height: calc(100vh - 40px); overflow: auto; }
.m-modal__head { display: flex; justify-content: space-between; align-items: baseline; }
.m-modal__head h2 { font-size: 20px; font-weight: 800; }
.m-modal__close { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--muted); }
.m-modal .m-input, .m-modal .m-select { height: 42px; }

/* ---------- filters drawer (mobile) ---------- */
.m-drawer-toggle { display: none; margin-bottom: 12px; }
.m-drawer__head { display: none; }
@media (max-width: 759px) {
  .m-drawer-toggle { display: inline-flex; }
  .m-drawer { position: fixed; inset: 0; z-index: 45; }
  .m-drawer[hidden] { display: none; }
  .m-drawer__scrim { position: absolute; inset: 0; background: rgba(15,17,20,.6); }
  body.m-drawer-open .m-results .m-facets { display: flex; position: fixed; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); z-index: 46; border-radius: 0; overflow: auto; animation: fadeup .2s ease-out; }
  body.m-drawer-open .m-drawer__head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
  body.m-drawer-open { overflow: hidden; }
}

/* ---------- cart ---------- */
.m-cart__count { color: var(--faint); font-weight: 600; font-size: 18px; }
.m-cart__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,340px); gap: 24px; align-items: start; }
@media (max-width: 759px) { .m-cart__grid, .m-checkout__grid { grid-template-columns: 1fr; } .m-summary { position: static !important; } }
.m-cart__rows { display: flex; flex-direction: column; gap: 10px; }
.m-line { background: var(--white); border: 1px solid var(--border); border-radius: var(--r10); padding: 14px; display: grid; grid-template-columns: 80px minmax(0,1fr) auto; gap: 14px; align-items: center; }
.m-line__thumb { border-radius: var(--r8); overflow: hidden; background: repeating-linear-gradient(45deg,#EEF0F2 0 8px,#E7EAEE 8px 16px); aspect-ratio: 1; display: grid; place-items: center; }
.m-line__thumb img { width: 100%; height: 100%; object-fit: contain; background: var(--white); }
.m-line__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.m-line__brand { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.m-line__name, .m-line__name a { font-weight: 700; font-size: 14px; color: var(--ink) !important; }
.m-line__ident { font-size: 12px; color: var(--muted); }
.m-line__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.m-line__total { font-weight: 800; font-size: 16px; }
.m-qty--sm { height: 34px; border-radius: var(--r6); } .m-qty--sm button { width: 32px; font-size: 16px; } .m-qty--sm input { width: 36px; font-size: 13px; }
.m-line__remove { border: 0; background: transparent; color: var(--muted) !important; font-size: 12px; text-decoration: underline !important; padding: 0; }
.m-cart__actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
.m-summary { position: sticky; top: 120px; }
.m-summary__card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r10); padding: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.m-summary__row { display: flex; justify-content: space-between; gap: 12px; }
.m-summary__row > span:first-child { color: var(--muted); }
.m-summary__note { text-align: right; font-size: 13px; } .m-summary__note small { color: var(--muted); font-size: 12px; }
.m-summary__total { display: flex; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 10px; font-size: 18px; font-weight: 800; }
.m-summary__total--inline { font-size: 15px; border-top: 0; padding-top: 0; }
.m-summary .checkout-button, .m-summary .wc-proceed-to-checkout a.button { display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r8); height: 48px; font-weight: 800; font-size: 15px; background: var(--amber); color: var(--ink) !important; text-decoration: none; }
.m-summary .wc-proceed-to-checkout { margin: 0; padding: 0; }
.m-review__line { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--surface); }
.m-review__name { font-weight: 700; font-size: 13px; line-height: 1.3; }
.m-empty--card { border-radius: var(--r12); padding: 48px; }

/* ---------- checkout ---------- */
.m-checkout__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,360px); gap: 24px; align-items: start; }
.m-checkout__cards { display: flex; flex-direction: column; gap: 14px; }
.m-step { background: var(--white); border: 1px solid var(--border); border-radius: var(--r10); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.m-step__head { display: flex; align-items: center; gap: 10px; }
.m-step__head h2 { font-size: 16px; font-weight: 800; }
.m-step__num { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.m-step__lock { margin-left: auto; font-size: 12px; color: var(--ok); font-weight: 700; }
.m-checkout .woocommerce-billing-fields h3, .m-checkout .woocommerce-shipping-fields h3, .m-checkout .woocommerce-additional-fields h3 { font-size: 13px; font-weight: 700; color: var(--muted); margin: 6px 0 8px; }
.m-checkout .form-row { margin: 0 0 10px; padding: 0; }
.m-checkout .form-row label { font-size: 12px; font-weight: 700; color: var(--body); display: block; margin-bottom: 4px; }
.m-checkout .form-row .input-text, .m-checkout .form-row select, .m-checkout .select2-container .select2-selection--single { height: 44px; border: 1px solid var(--border-strong); border-radius: var(--r6); padding: 0 10px; font-size: 14px; width: 100%; background: var(--white); }
.m-checkout .select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px; }
.m-checkout .form-row-first, .m-checkout .form-row-last { width: calc(50% - 5px); float: left; } .m-checkout .form-row-last { float: right; } .m-checkout .form-row-wide, .m-checkout .clear { clear: both; }
.m-checkout .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.m-checkout .woocommerce-shipping-methods li { border: 1px solid var(--border); border-radius: var(--r8); padding: 12px 14px; }
.m-checkout .wc_payment_methods { list-style: none; margin: 0; padding: 0; }
.m-checkout .wc_payment_method { border: 1px solid var(--border); border-radius: var(--r8); padding: 12px 14px; margin-bottom: 8px; }
.m-checkout .woocommerce-checkout-payment { background: transparent; }
.m-checkout #place_order, .m-checkout .place-order .button { width: 100%; border: 0; border-radius: var(--r8); height: 48px; font-weight: 800; font-size: 15px; background: var(--amber); color: var(--ink); }
.m-checkout #place_order:disabled { background: var(--surface); color: var(--faint); }
.m-checkout .woocommerce-terms-and-conditions-wrapper { font-size: 12px; color: var(--body); line-height: 1.5; }
.m-checkout .woocommerce-privacy-policy-text { font-size: 12px; color: var(--faint); }
.m-checkout .woocommerce-NoticeGroup .woocommerce-error { list-style: none; padding: 12px 14px; }
.m-placed { background: var(--white); border: 1px solid var(--ok-border); border-radius: var(--r14); padding: 40px; text-align: center; max-width: 620px; margin: 0 auto; animation: fitpop .45s ease-out; color: var(--ok); }
.m-placed svg { width: 56px; height: 56px; margin-bottom: 12px; }
.m-placed h1 { font-size: 26px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.m-placed p { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
.m-placed .m-kv dd { color: var(--ink); }