:root {
  color-scheme: light;
  --forest: #10241e;
  --forest-2: #1d382f;
  --moss: #59754c;
  --lime: #c8ee8e;
  --lime-2: #e8f5d9;
  --sand: #f5f4ee;
  --paper: #fbfbf8;
  --white: #fff;
  --ink: #1b2822;
  --muted: #65736c;
  --line: #e4e8e1;
  --amber: #966c28;
  --amber-bg: #fbf3df;
  --red: #a34236;
  --red-bg: #faeae6;
  --shadow: 0 16px 48px rgba(16, 36, 30, .09);
  font-family: "DM Sans", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img { max-width: 100%; }
.initial-load { min-height: 100vh; display: grid; place-items: center; color: var(--muted); }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.topline { background: var(--forest); color: #d8e2d9; font-size: 12px; }
.topline-inner { min-height: 36px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.topline strong { color: var(--lime); font-weight: 600; }
.topline a { color: #f4f7ef; }
.header { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.header-inner { min-height: 78px; display: flex; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--lime); background: var(--forest); font-size: 17px; font-weight: 800; letter-spacing: -1px; }
.brand-word { display: block; font: 800 15px/1.1 "Manrope", "Segoe UI", sans-serif; letter-spacing: -.55px; }
.brand-word small { display: block; margin-top: 4px; color: var(--moss); font: 700 9px/1 "DM Sans", sans-serif; letter-spacing: 1.45px; }
.primary-nav { display: flex; align-items: center; gap: 22px; margin-left: 8px; white-space: nowrap; }
.primary-nav a { color: #44524b; font-size: 13px; font-weight: 600; }
.primary-nav a:hover, .footer a:hover { color: var(--moss); }
.header-search { flex: 1; min-width: 130px; max-width: 260px; position: relative; }
.header-search input { width: 100%; height: 42px; padding: 0 38px 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); outline: none; font-size: 12px; }
.header-search input:focus, .field input:focus, .field select:focus, .field textarea:focus, .filter-field:focus { border-color: #94ad7a; box-shadow: 0 0 0 3px rgba(148,173,122,.17); }
.header-search button { position: absolute; right: 5px; top: 5px; width: 32px; height: 32px; border: 0; border-radius: 6px; color: white; background: var(--forest); cursor: pointer; }
.header-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.icon-link, .icon-button { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--forest); font-size: 12px; cursor: pointer; }
.icon-link .label { font-weight: 600; }
.cart-count { min-width: 19px; height: 19px; display: inline-grid; place-items: center; padding-inline: 4px; border-radius: 20px; background: var(--lime-2); color: var(--forest); font-size: 10px; font-weight: 700; }
.menu-toggle { display: none; }
.hero { padding: 62px 0 60px; overflow: hidden; background: var(--forest); color: white; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.eyebrow { margin: 0 0 13px; color: var(--moss); font-size: 11px; line-height: 1.4; font-weight: 700; letter-spacing: 1.65px; text-transform: uppercase; }
.hero .eyebrow { color: var(--lime); }
.hero h1 { max-width: 680px; margin: 0; font: 800 clamp(38px, 5vw, 62px)/1.04 "Manrope", "Segoe UI", sans-serif; letter-spacing: -2.5px; }
.hero h1 em { color: var(--lime); font-style: normal; }
.hero-copy { max-width: 660px; margin: 21px 0 25px; color: #c5d0c8; font-size: 16px; line-height: 1.75; }
.hero-search { display: flex; gap: 8px; padding: 7px; max-width: 600px; border-radius: 11px; background: white; }
.hero-search input { width: 100%; min-width: 0; height: 46px; padding: 0 13px; border: 0; outline: 0; background: transparent; color: var(--ink); }
.hero-search button { flex: 0 0 auto; padding: 0 18px; border: 0; border-radius: 7px; background: var(--lime); color: var(--forest); font-weight: 700; cursor: pointer; }
.hero-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 21px; }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 17px; border: 1px solid transparent; border-radius: 7px; background: var(--forest); color: white; font-size: 13px; font-weight: 700; cursor: pointer; transition: .16s ease; }
.button:hover { background: var(--forest-2); transform: translateY(-1px); }
.button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.button-light { background: var(--lime); color: var(--forest); }
.button-light:hover { background: #d5f2a6; }
.button-outline { border-color: #d8e0d8; background: white; color: var(--forest); }
.button-outline:hover { background: var(--sand); }
.button-quiet { border-color: var(--line); background: transparent; color: var(--forest); }
.button-small { min-height: 36px; padding-inline: 12px; font-size: 12px; }
.button-danger { background: var(--red-bg); color: var(--red); }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero-art { min-height: 400px; position: relative; display: grid; place-items: center; }
.hero-art:before { content: ""; position: absolute; width: min(390px, 90%); aspect-ratio: 1; right: 3%; top: 3%; border-radius: 50%; background: #31473a; }
.hero-art-card { z-index: 1; width: min(420px, 94%); min-height: 320px; position: relative; overflow: hidden; display: flex; align-items: end; padding: 26px; border: 1px solid #71837466; border-radius: 4px 112px 4px 4px; background: linear-gradient(165deg, #b9c3a5 0 35%, #738775 36% 55%, #304b3e 56% 70%, #d0c8aa 71%); box-shadow: 0 25px 60px #0003; }
.hero-art-card:before { content: ""; position: absolute; inset: 0; background: linear-gradient(148deg, transparent 45%, #d5d3bc 46% 49%, transparent 50%), linear-gradient(170deg, transparent 64%, #e7e0c8 65% 71%, transparent 72%); }
.hero-art-card:after { content: "MR"; position: absolute; right: 23px; top: 20px; color: #ffffff42; font: 800 58px/1 "Manrope", sans-serif; letter-spacing: -6px; }
.art-caption { z-index: 1; color: white; font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; }
.art-badge { position: absolute; z-index: 2; right: 0; top: 29px; max-width: 180px; padding: 15px 17px; border-radius: 8px; background: white; color: var(--ink); box-shadow: var(--shadow); font-size: 12px; line-height: 1.5; }
.art-badge strong { display: block; font-size: 14px; }
.trust-note { display: flex; align-items: center; gap: 10px; margin-top: 25px; color: #c5d0c8; font-size: 12px; }
.trust-check { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: var(--forest); background: var(--lime); font-weight: 800; }
.section { padding: 70px 0; }
.section-white { background: white; border-block: 1px solid var(--line); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.section-head h2 { margin: 0; font: 800 clamp(25px,3vw,34px)/1.15 "Manrope","Segoe UI",sans-serif; letter-spacing: -1.1px; }
.section-head p { max-width: 550px; margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.text-link { color: var(--moss); font-size: 13px; font-weight: 700; white-space: nowrap; }
.catalog-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.catalog-card { min-height: 190px; position: relative; display: flex; flex-direction: column; justify-content: end; overflow: hidden; padding: 22px; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(145deg,#eff3e9,#e2ead9); transition: .18s ease; }
.catalog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #c3d0b4; }
.catalog-card:nth-child(2) { background: linear-gradient(145deg,#eff1ee,#e2e8e2); }
.catalog-card:nth-child(3) { background: linear-gradient(145deg,#f2eee5,#e9e3d4); }
.catalog-icon { position: absolute; right: 20px; top: 17px; color: #6b8356; font-size: 34px; }
.catalog-card h3 { margin: 0 0 7px; font: 800 18px/1.2 "Manrope","Segoe UI",sans-serif; }
.catalog-card p { max-width: 290px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.catalog-arrow { position: absolute; right: 20px; bottom: 21px; color: var(--moss); font-size: 19px; }
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.step-card { min-height: 155px; padding: 22px 24px; border-left: 1px solid var(--line); }
.step-card:first-child { border-left: 0; }
.step-number { color: #839673; font: 800 12px/1 "Manrope",sans-serif; letter-spacing: 1px; }
.step-card h3 { margin: 14px 0 7px; font: 700 15px/1.3 "Manrope","Segoe UI",sans-serif; }
.step-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.trust-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.trust-card { padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.trust-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; background: var(--lime-2); color: var(--forest); font-weight: 800; }
.trust-card h3 { margin: 14px 0 8px; font-size: 14px; }
.trust-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.video-placeholder { min-height: 230px; display: grid; place-items: center; padding: 30px; border-radius: 13px; background: var(--forest); color: white; text-align: center; }
.video-placeholder span { display: block; margin-bottom: 11px; color: var(--lime); font-size: 34px; }
.video-placeholder strong { display: block; font: 700 20px "Manrope","Segoe UI",sans-serif; }
.video-placeholder p { max-width: 540px; margin: 10px auto 0; color: #c5d0c8; font-size: 13px; line-height: 1.6; }
.cta-band { padding: 34px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border-radius: 12px; background: var(--lime-2); }
.cta-band h2 { margin: 0; font: 800 24px "Manrope","Segoe UI",sans-serif; }
.cta-band p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.footer { padding: 44px 0 24px; border-top: 1px solid var(--line); background: white; }
.footer-main { display: grid; grid-template-columns: 1.6fr repeat(3,1fr); gap: 30px; padding-bottom: 35px; }
.footer-about p { max-width: 300px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.footer-col strong { display: block; margin-bottom: 13px; font-size: 12px; }
.footer-col a { display: block; margin: 9px 0; color: var(--muted); font-size: 12px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 15px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.page-hero { padding: 48px 0 38px; background: var(--sand); border-bottom: 1px solid var(--line); }
.page-hero h1 { margin: 0; font: 800 clamp(29px,4vw,43px)/1.1 "Manrope","Segoe UI",sans-serif; letter-spacing: -1.7px; }
.page-hero p { max-width: 720px; margin: 13px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.breadcrumbs { margin-bottom: 14px; color: var(--muted); font-size: 12px; }
.breadcrumbs a { color: var(--moss); font-weight: 600; }
.catalog-layout { display: grid; grid-template-columns: 250px 1fr; align-items: start; gap: 24px; }
.filter-panel { position: sticky; top: 98px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.filter-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.filter-title strong { font-size: 14px; }
.filter-title button { border: 0; background: none; color: var(--moss); font-size: 11px; font-weight: 700; cursor: pointer; }
.filter-group { margin-top: 14px; }
.filter-group label { display: block; margin-bottom: 7px; color: #4d5b53; font-size: 11px; font-weight: 700; }
.filter-field, .field input, .field select, .field textarea { width: 100%; min-height: 42px; padding: 10px 11px; border: 1px solid #dfe5dd; border-radius: 7px; outline: none; background: white; color: var(--ink); font-size: 13px; }
.filter-range { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.result-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.result-bar span { color: var(--muted); font-size: 13px; }
.result-bar select { width: auto; min-width: 165px; height: 39px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--ink); font-size: 12px; }
.product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.product-card { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: white; transition: .18s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.product-image { height: 185px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg,#e9eee3,#dce5d3); color: #58734b; font-size: 48px; }
.product-image img { width: 100%; height: 100%; object-fit: cover; }
.product-card-body { padding: 14px; }
.product-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.product-brand { color: var(--moss); font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 5px 8px; border-radius: 20px; background: var(--amber-bg); color: var(--amber); font-size: 10px; line-height: 1.25; font-weight: 700; }
.status-pill.confirmed { background: var(--lime-2); color: #496937; }
.status-pill.sold { background: var(--red-bg); color: var(--red); }
.product-card h3 { margin: 11px 0 6px; font: 700 15px/1.32 "Manrope","Segoe UI",sans-serif; }
.product-sub { min-height: 35px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.product-price { margin-top: 12px; padding-top: 11px; border-top: 1px solid #eef0ec; }
.product-price strong { display: block; font: 800 17px "Manrope","Segoe UI",sans-serif; }
.product-price small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.card-actions { display: flex; gap: 7px; margin-top: 12px; }
.card-actions .button:first-child { flex: 1; }
.empty-state { padding: 42px 20px; border: 1px dashed #cbd4c6; border-radius: 10px; background: #fff; text-align: center; }
.empty-state-icon { margin-bottom: 11px; color: var(--moss); font-size: 30px; }
.empty-state h3 { margin: 0 0 7px; font: 700 17px "Manrope","Segoe UI",sans-serif; }
.empty-state p { max-width: 520px; margin: 0 auto 17px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.catalog-note, .notice { padding: 14px 16px; border-radius: 8px; background: #f0f4ec; color: #53614f; font-size: 12px; line-height: 1.6; }
.notice-warning { background: var(--amber-bg); color: #775b2d; }
.notice-danger { background: var(--red-bg); color: var(--red); }
.detail-layout { display: grid; grid-template-columns: 1fr .9fr; gap: 36px; align-items: start; }
.detail-image-large { width: 100%; min-height: 390px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: linear-gradient(145deg,#e9eee3,#dce5d3); color: #58734b; font-size: 75px; }
.detail-image-large img { width: 100%; height: 100%; min-height: 390px; object-fit: cover; }
.detail-info { padding-top: 6px; }
.detail-info h1 { margin: 12px 0; font: 800 clamp(28px,4vw,38px)/1.12 "Manrope","Segoe UI",sans-serif; letter-spacing: -1.4px; }
.detail-description { color: var(--muted); font-size: 14px; line-height: 1.75; white-space: pre-line; }
.detail-price { margin: 19px 0 6px; font: 800 27px "Manrope","Segoe UI",sans-serif; }
.detail-price-note { color: var(--muted); font-size: 11px; }
.spec-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin: 20px 0; }
.spec-item { padding: 12px; border: 1px solid var(--line); border-radius: 7px; }
.spec-item small { display: block; color: var(--muted); font-size: 10px; }
.spec-item strong { display: block; margin-top: 4px; font-size: 12px; }
.formula-list { display: grid; gap: 8px; margin: 18px 0; }
.formula-option { position: relative; display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: start; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; }
.formula-option:has(input:checked) { border-color: #97b27a; background: #f5f9ef; }
.formula-option input { margin-top: 3px; accent-color: var(--moss); }
.formula-option strong { display: block; font-size: 12px; }
.formula-option small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.formula-total { color: var(--amber); font-size: 11px; font-weight: 700; white-space: nowrap; }
.formula-selection-summary { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--sand); }
.formula-price-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; color: var(--muted); font-size: 12px; }
.formula-price-heading strong { color: var(--ink); font-size: 18px; }
.formula-price-lines { display: grid; gap: 6px; margin-top: 10px; }
.formula-price-line { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.formula-excluded { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.formula-total { display: block; max-width: 180px; white-space: normal; text-align: right; }
.form-card, .panel-card { padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.form-card h2, .panel-card h2 { margin: 0 0 7px; font: 700 18px "Manrope","Segoe UI",sans-serif; }
.form-card>p, .panel-card>p { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.field { min-width: 0; }
.field-full { grid-column: 1/-1; }
.field label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; }
.field label span { color: var(--muted); font-weight: 400; }
.field textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.field input[type=file] { padding: 8px; }
.field-hint { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.form-error { margin: 0 0 14px; color: var(--red); font-size: 12px; }
.form-success { padding: 17px; border-radius: 8px; background: var(--lime-2); color: #3e5b31; font-size: 13px; line-height: 1.6; }
.auth-layout { max-width: 540px; margin: 0 auto; }
.auth-tabs { display: flex; gap: 7px; margin-bottom: 16px; padding: 5px; border-radius: 8px; background: var(--sand); }
.auth-tabs button { flex: 1; min-height: 38px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.auth-tabs button.active { background: white; color: var(--forest); box-shadow: 0 1px 4px #00000012; }
.account-layout { display: grid; grid-template-columns: 232px 1fr; align-items: start; gap: 20px; }
.account-nav { position: sticky; top: 100px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.account-summary { display: flex; align-items: center; gap: 10px; padding: 9px 8px 15px; margin-bottom: 7px; border-bottom: 1px solid var(--line); }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--lime-2); color: var(--forest); font-weight: 800; }
.account-summary strong { display: block; max-width: 145px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-summary small { color: var(--muted); font-size: 10px; }
.account-nav button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 9px; border: 0; border-radius: 6px; background: transparent; color: #58655e; text-align: left; font-size: 12px; cursor: pointer; }
.account-nav button:hover, .account-nav button.active { background: #f0f4ec; color: var(--forest); font-weight: 700; }
.account-main { min-width: 0; }
.account-main .panel-card { margin-bottom: 14px; }
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 14px; }
.metric { padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.metric strong { display: block; font: 800 22px "Manrope","Segoe UI",sans-serif; }
.metric small { color: var(--muted); font-size: 11px; }
.table-list { display: grid; gap: 9px; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.list-row-main { min-width: 0; }
.list-row-main strong { display: block; font-size: 13px; }
.list-row-main small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.list-row-side { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; text-align: right; }
.quote-breakdown { display: grid; gap: 8px; margin: 15px 0; }
.quote-line { display: flex; justify-content: space-between; gap: 15px; color: #546159; font-size: 12px; }
.quote-line.total { padding-top: 11px; border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; font-weight: 800; }
.timeline { display: grid; gap: 0; margin-top: 17px; }
.timeline-item { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 11px; min-height: 76px; }
.timeline-item:before { content: ""; position: absolute; left: 8px; top: 18px; bottom: -4px; width: 1px; background: var(--line); }
.timeline-item:last-child:before { display: none; }
.timeline-dot { z-index: 1; width: 17px; height: 17px; margin-top: 2px; border: 4px solid var(--lime-2); border-radius: 50%; background: var(--moss); }
.timeline-item h4 { margin: 0; font-size: 12px; }
.timeline-item p { margin: 4px 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.timeline-item time { color: #819087; font-size: 10px; }
.destination-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.destination-card { padding: 18px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.destination-card h3 { margin: 0 0 7px; font: 700 14px "Manrope","Segoe UI",sans-serif; }
.destination-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.calculator-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; align-items: start; }
.calculator-result { padding: 20px; border-radius: 9px; background: var(--forest); color: white; }
.calculator-result h3 { margin: 0 0 12px; color: var(--lime); font-size: 14px; }
.calculator-result p { color: #cad5cc; font-size: 12px; line-height: 1.6; }
.search-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.search-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.search-shortcuts a { padding: 8px 10px; border-radius: 20px; background: #f0f4ec; color: #526748; font-size: 11px; font-weight: 600; }
.bottom-nav { display: none; }
.file-list { margin: 8px 0 0; padding: 0; list-style: none; }
.file-list li { margin-top: 6px; color: var(--muted); font-size: 11px; }
.hide { display: none !important; }
#toast { position: fixed; right: 20px; bottom: 20px; z-index: 100; max-width: min(430px, calc(100% - 30px)); padding: 13px 16px; transform: translateY(12px); opacity: 0; border-radius: 8px; background: var(--forest); color: white; box-shadow: var(--shadow); font-size: 13px; transition: .2s; pointer-events: none; }
#toast.show { transform: translateY(0); opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media(max-width:1080px) {
  .header-inner { gap: 16px; }
  .primary-nav { gap: 14px; }
  .primary-nav a { font-size: 12px; }
  .header-search { max-width: 200px; }
}
@media(max-width:840px) {
  .container { width: min(100% - 36px, 720px); }
  .header-inner { min-height: 67px; }
  .menu-toggle { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: white; font-size: 19px; cursor: pointer; }
  .primary-nav { display: none; position: absolute; left: 0; right: 0; top: 66px; padding: 16px 20px 20px; border-bottom: 1px solid var(--line); background: white; box-shadow: var(--shadow); }
  .primary-nav.open { display: grid; gap: 0; }
  .primary-nav a { padding: 12px 3px; border-bottom: 1px solid #eef0ec; font-size: 14px; }
  .header-search { margin-left: auto; }
  .hero-grid { grid-template-columns: 1fr .8fr; gap: 18px; }
  .hero-art { min-height: 330px; }
  .hero-art-card { min-height: 275px; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .catalog-layout { grid-template-columns: 210px 1fr; gap: 14px; }
  .filter-panel { padding: 13px; }
  .steps { grid-template-columns: repeat(2,1fr); }
  .step-card:nth-child(3) { border-left: 0; }
  .footer-main { grid-template-columns: 1.3fr repeat(2,1fr); }
}
@media(max-width:620px) {
  .container { width: calc(100% - 32px); }
  .topline { font-size: 10px; }
  .topline-inner { min-height: 31px; }
  .topline .secondary { display: none; }
  .header-inner { min-height: 61px; gap: 9px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-word { font-size: 15px; }
  .header-search { display: none; }
  .header-actions { gap: 6px; margin-left: auto; }
  .icon-link, .icon-button { min-width: 38px; height: 38px; }
  .icon-link .label { display: none; }
  .menu-toggle { width: 38px; height: 38px; }
  .primary-nav { top: 60px; }
  .hero { padding: 38px 0 35px; }
  .hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .hero h1 { max-width: 500px; font-size: clamp(37px, 11vw, 51px); letter-spacing: -1.9px; }
  .hero-copy { margin: 14px 0 19px; font-size: 14px; }
  .hero-search { padding: 5px; }
  .hero-search input { height: 43px; padding-left: 9px; font-size: 12px; }
  .hero-search button { padding-inline: 12px; font-size: 12px; }
  .hero-art { min-height: 260px; }
  .hero-art:before { width: 240px; right: 6%; }
  .hero-art-card { width: min(340px,90%); min-height: 235px; border-top-right-radius: 82px; }
  .art-badge { top: 14px; right: 0; max-width: 150px; padding: 11px 12px; font-size: 10px; }
  .art-badge strong { font-size: 12px; }
  .section { padding: 48px 0; }
  .section-head { align-items: start; }
  .section-head h2 { font-size: 25px; }
  .section-head p { font-size: 13px; }
  .catalog-cards { grid-template-columns: 1fr; gap: 10px; }
  .catalog-card { min-height: 135px; padding: 18px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step-card { min-height: 150px; padding: 17px 12px; }
  .step-card:nth-child(odd) { border-left: 0; }
  .step-card:nth-child(even) { border-left: 1px solid var(--line); }
  .step-card h3 { font-size: 13px; }
  .trust-grid { grid-template-columns: 1fr; gap: 9px; }
  .trust-card { padding: 17px; }
  .video-placeholder { min-height: 195px; }
  .cta-band { align-items: start; flex-direction: column; padding: 23px; }
  .cta-band h2 { font-size: 21px; }
  .footer { padding-top: 35px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .footer-about { grid-column: 1/-1; }
  .footer-bottom { flex-direction: column; font-size: 10px; }
  .page-hero { padding: 30px 0 26px; }
  .page-hero h1 { font-size: 32px; }
  .catalog-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; display: grid; grid-template-columns: repeat(2,1fr); gap: 0 11px; }
  .filter-title { grid-column: 1/-1; }
  .filter-group { margin-top: 9px; }
  .filter-group:last-child { grid-column: 1/-1; }
  .product-grid { gap: 9px; }
  .product-image { height: 135px; font-size: 38px; }
  .product-card-body { padding: 10px; }
  .product-card h3 { font-size: 13px; }
  .product-sub { min-height: 30px; font-size: 10px; }
  .status-pill { font-size: 9px; }
  .card-actions { gap: 5px; }
  .card-actions .button { padding-inline: 8px; font-size: 10px; }
  .card-actions .button:last-child { min-width: 36px; }
  .result-bar { align-items: start; flex-direction: column; }
  .result-bar select { width: 100%; }
  .detail-layout { grid-template-columns: 1fr; gap: 20px; }
  .detail-image-large, .detail-image-large img { min-height: 245px; }
  .detail-info h1 { font-size: 30px; }
  .form-card, .panel-card { padding: 17px; }
  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .field-full { grid-column: auto; }
  .auth-layout { width: 100%; }
  .account-layout { grid-template-columns: 1fr; gap: 12px; }
  .account-nav { position: static; overflow-x: auto; display: flex; gap: 4px; padding: 7px; white-space: nowrap; }
  .account-summary { display: none; }
  .account-nav button { width: auto; flex: 0 0 auto; padding: 10px; }
  .account-nav button span:nth-child(2) { display: none; }
  .metric-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .metric { padding: 13px; }
  .metric strong { font-size: 19px; }
  .list-row { align-items: start; padding: 11px; }
  .list-row-side { flex-direction: column; align-items: end; gap: 7px; }
  .destination-cards, .search-feature, .calculator-grid { grid-template-columns: 1fr; }
  .bottom-nav { position: fixed; z-index: 29; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5,1fr); padding: 6px 4px max(6px,env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255,255,255,.97); backdrop-filter: blur(10px); }
  .bottom-nav a { display: grid; justify-items: center; gap: 3px; padding: 4px 0; color: #67756d; font-size: 9px; }
  .bottom-nav a.active { color: var(--forest); font-weight: 700; }
  .bottom-nav a span:first-child { font-size: 17px; }
  body { padding-bottom: 59px; }
  #toast { bottom: 75px; right: 12px; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-17 { margin-top: 17px; }
.mt-18 { margin-top: 18px; }
.mt-40 { margin-top: 40px; }
.filter-apply-button { width: 100%; margin-top: 15px; }
.request-container { max-width: 850px; }
.quote-card { display: block; }
.cart-layout, .tracking-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; align-items: start; gap: 20px; }
.cart-items { display: grid; gap: 12px; }
.cart-item { display: grid; grid-template-columns: 100px minmax(0,1fr) 150px; gap: 16px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.cart-thumb { width: 100px; aspect-ratio: 1.2; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: var(--sand); color: var(--moss); font-size: 30px; }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-main { display: grid; gap: 7px; min-width: 0; }
.cart-item-title { font-weight: 800; }
.cart-item-main small, .cart-item-price small { color: var(--muted); font-size: 11px; }
.cart-quantity, .cart-formula { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.cart-quantity input { width: 76px; }
.cart-formula select { max-width: 100%; min-height: 34px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; font-size: 11px; }
.cart-item-price { display: grid; justify-items: end; gap: 7px; text-align: right; }
.cart-item-price strong { font-size: 15px; }
.text-button { padding: 3px 0; border: 0; background: none; color: var(--red); font-size: 11px; cursor: pointer; }
.summary-card { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.summary-card h2 { margin: 0; font: 800 21px "Manrope","Segoe UI",sans-serif; }
.summary-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.summary-card .button { width: 100%; }
.button-disabled { opacity: .55; cursor: not-allowed; }
.tracking-layout main { min-width: 0; }
.tracking-layout .panel-card { margin-bottom: 14px; }
.info-page { display: grid; gap: 34px; }
.info-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.info-card { display: flex; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.info-mark { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--lime-2); color: var(--forest); font-weight: 800; }
.info-card h2 { margin: 1px 0 7px; font: 750 15px "Manrope","Segoe UI",sans-serif; }
.info-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.detail-video { width: 100%; height: auto; max-height: 600px; background: #18221d; }
.detail-image-large { display: grid; gap: 8px; }
.detail-image-large img { max-height: 620px; }
.feature-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 22px; padding-left: 19px; color: var(--muted); font-size: 12px; }
.compatibility-list { display: grid; gap: 8px; }
.compatibility-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
.compatibility-row small { grid-column: 1 / -1; color: var(--muted); }
@media(max-width:820px) { .cart-layout,.tracking-layout { grid-template-columns: 1fr; } .summary-card { order: -1; } }
@media(max-width:600px) { .cart-item { grid-template-columns: 76px minmax(0,1fr); gap: 10px; padding: 10px; } .cart-thumb { width: 76px; } .cart-item-price { grid-column: 2; justify-items: start; text-align: left; } .cart-formula { align-items: start; flex-direction: column; } .info-grid { grid-template-columns: 1fr; } .feature-list { grid-template-columns: 1fr; } }

/* Monsieur Bécane's client storefront: asphalt, warm paper and the red earth of the road. */
:root {
  --forest: #1b1b19;
  --forest-2: #30302c;
  --moss: #b84a27;
  --lime: #e7a53b;
  --lime-2: #f8ead3;
  --sand: #eee9df;
  --paper: #faf8f3;
  --ink: #211f1b;
  --muted: #716b61;
  --line: #e4ddd1;
  --amber: #9a651d;
  --amber-bg: #fbf1dc;
  --red: #a43d29;
  --red-bg: #f7e7e2;
  --shadow: 0 20px 55px rgba(38, 29, 20, .12);
  font-family: "DM Sans", "Segoe UI", sans-serif;
}
::selection { background: #e7a53b; color: #1b1b19; }
:focus-visible { outline: 3px solid #d88136; outline-offset: 3px; }
body { background: var(--paper); }
.topline { color: #ded8cd; background: #201f1c; border-bottom: 2px solid #be502b; font-size: 11px; }
.topline-inner { min-height: 34px; }
.topline strong { color: #e7a53b; letter-spacing: .11em; }
.topline a { color: #fff8ed; }
.header { background: rgba(250,248,243,.96); border-bottom: 1px solid #dcd3c5; }
.header-inner { min-height: 76px; gap: clamp(12px,2vw,28px); }
.brand { gap: 11px; }
.brand-mark { width: 40px; height: 40px; border-radius: 50% 50% 50% 12px; color: #f4bf62; background: #211f1b; box-shadow: inset 0 0 0 1px #ffffff25; }
.brand-word { color: #211f1b; font-size: 18px; letter-spacing: -.8px; }
.brand-word small { color: #a74729; font-size: 8px; letter-spacing: 1.35px; }
.primary-nav { gap: clamp(10px,1.7vw,21px); }
.primary-nav a { color: #4f4a43; font-size: 12px; font-weight: 700; }
.primary-nav a:hover, .footer a:hover { color: #bd4e2a; }
.header-search input { border-color: #ddd5c8; border-radius: 3px; background: #fffdf9; }
.header-search button { border-radius: 2px; background: #b84a27; }
.icon-link, .icon-button { border-color: #ddd5c8; border-radius: 3px; }
.cart-count { background: #f4dba8; }
.menu-toggle { border-radius: 3px; }
.button { border-radius: 3px; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
.button:hover { background: #30302c; box-shadow: 0 8px 19px #231d1722; }
.button-light { background: #e7a53b; color: #211f1b; }
.button-light:hover { background: #f0ba5c; color: #211f1b; }
.button-outline { border-color: #d7cebf; border-radius: 3px; }
.button-quiet { border-radius: 3px; }

body.is-home { background: #f5f1e9; }
body.is-home .hero { padding: 0; overflow: hidden; color: #f8f4ec; background: #1b1b19; }
body.is-home .hero-grid { width: min(1500px,100%); min-height: 640px; grid-template-columns: minmax(420px,.91fr) minmax(0,1.09fr); gap: 0; align-items: stretch; }
.hero-copy-panel { min-width: 0; min-height: 640px; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(44px,6.2vw,92px) clamp(28px,5.5vw,82px); isolation: isolate; }
.hero-copy-panel::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .32; background: radial-gradient(ellipse at 0 100%,#553520 0,transparent 47%), repeating-linear-gradient(134deg,transparent 0 56px,#ffffff08 57px,#ffffff08 58px,transparent 59px 116px); pointer-events: none; }
.hero-copy-panel .eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; color: #edb45b; font-size: 10px; letter-spacing: 1.55px; }
.hero-kicker-mark { width: 32px; height: 32px; display: inline-grid; flex: 0 0 32px; place-items: center; border: 1px solid #e6a94788; border-radius: 50% 50% 50% 8px; color: #f3bd61; font-size: 9px; letter-spacing: -1px; transform: rotate(-8deg); }
body.is-home .hero h1 { max-width: 590px; margin: 0; color: #fffaf2; font: 800 clamp(45px,5vw,70px)/.99 "Arial Narrow","Aptos Narrow",Impact,"Segoe UI",sans-serif; letter-spacing: -2.4px; text-wrap: balance; }
body.is-home .hero-copy { max-width: 500px; margin: 22px 0 24px; color: #cec7ba; font-size: 14px; line-height: 1.75; }
.hero-search { max-width: 510px; gap: 6px; padding: 6px; border: 1px solid #e7e0d4; border-left: 4px solid #c6562d; border-radius: 3px; box-shadow: 0 15px 40px #0003; }
.hero-search input { height: 46px; padding-left: 12px; font-size: 13px; }
.hero-search input::placeholder { color: #8a8378; }
.hero-search button { border-radius: 2px; background: #bd4e2a; color: white; font-size: 12px; font-weight: 800; }
.hero-search button:hover { background: #9f3e20; }
.hero-links { gap: 9px; margin-top: 14px; }
body.is-home .hero .button { min-height: 43px; padding-inline: 14px; font-size: 11px; }
body.is-home .hero .button-outline { border-color: #ffffff44; background: transparent; color: #fff8eb; }
body.is-home .hero .button-outline:hover { border-color: #e7a53b; background: #e7a53b; color: #211f1b; }
body.is-home .trust-note { margin-top: 19px; color: #cfc6b7; font-size: 11px; }
.trust-check { width: 22px; height: 22px; border-radius: 50%; color: #1b1b19; background: #e7a53b; font-size: 11px; }
.hero-art { min-width: 0; min-height: 640px; position: relative; display: block; overflow: hidden; }
.hero-art::before { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg,#1b1b19 0%,#1b1b1917 22%,transparent 52%),linear-gradient(0deg,#1b1b1999,transparent 34%); pointer-events: none; }
.hero-art-card { width: 100%; height: 100%; min-height: 640px; position: absolute; inset: 0; display: block; overflow: hidden; padding: 0; border: 0; border-radius: 0; background: #54402d; box-shadow: none; }
.hero-art-card::before { content: ""; position: absolute; z-index: 1; inset: 18px; border: 1px solid #fff9; opacity: .38; pointer-events: none; }
.hero-art-card::after { content: ""; position: absolute; z-index: 1; top: 50%; left: 32px; width: 54px; height: 1px; background: #f1b950; box-shadow: 0 0 14px #f1b950; }
.hero-photo { width: 100%; height: 100%; position: absolute; inset: 0; display: block; object-fit: cover; object-position: 65% center; }
.art-caption { max-width: 220px; position: absolute; z-index: 3; bottom: 47px; left: 48px; padding-left: 12px; border-left: 3px solid #e7a53b; color: #fff7e9; font-size: 10px; line-height: 1.55; letter-spacing: 1.25px; text-shadow: 0 2px 9px #17130e; }
.art-index { position: absolute; z-index: 3; top: 42px; right: 45px; padding: 9px 12px; border: 1px solid #fff9; color: white; font-size: 9px; font-weight: 800; letter-spacing: 1.6px; }
.art-index i { margin-inline: 4px; color: #f1b950; font-style: normal; }
.art-badge { z-index: 4; top: auto; right: 26px; bottom: 44px; max-width: 205px; padding: 16px 18px; border: 1px solid #ffffff70; border-radius: 2px; background: #f8f2e8; box-shadow: 0 16px 40px #0004; font-size: 11px; }
.art-badge-label { display: block; margin-bottom: 8px; color: #a84728; font-size: 8px; font-weight: 800; letter-spacing: 1.45px; }
.art-badge strong { display: block; margin-bottom: 5px; color: #211f1b; font: 800 19px/1.1 "Arial Narrow","Aptos Narrow",Impact,sans-serif; }
.art-badge { color: #6c6459; line-height: 1.45; }
.art-coordinate { position: absolute; z-index: 3; top: 50%; right: 16px; color: #fff9; font-size: 8px; font-weight: 800; letter-spacing: 1.65px; writing-mode: vertical-rl; transform: translateY(-50%); }

.section { padding: clamp(52px,7vw,88px) 0; }
.section-head { align-items: end; margin-bottom: 27px; }
.section-head h2 { max-width: 720px; color: #24211c; font: 800 clamp(29px,3.7vw,45px)/.99 "Arial Narrow","Aptos Narrow",Impact,"Segoe UI",sans-serif; letter-spacing: -.9px; text-wrap: balance; }
.section-head p { max-width: 620px; font-size: 13px; line-height: 1.7; }
.eyebrow { color: #af4a2b; font-size: 9px; letter-spacing: 1.7px; }
.text-link { color: #a74527; font-size: 11px; }
.home-catalog-section { background: #f6f2e9; border: 0; }
.home-catalog-section .section-head { margin-bottom: 34px; }
.home-catalog-section .section-head > div { max-width: 770px; }
.home-catalog-section .section-head h2 { max-width: 620px; }
.home-catalog-section .section-head p:last-child { margin-top: 12px; }
.catalog-cards { gap: 12px; }
.catalog-card { min-height: 285px; position: relative; justify-content: end; gap: 0; overflow: hidden; padding: 23px; border: 1px solid #ded4c5; border-radius: 2px; background: #272622; color: #fff8ec; transition: transform .24s ease,box-shadow .24s ease; }
.catalog-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .25; background: repeating-linear-gradient(135deg,transparent 0 24px,#ffffff12 25px,#ffffff12 26px,transparent 27px 52px); }
.catalog-card:hover { transform: translateY(-5px); border-color: #bd4e2a; box-shadow: 0 20px 44px #2c211522; }
.catalog-card:nth-child(1) { background: linear-gradient(145deg,#282622,#171716); color: #fff8ec; }
.catalog-card:nth-child(2) { background: #e5ddcf; color: #26231e; }
.catalog-card:nth-child(3) { background: linear-gradient(150deg,#c45a31,#9b3f25); color: #fff8ec; }
.catalog-index { position: absolute; z-index: 2; top: 20px; left: 22px; color: #efbd69; font-size: 9px; font-weight: 800; letter-spacing: 1.6px; }
.catalog-index i { color: #ffffff70; font-style: normal; }
.catalog-card:nth-child(2) .catalog-index { color: #a94727; }
.catalog-card:nth-child(2) .catalog-index i { color: #8e8375; }
.catalog-icon { z-index: 2; top: 15px; right: 15px; width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #ffffff75; border-radius: 50%; font-size: 14px; }
.catalog-card:nth-child(2) .catalog-icon { border-color: #a99c8a; }
.catalog-art { position: absolute; z-index: 1; top: 54px; right: 18px; color: #fff; opacity: .16; font: 900 clamp(46px,7vw,90px)/.79 "Arial Narrow","Aptos Narrow",Impact,sans-serif; letter-spacing: -5px; text-align: right; user-select: none; }
.catalog-art span { display: block; font: 800 12px/1 "DM Sans","Segoe UI",sans-serif; letter-spacing: 4px; }
.catalog-art-bike { transform: skew(-10deg); }
.catalog-art-parts { top: 54px; font-size: 104px; color: #9d4a2b; opacity: .2; }
.catalog-art-gear { font-size: 51px; letter-spacing: -1px; }
.catalog-card h3 { position: relative; z-index: 2; margin: 0 0 7px; color: inherit; font: 800 23px/1 "Arial Narrow","Aptos Narrow",Impact,"Segoe UI",sans-serif; letter-spacing: -.2px; }
.catalog-card p { position: relative; z-index: 2; max-width: 270px; min-height: 40px; margin: 0; color: inherit; opacity: .75; font-size: 11px; line-height: 1.6; }
.catalog-arrow { position: relative; z-index: 2; right: auto; bottom: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 17px; padding-top: 12px; border-top: 1px solid #ffffff55; color: inherit; font-size: 16px; }
.catalog-arrow i { font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; }
.catalog-card:nth-child(2) .catalog-arrow { border-color: #261e173d; }
.journey-section { overflow: hidden; background: #eae4d9; }
.journey-section .section-head h2 { max-width: 600px; }
.steps { position: relative; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; }
.steps::before { content: ""; position: absolute; top: 12px; left: 10px; right: 12%; border-top: 1px dashed #b9a994; }
.step-card { min-height: 174px; position: relative; padding: 36px 20px 20px; border-left: 1px solid #cfc4b3; }
.step-card:first-child { border-left: 0; }
.step-number { position: absolute; top: 0; left: 20px; z-index: 1; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #ba4b2a; border-radius: 50%; background: #eae4d9; color: #a94325; font: 800 8px/1 "DM Sans",sans-serif; letter-spacing: 0; }
.step-card h3 { margin: 4px 0 8px; color: #27231e; font: 800 18px/1 "Arial Narrow","Aptos Narrow",Impact,sans-serif; }
.step-card p { color: #716a60; font-size: 11px; line-height: 1.7; }
.home-products-section { background: #fbf9f4; }
.home-products-section .product-card,.product-card { border-color: #e4ddd1; border-radius: 3px; box-shadow: 0 5px 18px #3626170a; }
.product-card:hover { border-color: #c15b34; box-shadow: 0 18px 35px #36261716; }
.product-image { background: #e9e1d3; color: #a74a2a; }
.product-card h3 { font-size: 16px; }
.product-price strong { color: #211f1b; }
.product-price { border-color: #e9e2d7; }
.route-story-section { padding-block: 0; color: white; background: #1c1c1a; }
.route-story { min-height: 420px; display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); align-items: center; gap: clamp(32px,7vw,100px); padding-block: 72px; }
.route-story-copy .eyebrow { color: #e7a53b; }
.route-story-copy h2 { margin: 0; color: #fff9ef; font: 800 clamp(42px,5.5vw,68px)/.94 "Arial Narrow","Aptos Narrow",Impact,sans-serif; letter-spacing: -1px; }
.route-story-copy > p:not(.eyebrow) { max-width: 440px; margin: 19px 0 22px; color: #cdc5b8; font-size: 13px; line-height: 1.8; }
.route-story-copy .button { min-height: 42px; }
.route-story-copy small { display: block; max-width: 380px; margin-top: 13px; color: #a49b8e; font-size: 10px; line-height: 1.6; }
.route-graphic { min-width: 0; padding: 21px 22px 16px; border: 1px solid #ffffff2b; background: repeating-linear-gradient(0deg,transparent 0 37px,#ffffff08 38px,#ffffff08 39px),repeating-linear-gradient(90deg,transparent 0 37px,#ffffff08 38px,#ffffff08 39px); }
.route-graphic-top,.route-graphic-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #d2c8ba; font-size: 8px; font-weight: 800; letter-spacing: 1.65px; }
.route-graphic-top b { color: #e7a53b; font-size: 14px; }
.route-graphic svg { width: 100%; height: auto; overflow: visible; margin-block: 10px 5px; }
.route-path-shadow { fill: none; stroke: #e7a53b33; stroke-width: 12; stroke-linecap: round; }
.route-path { fill: none; stroke: #edb85e; stroke-width: 2; stroke-dasharray: 7 9; stroke-linecap: round; }
.route-point { fill: #1c1c1a; stroke: #e7a53b; stroke-width: 3; }
.route-point-end { fill: #bd4e2a; stroke: #ffe1a9; }
.route-graphic text { fill: #d2c8ba; font: 800 9px "DM Sans","Segoe UI",sans-serif; letter-spacing: 1px; }
.route-graphic-bottom { color: #a99f91; font-size: 8px; font-weight: 500; letter-spacing: .3px; }
.route-stamp { padding: 7px 9px; border: 1px solid #e7a53b88; color: #edb85e; font-weight: 800; letter-spacing: 1.2px; transform: rotate(-4deg); }
.assurance-section { background: #f3eee5; border-block: 1px solid #e2d9ca; }
.trust-grid { gap: 0; border-block: 1px solid #d8cebf; }
.trust-card { min-height: 165px; padding: 22px 23px; border: 0; border-right: 1px solid #d8cebf; border-radius: 0; background: transparent; }
.trust-card:last-child { border-right: 0; }
.trust-icon { width: auto; height: auto; display: block; margin-bottom: 18px; border: 0; border-radius: 0; background: none; color: #b94e2c; font: 800 10px "DM Sans",sans-serif; letter-spacing: 1px; }
.trust-card h3 { margin: 0 0 8px; color: #28241f; font: 800 18px/1 "Arial Narrow","Aptos Narrow",Impact,sans-serif; }
.trust-card p { color: #716a60; font-size: 11px; line-height: 1.75; }
.final-cta-section { padding-top: 35px; padding-bottom: 70px; background: #f5f1e9; }
.cta-band { position: relative; overflow: hidden; padding: clamp(26px,4vw,48px); border: 0; border-radius: 2px; background: #b84a27; color: white; }
.cta-band::after { content: "MR"; position: absolute; top: -32px; right: 160px; color: #ffffff12; font: 900 180px/1 "Arial Narrow",Impact,sans-serif; letter-spacing: -18px; pointer-events: none; }
.cta-band > div,.cta-band > a { position: relative; z-index: 1; }
.cta-band .eyebrow { margin-bottom: 8px; color: #f7c475; }
.cta-band h2 { color: #fff9ef; font: 800 clamp(29px,4vw,43px)/1 "Arial Narrow","Aptos Narrow",Impact,sans-serif; letter-spacing: -.6px; }
.cta-band p { max-width: 560px; color: #f0d4c7; font-size: 12px; line-height: 1.7; }
.cta-band .button { min-width: 195px; min-height: 47px; background: #f7f1e5; color: #2a241e; }
.cta-band .button:hover { background: #e7a53b; }
.footer { padding: 48px 0 23px; border-top: 0; background: #1c1c1a; color: #f4eee4; }
.footer-about p,.footer-col a,.footer-bottom { color: #b9b1a4; }
.footer-col strong { color: #f2b95d; font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; }
.footer .brand-word { color: #fff8ec; }
.footer .brand-word small { color: #e7a53b; }
.footer .brand-mark { background: #bd4e2a; color: #fff5e2; }
.footer-bottom { border-color: #ffffff23; }
.bottom-nav { border-color: #d8cebf; background: rgba(250,248,243,.98); }
.bottom-nav a.active { color: #b84a27; }
.bottom-nav a span:first-child { color: #b84a27; }
.page-hero { padding-block: 47px 39px; background: #eae4d9; border-bottom: 1px solid #d8cebf; }
.page-hero h1 { color: #24211c; font: 800 clamp(33px,4vw,48px)/.98 "Arial Narrow","Aptos Narrow",Impact,sans-serif; letter-spacing: -.8px; }
.filter-panel,.form-card,.panel-card,.summary-card,.account-nav { border-color: #e1d8ca; border-radius: 3px; box-shadow: 0 8px 28px #3626170b; }
.filter-field,.field input,.field select,.field textarea,.result-bar select { border-color: #ddd4c7; border-radius: 3px; }
.account-nav button:hover,.account-nav button.active { background: #f8ead3; color: #a54628; }
.account-nav button { border-radius: 3px; }
.product-card,.cart-item,.list-row,.info-card,.compatibility-row { border-radius: 3px; }
.status-pill { border-radius: 2px; }

@media(max-width:1080px) {
  .header-inner { gap: 13px; }
  .primary-nav { gap: 10px; }
  .primary-nav a { font-size: 11px; }
  .brand-word small { letter-spacing: .8px; }
  body.is-home .hero-grid { grid-template-columns: minmax(370px,.94fr) minmax(0,1.06fr); min-height: 570px; }
  .hero-copy-panel,.hero-art,.hero-art-card { min-height: 570px; }
}
@media(max-width:840px) {
  .topline-inner { min-height: 31px; }
  .header-inner { min-height: 67px; }
  .brand-word { font-size: 16px; }
  .primary-nav { top: 66px; }
  .primary-nav a { font-size: 13px; }
  .header-search { max-width: 170px; }
  body.is-home .hero-grid { grid-template-columns: minmax(340px,.98fr) minmax(0,1.02fr); min-height: 550px; }
  .hero-copy-panel,.hero-art,.hero-art-card { min-height: 550px; }
  .hero-copy-panel { padding-inline: 32px; }
  body.is-home .hero h1 { font-size: clamp(43px,6.3vw,58px); }
  .hero-art::before { background: linear-gradient(90deg,#1b1b19 0%,#1b1b1922 25%,transparent 60%),linear-gradient(0deg,#1b1b1999,transparent 35%); }
  .catalog-card { min-height: 260px; padding: 18px; }
  .catalog-card h3 { font-size: 20px; }
  .catalog-card p { font-size: 10px; }
  .route-story { gap: 32px; }
}
@media(max-width:760px) {
  body.is-home .hero-grid { width: 100%; min-height: 0; grid-template-columns: 1fr; }
  .hero-copy-panel { min-height: 0; padding: 52px max(24px,calc((100vw - 620px)/2)) 38px; }
  body.is-home .hero h1 { max-width: 650px; font-size: clamp(47px,9vw,70px); }
  body.is-home .hero-copy { max-width: 590px; }
  .hero-art,.hero-art-card { min-height: clamp(330px,63vw,490px); }
  .hero-photo { object-position: 67% center; }
  .hero-art::before { background: linear-gradient(0deg,#1b1b19a8,transparent 38%),linear-gradient(90deg,#1b1b191a,transparent 50%); }
  .hero-art-card::before { inset: 13px; }
  .art-caption { left: 28px; bottom: 28px; }
  .art-index { top: 28px; right: 28px; }
  .art-badge { right: 27px; bottom: 26px; max-width: 190px; }
  .art-coordinate { right: 12px; }
  .catalog-cards { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .catalog-card { min-height: 250px; padding: 15px; }
  .catalog-index { top: 16px; left: 14px; font-size: 8px; }
  .catalog-icon { top: 12px; right: 11px; width: 26px; height: 26px; }
  .catalog-art { top: 53px; right: 12px; font-size: 60px; }
  .catalog-art-parts { font-size: 74px; }
  .catalog-art-gear { font-size: 39px; }
  .catalog-card h3 { font-size: 18px; }
  .catalog-card p { min-height: 58px; }
  .route-story { grid-template-columns: 1fr; gap: 35px; }
  .route-story-copy h2 { font-size: clamp(44px,8vw,63px); }
}
@media(max-width:600px) {
  .topline-inner { font-size: 9px; }
  .topline-inner .secondary { display: none; }
  .header-inner { gap: 8px; }
  .brand { gap: 7px; }
  .brand-mark { width: 35px; height: 35px; }
  .brand-word { font-size: 15px; }
  .brand-word small { font-size: 7px; letter-spacing: .55px; }
  .header-actions .icon-link { min-width: 37px; height: 37px; padding-inline: 5px; }
  .header-actions .icon-link .label { display: none; }
  .header-actions { gap: 5px; }
  .primary-nav { top: 60px; }
  .hero-copy-panel { padding: 39px 22px 31px; }
  body.is-home .hero h1 { font-size: clamp(43px,12vw,60px); letter-spacing: -1.7px; }
  .hero-copy-panel .eyebrow { margin-bottom: 17px; font-size: 8px; letter-spacing: 1.05px; }
  body.is-home .hero-copy { margin-block: 17px 20px; font-size: 12px; }
  .hero-search { padding: 4px; }
  .hero-search input { height: 43px; font-size: 11px; }
  .hero-search button { padding-inline: 10px; font-size: 10px; }
  .hero-links { gap: 7px; }
  body.is-home .hero .button { min-height: 39px; padding-inline: 10px; font-size: 9px; }
  .hero-art,.hero-art-card { min-height: 335px; }
  .art-caption { max-width: 160px; bottom: 22px; left: 22px; font-size: 8px; }
  .art-badge { right: 21px; bottom: 20px; max-width: 158px; padding: 11px 12px; font-size: 9px; }
  .art-badge strong { font-size: 16px; }
  .art-badge-label { font-size: 7px; }
  .art-index { top: 23px; right: 22px; padding: 7px 9px; font-size: 7px; }
  .art-coordinate { font-size: 7px; }
  .section { padding-block: 49px; }
  .section-head { align-items: start; flex-direction: column; gap: 10px; margin-bottom: 21px; }
  .section-head h2 { font-size: clamp(29px,8vw,39px); }
  .home-catalog-section .section-head h2 { max-width: 400px; }
  .catalog-cards { grid-template-columns: 1fr; gap: 9px; }
  .catalog-card { min-height: 215px; padding: 19px; }
  .catalog-card h3 { font-size: 22px; }
  .catalog-card p { max-width: 260px; min-height: 0; font-size: 11px; }
  .catalog-art { top: 42px; right: 21px; font-size: 68px; }
  .catalog-art-parts { font-size: 80px; }
  .catalog-art-gear { font-size: 45px; }
  .steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 0; }
  .steps::before { display: none; }
  .step-card { min-height: 146px; padding: 32px 13px 12px 15px; border-left: 1px solid #cfc4b3; }
  .step-card:nth-child(odd) { border-left: 0; }
  .step-number { left: 15px; }
  .step-card h3 { font-size: 16px; }
  .step-card p { font-size: 10px; }
  .route-story { padding-block: 50px; }
  .route-graphic { padding: 14px 12px 11px; }
  .route-graphic text { font-size: 8px; letter-spacing: .5px; }
  .route-graphic-bottom { align-items: start; font-size: 7px; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-card { min-height: 0; padding: 20px 4px; border-right: 0; border-bottom: 1px solid #d8cebf; }
  .trust-card:last-child { border-bottom: 0; }
  .trust-icon { margin-bottom: 9px; }
  .trust-card h3 { font-size: 17px; }
  .final-cta-section { padding-top: 15px; padding-bottom: 49px; }
  .cta-band { align-items: start; flex-direction: column; padding: 25px 20px; }
  .cta-band::after { right: 5px; font-size: 120px; }
  .cta-band .button { min-width: 175px; }
}


/* Searchable motorcycle make and model directory */
.directory-shortcut{padding:19px 0;background:#eee7dc;border-block:1px solid #e1d8ca}
.directory-shortcut>.container{display:flex;align-items:center;justify-content:space-between;gap:18px}
.directory-shortcut strong{display:block;color:#27241e;font-size:14px}
.directory-shortcut p{margin:5px 0 0;color:#726c62;font-size:12px;line-height:1.5}
.directory-shortcut .button{white-space:nowrap}
.model-directory-section{padding-top:34px}
.model-directory-tools{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:15px;max-width:900px;margin:0 0 24px;padding:17px;border:1px solid var(--line);background:white}
.model-directory-tools .field{margin:0}
.model-directory-tools .field label{display:block;margin:0 0 7px;font-size:11px;font-weight:700;color:#4d574f}
.model-directory-tools input,.model-directory-tools select{width:100%;height:44px;padding:0 12px;border:1px solid #ddd4c7;border-radius:3px;background:#fffdf9;color:var(--ink)}
.model-brand-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.model-brand-card{padding:18px;border:1px solid #e1d8ca;background:#fffdf8;box-shadow:0 8px 28px #36261708}
.model-brand-card h2{margin:0 0 13px;padding-bottom:10px;border-bottom:1px solid #ece3d7;color:#a94b2d;font:800 17px/1.2 "Manrope","Segoe UI",sans-serif}
.model-name-list{display:flex;flex-wrap:wrap;gap:7px}
.model-name-list span{display:inline-flex;align-items:center;min-height:31px;padding:6px 9px;border:1px solid #e8e0d4;background:#f7f2e9;color:#33332d;font-size:11px;line-height:1.35}
.directory-note{max-width:820px;margin:22px 0 0;color:#777166;font-size:11px;line-height:1.65}
.empty-directory{grid-column:1/-1;padding:28px;border:1px dashed #d7cbbb;color:#716b61;text-align:center;background:#fffdf8}
@media(max-width:760px){.directory-shortcut>.container{align-items:flex-start;flex-direction:column}.model-brand-grid{grid-template-columns:1fr}.model-directory-tools{grid-template-columns:1fr;margin-bottom:17px;padding:13px}.model-brand-card{padding:15px}}

/* Monsieur Bécane controls sourcing; customers choose product specifications only. */
.filter-field:disabled { background: #f3f0ea; color: #827b70; cursor: not-allowed; }


/* Manufacturer equipment and accessory directory */
.gear-directory-tools { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 980px; }
.gear-directory-tools .field { min-width: 0; }
.gear-brand-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.gear-brand-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid #ece3d7; }
.gear-brand-title h2 { margin:0; padding:0; border:0; }
.gear-brand-title>a { flex:none; color:#a94b2d; font-size:10px; font-weight:700; }
.gear-line-group { padding-top:9px; }
.gear-line-group h3 { margin:0 0 8px; color:#6b6256; font-size:10px; font-weight:800; letter-spacing:.55px; text-transform:uppercase; }
.gear-line-group .model-name-list a { display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:6px 9px; border:1px solid #e8e0d4; background:#f7f2e9; color:#33332d; font-size:10px; line-height:1.35; text-decoration:none; }
.gear-line-group .model-name-list a:hover { border-color:#bd4e2a; color:#a94325; }
.gear-line-group .model-name-list a span { color:#b84a27; font-size:9px; }
@media(max-width:760px){.gear-directory-tools,.gear-brand-grid{grid-template-columns:1fr}.gear-brand-title{align-items:flex-start}}

/* Sélection des cinq motos */
.selection-motos-section { padding-top: 38px; }
.selection-motos-intro { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 25px; padding:clamp(22px,4vw,38px); border:1px solid #ded4c5; background:linear-gradient(120deg,#fffdf8,#eee6d9); }
.selection-motos-intro .eyebrow { margin-bottom:10px; }
.selection-motos-intro h2 { margin:0 0 10px; color:#24211c; font:800 clamp(27px,3.5vw,40px)/1 "Arial Narrow","Aptos Narrow",Impact,sans-serif; letter-spacing:-.6px; }
.selection-motos-intro p:last-child { max-width:720px; margin:0; color:#716a60; font-size:13px; line-height:1.7; }
.selection-count { flex:0 0 auto; width:94px; height:94px; display:grid; align-content:center; justify-items:center; border:1px solid #bc542f; border-radius:50%; color:#a74527; }
.selection-count strong { font:800 31px/1 "Arial Narrow","Aptos Narrow",Impact,sans-serif; }
.selection-count small { margin-top:5px; font-size:8px; font-weight:800; letter-spacing:1.4px; }
.selection-motos-notice { margin-bottom:20px; }
.selection-motos-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.selection-moto-card { display:flex; flex-direction:column; }
.selection-moto-photo { position:relative; display:grid; place-items:center; overflow:hidden; aspect-ratio:16/10; padding:8px; background:linear-gradient(145deg,#eee9e0,#d9d1c5); }
.selection-moto-photo::after { content:""; position:absolute; inset:auto 0 0; height:30%; background:linear-gradient(transparent,#231d1710); pointer-events:none; }
.selection-moto-photo img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .35s ease; }
.selection-moto-card:hover .selection-moto-photo img { transform:scale(1.035); }
.selection-number { position:absolute; z-index:1; top:12px; left:12px; padding:7px 9px; background:#211f1bd9; color:#fff8ed; font-size:9px; font-weight:800; letter-spacing:1.3px; }
.selection-number i { margin-inline:3px; color:#e7a53b; font-style:normal; }
.selection-card-kicker { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.selection-year { color:#a74527; font-size:10px; font-weight:800; letter-spacing:1px; }
.selection-moto-card h2 { margin:12px 0 8px; color:#24211c; font:800 21px/1.1 "Arial Narrow","Aptos Narrow",Impact,sans-serif; }
.selection-condition { min-height:44px; margin:0; color:#5e554a; font-size:12px; line-height:1.55; }
.selection-condition span { color:#938778; }
.selection-specs { min-height:58px; margin:13px 0; color:#716a60; font-size:11px; line-height:1.65; }
.selection-moto-card .product-price { margin-top:auto; }
.selection-tech-link { margin:14px 0 12px; font-size:11px; }
.selection-quote-link { width:100%; justify-content:space-between; }
@media(max-width:1000px) { .selection-motos-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) { .selection-motos-section { padding-top:25px; } .selection-motos-grid { grid-template-columns:1fr; gap:14px; } .selection-motos-intro { align-items:flex-start; padding:21px; } .selection-count { width:70px; height:70px; } .selection-count strong { font-size:25px; } .selection-moto-card h2 { font-size:20px; } }


/* Keep the tablet header within the viewport instead of forcing page-wide horizontal scrolling. */
@media (min-width: 841px) and (max-width: 1280px) {
  .header-inner { gap: 12px; }
  .menu-toggle {
    display: inline-grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
  }
  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 24px;
    right: 24px;
    z-index: 31;
    margin: 0;
    padding: 12px 18px 18px;
    white-space: normal;
    border: 1px solid var(--line);
    background: white;
    box-shadow: var(--shadow);
  }
  .primary-nav.open { display: grid; gap: 0; }
  .primary-nav a {
    padding: 12px 3px;
    border-bottom: 1px solid #eef0ec;
    font-size: 13px;
  }
  .header-search { margin-left: auto; max-width: 200px; }
}


/* Common replacement-part suggestions linked to the selected motorcycle model. */
.part-finder-card {
  margin: 0 0 16px;
  padding: 19px;
  border: 1px solid #ded4c5;
  background: #fbf8f1;
}
.part-finder-card .eyebrow { margin: 0 0 7px; }
.part-finder-card h2 {
  margin: 0;
  color: #24211c;
  font: 800 clamp(22px,2.5vw,30px)/1.05 "Arial Narrow","Aptos Narrow",Impact,sans-serif;
}
.part-finder-card > p:not(.eyebrow) { max-width: 680px; color: #716a60; font-size: 12px; line-height: 1.6; }
.common-part-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.common-part-link {
  min-width: min(190px,100%);
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #ddd4c7;
  background: #fffdf9;
  color: #28241f;
  font-size: 11px;
  font-weight: 700;
  transition: border-color .16s ease,transform .16s ease;
}
.common-part-link:hover { border-color: #bd4e2a; transform: translateY(-1px); }
.common-part-link small { color: #a74729; font-size: 9px; font-weight: 600; }
.part-finder-note,.part-finder-empty { margin-bottom: 0; color: #766e61; font-size: 10px; }
@media(max-width:600px) {
  .part-finder-card { padding: 15px; }
  .common-part-link { min-width: calc(50% - 4px); flex: 1 1 145px; }
}

.delivery-destination{display:grid;gap:6px;margin:14px 0 18px;color:var(--muted);font-size:12px;font-weight:600}.delivery-destination select{width:100%;min-height:42px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit}.formula-price-line{display:flex;justify-content:space-between;gap:12px;padding:5px 0}.formula-price-lines{margin-top:8px}.formula-excluded{margin:8px 0 0;color:var(--muted);font-size:11px;line-height:1.5}.formula-total{max-width:155px;text-align:right;white-space:normal}@media(max-width:600px){.formula-option{grid-template-columns:20px minmax(0,1fr)}.formula-total{grid-column:2;text-align:left}}