/* Lorica Automotive - editorial monochrome skin for home-c only.
   Loaded after site.css. Everything is scoped under body.editorial so the
   shared header, footer and partials pick up the palette without site.css
   changing for the other variants. The floating glass header keeps its
   geometry, blur and shadow from site.css; only its colours are retinted. */

body.editorial {
  /* palette */
  --ink: #0a0a0a;
  --charcoal: #151515;
  --fog: #858585;
  --pewter: #9d9d9d;
  --steel: #545454;
  --dove: #d5d9e2;
  --cream: #f9f8f6;
  --sand: #f2ede5;
  --slate: #3b3b3b;

  /* remap the shared tokens so partials follow along */
  --navy: #0a0a0a;
  --navy-deep: #151515;
  --amber: #0a0a0a;
  --teal: #545454;
  --teal-bg: #f2ede5;
  --tint: #f2ede5;
  --panel: #f9f8f6;
  --body: #545454;
  --muted: #858585;
  --muted-2: #858585;
  --faint: #9d9d9d;
  --warn: #545454;
  --line: #d5d9e2;
  --line-soft: #d5d9e2;
  --line-strong: #d5d9e2;
  --shadow-card: 0 0 0 1px rgba(10, 10, 10, .15);
  --shadow-hero: 0 0 0 1px rgba(10, 10, 10, .15);
  --ring: 0 0 0 1px rgba(10, 10, 10, .15);

  --font-head: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --max: 1200px;
  --section: 80px;

  background: #fff;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}

.editorial h1, .editorial h2, .editorial h3 {
  font-weight: 400;
  letter-spacing: -.025em;
  font-optical-sizing: auto;
}
.editorial h1 { font-size: clamp(44px, 6vw, 72px); line-height: 1; }
.editorial h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1; }
.editorial h3 { font-size: 24px; line-height: 32px; letter-spacing: -.6px; }

.editorial p { color: var(--steel); }

/* ---------- shared bits, retinted ---------- */

.editorial .eyebrow {
  font: 400 12px/20px var(--font-mono);
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--fog);
}

.editorial .link { color: var(--ink); font-weight: 500; text-decoration: none; }
.editorial .link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.editorial .btn {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 12px 20px;
  border-radius: 9999px;
  transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.editorial .btn:hover { transform: none; }
.editorial .btn--navy, .editorial .btn--amber { background: var(--ink); color: #fff; font-weight: 500; }
.editorial .btn--navy:hover, .editorial .btn--amber:hover { background: #262626; }
.editorial .btn--ghost { background: transparent; color: var(--ink); }
.editorial .btn--ghost:hover { box-shadow: 0 0 0 1px var(--dove); }
.editorial .btn--outline { border: 0; background: #fff; box-shadow: 0 0 0 1px var(--dove); }
.editorial .btn--outline:hover { box-shadow: var(--ring); }

/* Announcement strip: quiet cream bar, sand pill */
.editorial .strip { background: var(--cream); color: var(--ink); border-bottom: 1px solid var(--dove); }
.editorial .strip__pill {
  background: var(--sand);
  color: var(--ink);
  font: 500 12px/20px var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  padding: 0 8px;
}
.editorial .strip__inner a { color: var(--ink); }

/* Header: keep the glass card, retint the type, sit it 20px off the top */
.editorial .nav { height: 100px; padding-top: 20px; }
.editorial .nav--scrolled .nav__inner { margin-top: 0; }
.editorial .nav__menu, .editorial .nav__link, .editorial .nav__trigger { color: var(--fog); font-weight: 500; }
.editorial .nav__menu > a:hover, .editorial .nav__link:hover,
.editorial .nav__trigger:hover, .editorial .nav__trigger[aria-expanded="true"] { color: var(--ink); }
.editorial .nav__search, .editorial .nav__burger { color: var(--fog); border-color: var(--dove); }
.editorial .nav__search:hover, .editorial .nav__burger:hover,
.editorial .nav__search[aria-expanded="true"], .editorial .nav__burger[aria-expanded="true"] { background: var(--cream); border-color: var(--dove); color: var(--ink); }
.editorial .btn--nav { background: var(--ink); color: #fff; }
.editorial .btn--nav:hover { background: #262626; }
.editorial .nav__dropdown { border-color: var(--dove); box-shadow: var(--ring), 0 18px 40px -24px rgba(15, 23, 42, .18); }
.editorial .nav__dropdown a:hover { background: var(--cream); }
.editorial .nav__dropdown a small { color: var(--fog); }
.editorial .nav__searchbar input { border-color: var(--dove); border-radius: 6px; }
.editorial .nav__searchbar input:focus { border-color: var(--ink); box-shadow: var(--ring); }
.editorial .nav__mobile a { border-color: var(--dove); }
.editorial .nav__mobile .btn--outline { border-radius: 9999px; }

/* ---------- hero ---------- */

.editorial .hero--c { padding-top: 96px; }
.editorial .hero--c h1 { max-width: 900px; margin-top: 20px; }
.editorial .hero--c p { max-width: 640px; margin-top: 24px; font-size: 18px; line-height: 1.5; color: var(--fog); }
.editorial .hero__cta { margin-top: 32px; gap: 8px; }

/* Picker: flat cream card with a single hairline ring */
.editorial .picker {
  margin-top: 64px;
  max-width: 920px;
  background: var(--cream);
  border: 0;
  box-shadow: var(--ring);
  border-radius: 16px;
  padding: 24px;
  text-align: left;
}
.editorial .picker__tag {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 0;
  background: none;
  font: 400 12px/20px var(--font-mono);
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--fog);
}
.editorial .picker__tag b {
  font: 500 12px/20px var(--font-body);
  color: var(--ink);
  background: var(--sand);
  border-radius: 9999px;
  padding: 0 8px;
}
.editorial .picker__row .btn { padding: 12px 20px; font-size: 14px; font-weight: 500; }
.editorial .select select {
  border: 1px solid var(--dove);
  border-radius: 6px;
  padding: 12px 36px 12px 14px;
  font-size: 14px;
  line-height: 20px;
}
.editorial .select select:focus { border-color: var(--ink); box-shadow: var(--ring); }
.editorial .select::after { color: var(--fog); }

/* Fit results inside the picker */
.editorial .picker__results { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--dove); }
.editorial .fit-head { font: 400 12px/20px var(--font-mono); letter-spacing: -.01em; color: var(--fog); }
.editorial .fit-head b { font-weight: 400; color: var(--ink); }
.editorial .tile { background: #fff; border: 0; box-shadow: 0 0 0 1px var(--dove); border-radius: 8px; }
.editorial .tile__img { display: flex; align-items: center; justify-content: center; height: 120px; padding: 8px; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px var(--cream); }
.editorial .tile__img img { max-height: 100%; width: auto; object-fit: contain; }
.editorial .tile__brand { font: 400 11px/20px var(--font-mono); letter-spacing: -.01em; color: var(--fog); }
.editorial .tile__name { font-size: 14px; line-height: 20px; }
.editorial .tile__fit { font: 400 12px/20px var(--font-mono); color: var(--ink); margin: 6px 0 2px; }
.editorial .tile__price { font-weight: 500; }
.editorial .tile__price b { font-weight: 500; }
.editorial .tile__price span { color: var(--fog); }
.editorial .results.is-loading { opacity: .4; transition: opacity .15s; }
.editorial .btn:disabled { opacity: .45; cursor: default; }
.editorial .btn--navy:disabled:hover, .editorial .btn--amber:disabled:hover { background: var(--ink); }

/* ---------- stat row ---------- */

.editorial .stats { margin-top: 96px; border-color: var(--dove); }
.editorial .stat { padding: 32px 24px; border-color: var(--dove); }
.editorial .stat__num { font: 400 30px/36px var(--font-head); letter-spacing: -.75px; }
.editorial .stat__label { margin-top: 8px; font: 400 12px/20px var(--font-mono); letter-spacing: -.01em; color: var(--pewter); }

/* ---------- feature splits ---------- */

.editorial .feat { padding-top: var(--section); }
.editorial .feat__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
}
.editorial .feat__row--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.editorial .feat__row--flip > :first-child { order: 2; }
.editorial .feat__copy h2 { margin-top: 12px; }
.editorial .feat__copy p { margin: 20px 0 0; font-size: 16px; line-height: 24px; color: var(--fog); max-width: 460px; }
.editorial .feat__list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.editorial .feat__list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 20px; color: var(--ink); }
.editorial .feat__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 8px;
  height: 5px;
  border-left: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(-45deg);
}

/* Store listing mock: grid of product cards, or the same cards as list rows */
.editorial .shop__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 12px/20px var(--font-mono); letter-spacing: -.01em; color: var(--fog); margin-bottom: 12px; }
.editorial .shop__tabs { margin-top: 12px; }
.editorial .shop__views { display: grid; }
.editorial .shop__views > * { grid-area: 1 / 1; }
.editorial .shop__grid.is-off { visibility: hidden; pointer-events: none; }
.editorial .shop__head b { font-weight: 400; color: var(--ink); }
.editorial .shop__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.editorial .pc { display: flex; flex-direction: column; background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px var(--dove); overflow: hidden; }
.editorial .pc__img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 12px;
  background: #fff;
  border-bottom: 1px solid var(--cream);
  font: 400 11px/20px var(--font-mono);
  letter-spacing: -.01em;
  color: var(--pewter);
}
.editorial .pc__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.editorial .pc__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 0 8px;
  border-radius: 9999px;
  background: var(--ink);
  color: #fff;
  font: 500 12px/20px var(--font-body);
  letter-spacing: 0;
}
.editorial .pc__badge--sand { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--dove); }
.editorial .pc__body { flex: 1; padding: 12px 12px 0; }
.editorial .pc__brand { font: 400 11px/20px var(--font-mono); letter-spacing: -.01em; color: var(--fog); }
.editorial .pc__title { font-size: 14px; line-height: 20px; font-weight: 500; }
.editorial .pc__stars { margin-top: 4px; font-size: 12px; line-height: 20px; color: var(--fog); }
.editorial .pc__stars i { font-style: normal; color: #ffbd2e; letter-spacing: 1px; }
.editorial .pc__fit { margin-top: 8px; font: 400 12px/20px var(--font-mono); letter-spacing: -.01em; color: var(--ink); }
.editorial .pc__stock { font: 400 12px/20px var(--font-mono); letter-spacing: -.01em; color: var(--fog); }
.editorial .pc__buy { padding: 12px; }
.editorial .pc__price { font-size: 16px; line-height: 24px; font-weight: 500; }
.editorial .pc__price s { margin-left: 4px; font-size: 13px; font-weight: 400; color: var(--pewter); }
.editorial .pc__cta { display: flex; width: 100%; margin-top: 8px; padding: 8px 16px; }

.editorial .shop__grid--list { grid-template-columns: minmax(0, 1fr); align-content: start; }
.editorial .shop__grid--list .pc { flex-direction: row; align-items: center; }
.editorial .shop__grid--list .pc__img { flex: none; width: 112px; align-self: stretch; aspect-ratio: auto; font-size: 10px; }
.editorial .shop__grid--list .pc__badge { top: 6px; left: 6px; font-size: 11px; line-height: 18px; }
.editorial .shop__grid--list .pc__body { padding: 12px 16px; }
.editorial .shop__grid--list .pc__buy { flex: none; padding: 12px 16px; text-align: right; }
.editorial .shop__grid--list .pc__cta { width: auto; display: inline-flex; }

.editorial .tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.editorial .tabs button {
  border-radius: 9999px;
  padding: 6px 12px;
  font: 400 13px/20px var(--font-mono);
  letter-spacing: -.01em;
  color: var(--fog);
  transition: background .12s ease, color .12s ease;
}
.editorial .tabs button:hover { color: var(--ink); }
.editorial .tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }

/* Cream card: flat, no shadow, 16px */
.editorial .card {
  background: var(--cream);
  border-radius: 16px;
  padding: 40px;
}
.editorial .card--tight { padding: 24px; }

/* Checkout mock */
.editorial .co__head { display: flex; justify-content: space-between; font: 400 12px/20px var(--font-mono); color: var(--fog); }
.editorial .co__line { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; margin-top: 20px; align-items: start; }
.editorial .co__img { display: flex; align-items: center; justify-content: center; height: 72px; padding: 4px; background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px var(--dove); }
.editorial .co__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.editorial .co__name { font-size: 16px; line-height: 24px; font-weight: 500; }
.editorial .co__meta { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--fog); }
.editorial .co__meta b { font-weight: 500; color: var(--ink); }
.editorial .co__price { font-size: 16px; line-height: 24px; font-weight: 500; white-space: nowrap; }
.editorial .co__ship { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--dove); display: flex; flex-direction: column; gap: 8px; }
.editorial .co__opt { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 20px; }
.editorial .co__opt small { display: block; color: var(--fog); font-size: 12px; line-height: 20px; }
.editorial .co__opt--on { color: var(--ink); }
.editorial .co__opt--on > span:first-child::before { content: "● "; font-size: 9px; vertical-align: 2px; }
.editorial .co__opt:not(.co__opt--on) { color: var(--fog); }
.editorial .co__opt:not(.co__opt--on) > span:first-child::before { content: "○ "; font-size: 9px; vertical-align: 2px; }
.editorial .co__total { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--dove); display: flex; justify-content: space-between; font-size: 16px; line-height: 24px; font-weight: 500; }
.editorial .co__cta { margin-top: 20px; }
.editorial .co__cta .btn { width: 100%; }

/* Order timeline */
.editorial .tl { list-style: none; margin: 0; padding: 0; }
.editorial .tl li { display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--dove); }
.editorial .tl li:first-child { border-top: 0; padding-top: 0; }
.editorial .tl li:last-child { padding-bottom: 0; }
.editorial .tl time { font: 400 12px/20px var(--font-mono); letter-spacing: -.01em; color: var(--fog); }
.editorial .tl b { display: block; font-size: 14px; line-height: 20px; font-weight: 500; }
.editorial .tl span { display: block; font-size: 14px; line-height: 20px; color: var(--fog); }
.editorial .tl code { font: 400 12px/20px var(--font-mono); color: var(--steel); }
.editorial .tl__head { display: flex; justify-content: space-between; margin-bottom: 20px; font: 400 12px/20px var(--font-mono); color: var(--fog); }
.editorial .tl__head b { font-weight: 400; color: var(--ink); }

/* Product data mock */
.editorial .pd { display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.editorial .pd__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 8px; background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px var(--dove); }
.editorial .pd__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.editorial .pd__thumbs { display: flex; gap: 8px; margin-top: 8px; }
.editorial .pd__thumb { width: 48px; height: 48px; padding: 4px; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px var(--dove); display: flex; align-items: center; justify-content: center; }
.editorial .pd__thumb--on { box-shadow: 0 0 0 1px var(--ink); }
.editorial .pd__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.editorial .pd__logo { height: 18px; width: auto; margin-top: 16px; }
.editorial .pd__title { font-size: 18px; line-height: 24px; font-weight: 500; }
.editorial .pd__price { margin-top: 8px; font-size: 16px; line-height: 24px; }
.editorial .pd__price span { color: var(--fog); font-size: 14px; }
.editorial .pd__fit { margin-top: 12px; font: 400 12px/20px var(--font-mono); letter-spacing: -.01em; color: var(--ink); }
.editorial .pd__fit + .pd__fit { margin-top: 2px; color: var(--steel); }
.editorial .pd__specs { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--dove); display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13px; line-height: 20px; }
.editorial .pd__specs dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: -.01em; color: var(--fog); margin: 0; }
.editorial .pd__specs dd { margin: 0; color: var(--ink); }
.editorial .pd__actions { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.editorial .pd__actions .btn { padding: 8px 16px; }

/* ---------- pillars: flat cream cards ---------- */

.editorial .pillars { padding-top: var(--section); gap: 16px; }
.editorial .pillar { background: var(--cream); border-radius: 16px; padding: 40px; gap: 12px; }
.editorial .pillar h3 { font-size: 24px; line-height: 32px; letter-spacing: -.6px; }
.editorial .pillar p { font-size: 14px; line-height: 20px; color: var(--fog); }

/* ---------- pricing ---------- */

.editorial .pricing { padding-top: var(--section); padding-bottom: 0; }
.editorial .pricing h2 { margin-top: 12px; }
.editorial .pricing--split .pricing__aside p { font-size: 16px; line-height: 24px; color: var(--fog); }
.editorial .pricing__cta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- footer ---------- */

.editorial .footer { margin-top: var(--section); border-color: var(--dove); color: var(--fog); padding: 48px 0 64px; }
.editorial .footer__col b { font-weight: 500; }
.editorial .footer__col a:hover { color: var(--ink); }
.editorial .footer__tag { font-family: var(--font-mono); letter-spacing: -.01em; text-transform: none; font-size: 12px; }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .editorial .nav { height: 84px; }
  .editorial .feat__row, .editorial .feat__row--flip { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .editorial .feat__row--flip > :first-child { order: 0; }
  .editorial .card { padding: 24px; }
  .editorial .pillar { padding: 28px; }
}
@media (max-width: 720px) {
  .editorial .hero--c { padding-top: 56px; }
  .editorial .picker { margin-top: 40px; padding: 20px 16px; }
  .editorial .stats { margin-top: 64px; }
  .editorial .stat { padding: 20px 16px; }
  .editorial .feat { padding-top: 64px; }
  .editorial .pd { grid-template-columns: 1fr; }
  .editorial .pd__img { aspect-ratio: 16 / 9; }
  .editorial .co__line { grid-template-columns: 56px 1fr; }
  .editorial .co__price { grid-column: 2; }
  .editorial .tl li { grid-template-columns: 1fr; gap: 2px; }
  .editorial .shop__grid { grid-template-columns: minmax(0, 1fr); }
  .editorial .shop__head { flex-wrap: wrap; }
  .editorial .pc__img { aspect-ratio: 2; }
  .editorial .shop__grid--list .pc { flex-direction: column; align-items: stretch; }
  .editorial .shop__grid--list .pc__img { width: auto; aspect-ratio: 2; }
  .editorial .shop__grid--list .pc__buy { text-align: left; }
  .editorial .pricing__cta { justify-content: flex-start; }
}