/* Order Desk — portable, cross-industry B2B + B2C storefront foundation. */
.brand-mark.has-logo { border: 0; border-radius: 0; background: transparent; }
.brand-mark.has-logo::before, .brand-mark.has-logo::after { display: none; }
.brand-mark.has-logo img { width: 100%; height: 100%; object-fit: contain; }
:root {
  --paper: #f8f7f1;
  --white: #fffefb;
  --ink: #252923;
  --muted: #62685d;
  --olive: #344536;
  --olive-dark: #223125;
  --lemon: #eaf1aa;
  --sage: #dbe1ce;
  --line: #d5d8cc;
  --soft: #eff0e7;
  --error: #9c3028;
  --radius: 12px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: 28px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { max-width: 100%; }
:focus-visible { outline: 3px solid #718242; outline-offset: 4px; }
::selection { background: var(--lemon); color: var(--ink); }
.container { width: min(1280px, calc(100% - 104px)); margin-inline: auto; }
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.nav-wrap { display: flex; gap: 30px; align-items: center; min-height: 94px; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; text-decoration: none; font-size: 22px; font-weight: 650; letter-spacing: -1px; }
.brand-mark { display: inline-flex; width: 29px; height: 29px; border: 1px solid var(--olive); border-radius: 50%; align-items: center; justify-content: center; position: relative; color: var(--olive); font-size: 0; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; background: var(--olive); }
.brand-mark::before { width: 14px; height: 1px; transform: rotate(-42deg); }
.brand-mark::after { width: 1px; height: 14px; transform: rotate(-42deg); }
.nav-links { display: flex; gap: 28px; align-items: center; margin-left: auto; }
.nav-links a { text-decoration: none; font-size: 13px; color: #4b5147; white-space: nowrap; padding-block: 10px; }
.nav-links a:hover { color: var(--ink); text-decoration: underline; }
.header-action { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); border-radius: 7px; padding: 10px 18px; font-size: 13px; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.header-action:hover { background: var(--ink); color: var(--white); }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; padding-block: 86px 94px; }
.eyebrow { font-size: 11px; line-height: 1.5; font-weight: 650; letter-spacing: 2.3px; text-transform: uppercase; color: var(--olive); margin: 0 0 22px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-family: var(--serif); font-size: clamp(56px, 5.3vw, 80px); line-height: 1.04; letter-spacing: -3.8px; font-weight: 400; margin-bottom: 26px; }
h1 em, h2 em { font-weight: 400; color: var(--olive); }
.intro { max-width: 470px; color: var(--muted); font-size: 16px; line-height: 1.85; margin-bottom: 30px; }
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.button { display: inline-flex; gap: 13px; align-items: center; justify-content: center; padding: 14px 23px; min-height: 50px; border: 1px solid transparent; border-radius: 7px; font-size: 13px; line-height: 1.4; font-weight: 550; text-decoration: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.button.primary { background: var(--olive); color: var(--white); border-color: var(--olive); }
.button.primary:hover { background: var(--olive-dark); border-color: var(--olive-dark); }
.button.secondary { background: transparent; border-color: #a9b19f; color: var(--ink); }
.button.secondary:hover { background: var(--soft); border-color: var(--olive); }
.button.light { background: var(--lemon); color: var(--olive-dark); border-color: var(--lemon); }
.button.light:hover { background: #f0f6c2; }
.button.small { min-height: 40px; padding: 9px 15px; font-size: 12px; }
.button.text-button { padding: 8px 0; min-height: 36px; border-radius: 0; border-bottom: 1px solid currentColor; }
.micro-copy { color: var(--muted); font-size: 11px; letter-spacing: .25px; margin: 19px 0 0; }
.hero-visual { min-height: 456px; overflow: hidden; position: relative; background: #e9ecdd; border-radius: 12px; border: 1px solid #dfe3d4; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.hero-visual::before { content: ""; position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(#c3c9b8 1px, transparent 1px), linear-gradient(90deg, #c3c9b8 1px, transparent 1px); background-size: 39px 39px; z-index: -2; }
.orbit-label { position: absolute; top: 29px; left: 29px; font-size: 10px; letter-spacing: 2.3px; text-transform: uppercase; color: var(--olive); }
.visual-orbit { width: 295px; height: 295px; border: 1px solid #a6b093; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; transform: rotate(-18deg); }
.visual-orbit::before { content: ""; position: absolute; width: 222px; height: 222px; border: 1px dashed #b8c1aa; border-radius: 50%; }
.visual-orbit::after { content: ""; position: absolute; width: 365px; height: 170px; border: 1px solid #b1baa3; border-radius: 50%; }
.orbit-center { width: 178px; height: 178px; background: var(--olive); color: var(--lemon); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 2; transform: rotate(18deg); font-family: var(--serif); font-size: 19px; line-height: 1.35; letter-spacing: -.5px; }
.orbit-center strong { font-size: 27px; font-weight: 400; }
.orbit-center .orbit-arrow { font: 30px/1 var(--sans); margin-top: 13px; }
.orbit-center small { font: 9px/1.4 var(--sans); letter-spacing: 2px; text-transform: uppercase; margin-top: 10px; }
.orbit-tag { position: absolute; z-index: 3; background: var(--white); border: 1px solid #c9d0bc; border-radius: 7px; padding: 12px 17px; color: var(--olive); font-size: 12px; line-height: 1.5; white-space: nowrap; box-shadow: 0 3px 0 #d5ddc8; transform: rotate(18deg); }
.orbit-tag strong { display: block; font-weight: 600; }
.orbit-tag small { font-size: 10px; color: var(--muted); }
.orbit-tag.one { top: 0; left: -17px; }
.orbit-tag.two { right: -38px; top: 136px; background: var(--lemon); }
.orbit-tag.three { bottom: -5px; left: -1px; }
.orbit-foot { position: absolute; left: 29px; right: 29px; bottom: 23px; display: flex; justify-content: space-between; gap: 10px; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: #5f6a53; }
.section { padding-block: 80px; border-top: 1px solid var(--line); }
.section-heading { margin-bottom: 37px; }
.section-heading .eyebrow { margin-bottom: 14px; }
h2 { font-family: var(--serif); font-size: clamp(34px, 3.4vw, 48px); font-weight: 400; line-height: 1.12; letter-spacing: -1.5px; margin-bottom: 15px; }
.section-heading > p:last-child { max-width: 620px; font-size: 14px; color: var(--muted); line-height: 1.8; margin-bottom: 0; }
.path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px; }
.path-card { padding: 35px 37px; border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; background: var(--white); }
.path-card.trade { background: var(--olive); color: var(--white); border-color: var(--olive); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 33px; }
.card-top .eyebrow { margin: 0; font-size: 10px; }
.path-icon { width: 38px; height: 38px; border: 1px solid #c4cbb8; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--olive); font-size: 19px; }
.trade .card-top .eyebrow, .trade .path-icon { color: var(--lemon); }
.trade .path-icon { border-color: #75816b; }
.path-card h3 { font: 400 34px/1.14 var(--serif); letter-spacing: -.8px; margin-bottom: 16px; }
.path-card > p { color: var(--muted); font-size: 14px; max-width: 400px; }
.path-card.trade > p { color: #d7dfd1; }
.feature-list { list-style: none; padding: 0; margin: 12px 0 28px; display: grid; gap: 11px; font-size: 13px; }
.feature-list li { padding-left: 21px; position: relative; }
.feature-list li::before { content: "✓"; position: absolute; left: 0; color: var(--olive); font-size: 11px; }
.trade .feature-list li::before { color: var(--lemon); }
.path-card .button { align-self: flex-start; margin-top: auto; }
.muted { background: var(--soft); }
.mode-tabs { display: inline-flex; gap: 4px; border: 1px solid #d0d5c4; padding: 4px; border-radius: 8px; background: #e7eadf; margin-bottom: 38px; }
.mode-tabs button { border: 0; border-radius: 5px; padding: 11px 24px; font-size: 12px; line-height: 1.4; color: #515b48; background: transparent; }
.mode-tabs button.active, .mode-tabs button[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px #26322212; }
.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.step { position: relative; border-top: 1px solid #bfc7b2; padding-top: 25px; }
.step-number { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid #b3bea5; border-radius: 50%; font-size: 11px; color: var(--olive); margin-bottom: 25px; background: #f5f6ed; }
.step h3 { font-size: 16px; line-height: 1.4; font-weight: 550; letter-spacing: -.2px; margin-bottom: 11px; }
.step p { font-size: 12px; line-height: 1.85; color: var(--muted); margin-bottom: 0; }
.channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
.channel-card { border-top: 1px solid var(--line); padding-top: 28px; }
.channel-icon { display: inline-flex; width: 44px; height: 44px; border-radius: 11px; background: #e9eddc; align-items: center; justify-content: center; color: var(--olive); font-size: 21px; margin-bottom: 20px; }
.channel-card h3 { font-size: 21px; line-height: 1.4; letter-spacing: -.5px; margin-bottom: 12px; font-weight: 550; }
.channel-card p { color: var(--muted); font-size: 14px; max-width: 470px; }
.channel-card ul { padding-left: 18px; font-size: 12px; line-height: 1.9; color: var(--muted); }
.order-section { background: #efefe6; }
.order-layout { display: grid; grid-template-columns: minmax(0, 1fr) 315px; gap: 37px; align-items: start; }
.order-form { min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; }
.form-block + .form-block { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.block-heading { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.block-heading h3 { font-size: 16px; font-weight: 550; margin-bottom: 0; letter-spacing: -.2px; }
.block-heading p, .block-heading span, .block-heading small { font-size: 11px; color: var(--muted); margin: 0; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { min-width: 0; }
.field + .field:not(.field-grid .field) { margin-top: 18px; }
.field.full { grid-column: 1 / -1; }
.field label, .field > span { display: block; margin-bottom: 7px; font-size: 12px; line-height: 1.5; font-weight: 550; }
.field label em { font-style: normal; font-weight: 400; color: var(--muted); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; border: 1px solid #cdd2c3; border-radius: 6px; padding: 11px 12px; background: var(--white); color: var(--ink); font-size: 13px; line-height: 1.5; min-height: 44px; }
input::placeholder, textarea::placeholder { color: #818779; opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: #9fa990; }
input:focus, select:focus, textarea:focus { border-color: var(--olive); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); }
textarea { resize: vertical; min-height: 114px; }
select { padding-right: 30px; }
.field small { display: block; color: var(--muted); font-size: 10px; line-height: 1.6; margin-top: 6px; }
.field label small { display: inline; margin: 0; font-weight: 400; }
.form-block > .field { margin-top: 18px; }
.form-block > .field + .field-grid { margin-top: 18px; }
.form-block > .micro-copy { margin: -8px 0 19px; }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 19px; margin-top: 16px; }
.text-button { border: 0; border-radius: 0; padding: 0; background: transparent; color: var(--olive); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.text-button:hover { color: var(--ink); }
.check-content .text-button { font-size: inherit; }
.item-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 36px; gap: 10px; align-items: end; margin-bottom: 12px; }
.item-row .field { margin: 0 !important; }
.item-row .qty-field { width: 100%; }
.remove-item { width: 36px; height: 44px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); font-size: 19px; display: flex; align-items: center; justify-content: center; }
.remove-item:hover { color: var(--error); border-color: var(--error); }
.inline-note { font-size: 11px; line-height: 1.7; color: var(--muted); margin: 16px 0 0; }
.check-row { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; font-size: 12px; line-height: 1.7; color: #535d4c; margin-block: 20px; }
.check-row input { flex-shrink: 0; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--olive); }
.check-content { min-width: 0; }
.check-content strong { display: block; font-weight: 550; color: var(--ink); }
.form-error { padding: 12px 14px; color: var(--error); background: #fff2ed; border: 1px solid #e6c2b9; border-radius: 6px; font-size: 12px; line-height: 1.7; margin-block: 18px; }
.form-success { padding: 12px 14px; color: var(--olive-dark); background: #eef3de; border: 1px solid #c6d5ae; border-radius: 6px; font-size: 12px; margin-block: 18px; }
.order-sidebar { position: sticky; top: 28px; padding: 28px; border: 1px solid #cbd2bf; background: #e4e9d9; border-radius: var(--radius); }
.sidebar-label { font-size: 9px; font-weight: 650; letter-spacing: 2px; text-transform: uppercase; color: var(--olive); margin-bottom: 21px; }
.order-sidebar h3 { font: 400 27px/1.2 var(--serif); letter-spacing: -.6px; margin-bottom: 23px; }
.summary-items { border-top: 1px solid #bec8b0; }
.summary-item { display: flex; gap: 14px; justify-content: space-between; font-size: 12px; padding-block: 15px; border-bottom: 1px solid #c6cfba; overflow-wrap: anywhere; }
.summary-item span:last-child { flex-shrink: 0; }
.summary-item strong { font-weight: 550; }
.summary-total { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; font-weight: 600; padding-top: 21px; }
.summary-total strong { font-size: 17px; line-height: 1.3; }
.summary-foot { color: #5d6853; font-size: 11px; line-height: 1.8; margin: 18px 0 0; }
.status-line { display: flex; gap: 8px; align-items: baseline; color: var(--olive); font-size: 10px; line-height: 1.7; margin-top: 24px; padding-top: 18px; border-top: 1px solid #bec8b0; }
.status-line::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; background: var(--olive); border-radius: 50%; }
.live-dot { display: inline-block; width: 6px; height: 6px; vertical-align: 1px; border-radius: 50%; background: var(--olive); margin-right: 5px; }
.status-line .live-dot { display: none; }
.order-sidebar > .status-line { margin: -9px 0 21px; padding: 0; border: 0; }
.sidebar-next { margin-top: 23px; padding-top: 23px; border-top: 1px solid #bec8b0; }
.sidebar-next .eyebrow { font-size: 9px; letter-spacing: 1.6px; margin-bottom: 12px; }
.sidebar-next ol { padding-left: 15px; margin: 0; font-size: 11px; line-height: 1.8; color: #59654f; }
.sidebar-next li + li { margin-top: 8px; }
.faq-list { max-width: 900px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; padding: 22px 34px 22px 0; font-size: 14px; font-weight: 550; cursor: pointer; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-size: 23px; font-weight: 300; color: var(--olive); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { color: var(--muted); font-size: 13px; line-height: 1.9; max-width: 760px; padding-right: 32px; margin-bottom: 24px; }
.contact-band { padding-block: 53px; background: var(--olive); color: var(--white); }
.contact-band > .container { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.contact-copy h2 { font-size: 37px; margin-bottom: 11px; }
.contact-copy p { margin: 0; color: #d3dccb; font-size: 13px; line-height: 1.8; }
.contact-copy .eyebrow { color: var(--lemon); }
.contact-actions { display: flex; gap: 10px; flex-shrink: 0; }
.contact-actions .button.secondary { color: var(--white); border-color: #96a08c; }
.contact-actions .button.secondary:hover { background: #465740; }
footer { padding-block: 39px; border-top: 1px solid var(--line); }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
footer .wordmark { font-size: 18px; }
footer p { font-size: 10px; color: var(--muted); margin: 9px 0 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; font-size: 11px; color: var(--muted); }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-links button { padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; line-height: 1.7; text-align: left; }
.footer-links button:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-links { max-width: 500px; }
dialog { width: min(680px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 80px #1c281d38; }
dialog::backdrop { background: #20291fc2; backdrop-filter: blur(4px); }
.dialog-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding: 26px 30px 20px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { font-size: 31px; letter-spacing: -.8px; margin: 0; }
.dialog-head h3 { margin: 0; }
.dialog-head > button { border: 1px solid var(--line); background: transparent; color: var(--ink); width: 33px; height: 33px; border-radius: 50%; font-size: 20px; flex-shrink: 0; line-height: 1; }
.dialog-body { padding: 25px 30px; }
.dialog-body > p { color: var(--muted); font-size: 13px; }
.dialog-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 30px 28px; }
.dialog-body .dialog-actions { padding: 20px 0 0; }
.request-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--muted); margin-bottom: 15px; }
.request-text { min-height: 240px; font: 12px/1.8 var(--sans); background: #f6f7ef; }
.notice { padding: 15px 17px; border: 1px solid #d6ddbd; background: #f1f4df; color: #4e5b3e; border-radius: 7px; font-size: 12px; line-height: 1.8; margin-block: 18px; }
.notice a { font-weight: 550; }
.policy-copy { font-size: 13px; line-height: 1.9; color: var(--muted); }
.policy-copy h3 { color: var(--ink); font-size: 16px; margin-top: 22px; margin-bottom: 8px; }
.toast { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); z-index: 100; width: max-content; max-width: calc(100% - 32px); padding: 13px 22px; background: var(--olive-dark); color: var(--white); font-size: 12px; border-radius: 8px; box-shadow: 0 6px 24px #22312520; text-align: center; }
.empty-catalog { padding: 29px; border: 1px dashed #b7c0a7; background: #f1f3e8; border-radius: 10px; color: var(--muted); font-size: 13px; }
.empty-catalog h3 { color: var(--ink); font: 400 26px/1.3 var(--serif); margin-bottom: 12px; }
.empty-catalog p:last-child { margin: 0; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; }
.product-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white); }
.product-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--soft); }
.product-info { padding: 21px; }
.product-info h3 { font-size: 17px; line-height: 1.4; margin-bottom: 8px; }
.product-info p { color: var(--muted); font-size: 12px; }
.product-price { color: var(--olive); font-size: 14px; font-weight: 550; }
.product-info .button { margin-top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -80px; left: 16px; z-index: 100; background: var(--olive); color: var(--white); padding: 12px 20px; border-radius: 6px; }
.skip-link:focus { top: 12px; }
@media (min-width: 1440px) { .hero { gap: 90px; } }
@media (max-width: 1100px) {
  .container { width: calc(100% - 64px); }
  .nav-links { gap: 20px; }
  .hero { gap: 35px; padding-block: 65px 75px; }
  h1 { font-size: 61px; letter-spacing: -2.8px; }
  .hero-visual { min-height: 420px; }
  .visual-orbit { width: 260px; height: 260px; }
  .visual-orbit::after { width: 320px; }
  .orbit-tag { padding: 10px 12px; font-size: 11px; }
  .orbit-tag.one { top: -3px; left: -17px; }
  .orbit-tag.two { right: -31px; top: 120px; }
  .orbit-tag.three { left: -8px; bottom: -7px; }
  .path-card { padding: 30px; }
  .steps-grid { gap: 24px; }
  .order-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
  .order-form { padding: 27px; }
  .order-sidebar { padding: 24px; }
}
@media (max-width: 850px) {
  .nav-wrap { min-height: 83px; gap: 20px; flex-wrap: wrap; padding-block: 19px 0; }
  .wordmark { font-size: 21px; }
  .header-action { margin-left: auto; order: 1; font-size: 12px; padding: 8px 13px; }
  .nav-links { order: 2; width: 100%; margin: 0; gap: 27px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
  .nav-links a { font-size: 12px; }
  .hero { gap: 30px; padding-block: 52px 65px; }
  h1 { font-size: 50px; letter-spacing: -2.5px; }
  .intro { font-size: 14px; line-height: 1.8; }
  .hero-actions { gap: 9px; }
  .hero-actions .button { padding-inline: 15px; font-size: 12px; }
  .hero-visual { min-height: 370px; }
  .visual-orbit { width: 220px; height: 220px; }
  .visual-orbit::before { width: 170px; height: 170px; }
  .visual-orbit::after { width: 270px; height: 145px; }
  .orbit-center { width: 144px; height: 144px; font-size: 16px; }
  .orbit-center strong { font-size: 23px; }
  .orbit-center .orbit-arrow { font-size: 25px; margin-top: 9px; }
  .orbit-label { top: 21px; left: 20px; font-size: 9px; }
  .orbit-tag.one { top: -9px; left: -16px; }
  .orbit-tag.two { top: 108px; right: -23px; }
  .orbit-tag.three { bottom: -14px; left: -6px; }
  .orbit-foot { left: 20px; right: 20px; bottom: 18px; font-size: 8px; letter-spacing: .7px; }
  .section { padding-block: 62px; }
  .path-card { padding: 27px; }
  .path-card h3 { font-size: 29px; }
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 33px; }
  .step-number { margin-bottom: 19px; }
  .channel-grid { gap: 30px; }
  .order-layout { grid-template-columns: minmax(0, 1fr); }
  .order-sidebar { position: static; }
  .contact-band > .container { align-items: flex-start; flex-direction: column; gap: 25px; }
  .footer-grid { align-items: flex-start; }
  .footer-links { justify-content: flex-end; gap: 16px; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 24px; }
  .container { width: calc(100% - 40px); }
  .nav-wrap { column-gap: 12px; row-gap: 13px; padding-top: 17px; }
  .wordmark { font-size: 20px; }
  .brand-mark { width: 25px; height: 25px; }
  .header-action { font-size: 11px; }
  .nav-links { gap: 26px; padding-bottom: 10px; }
  .nav-links a { font-size: 11px; padding-block: 6px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 35px; padding-block: 42px 49px; }
  .hero .eyebrow { font-size: 9px; letter-spacing: 2px; margin-bottom: 19px; }
  h1 { font-size: clamp(45px, 12vw, 64px); line-height: 1.06; letter-spacing: -2.3px; margin-bottom: 21px; }
  .intro { max-width: none; font-size: 14px; margin-bottom: 24px; }
  .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-actions .button { padding-inline: 11px; }
  .micro-copy { font-size: 10px; margin-top: 16px; }
  .hero-visual { min-height: 335px; border-radius: 10px; }
  .visual-orbit { width: 234px; height: 234px; }
  .visual-orbit::before { width: 175px; height: 175px; }
  .visual-orbit::after { width: 285px; height: 140px; }
  .orbit-center { width: 148px; height: 148px; }
  .orbit-tag { padding: 9px 12px; }
  .orbit-tag.one { top: -5px; left: -15px; }
  .orbit-tag.two { right: -22px; top: 114px; }
  .orbit-tag.three { left: -3px; bottom: -10px; }
  .section { padding-block: 48px; }
  .section-heading { margin-bottom: 28px; }
  .eyebrow { font-size: 9px; letter-spacing: 2px; }
  h2 { font-size: 35px; letter-spacing: -1.2px; }
  .section-heading > p:last-child { font-size: 13px; }
  .path-grid { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .path-card { padding: 26px; }
  .card-top { margin-bottom: 26px; }
  .path-card h3 { font-size: 31px; }
  .path-card > p { font-size: 13px; }
  .feature-list { font-size: 12px; }
  .path-card .button { width: 100%; }
  .mode-tabs { display: flex; width: 100%; margin-bottom: 29px; }
  .mode-tabs button { flex: 1; padding: 10px 12px; }
  .steps-grid { gap: 27px 23px; }
  .step { padding-top: 19px; }
  .step-number { margin-bottom: 17px; }
  .step h3 { font-size: 15px; }
  .step p { font-size: 11px; line-height: 1.85; }
  .channel-grid { grid-template-columns: minmax(0, 1fr); gap: 23px; }
  .channel-card { padding-top: 24px; }
  .channel-icon { width: 38px; height: 38px; margin-bottom: 15px; }
  .channel-card h3 { font-size: 19px; }
  .channel-card p { font-size: 13px; }
  .order-form { padding: 22px 18px; }
  .field-grid, .field-grid.three { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .block-heading { margin-bottom: 18px; }
  .block-heading h3 { font-size: 15px; }
  .item-row { grid-template-columns: minmax(0, 1fr) 67px 31px; gap: 7px; }
  .item-row input { padding-inline: 9px !important; }
  .remove-item { width: 31px; }
  .field label { font-size: 11px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
  .item-row input { font-size: 14px !important; }
  .order-form > .button, .order-form .form-block > .button.primary { width: 100%; }
  .check-row { font-size: 11px; }
  .order-sidebar { padding: 24px; }
  .faq-list summary { font-size: 13px; padding-block: 19px; }
  .faq-list details p { font-size: 12px; }
  .contact-band { padding-block: 40px; }
  .contact-copy h2 { font-size: 33px; }
  .contact-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .contact-actions .button { padding-inline: 10px; font-size: 12px; }
  footer { padding-block: 30px; }
  .footer-grid { flex-direction: column; gap: 23px; }
  .footer-links { justify-content: flex-start; gap: 19px; }
  .dialog-head { padding: 22px 20px 18px; }
  .dialog-head h2 { font-size: 27px; }
  .dialog-body { padding: 21px 20px; }
  .dialog-actions { padding: 0 20px 23px; }
  .dialog-actions .button { width: 100%; }
  .request-text { font-size: 12px; min-height: 255px; }
  .empty-catalog { padding: 23px; }
  .catalog-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  .site-header, .hero-visual, .contact-band, footer, .dialog-actions, .toast { display: none !important; }
  body { background: white; color: black; font-size: 12pt; }
  .container { width: 100%; }
  .section { padding-block: 20px; }
  .order-layout { grid-template-columns: 1fr; }
  .order-sidebar { position: static; }
  dialog[open] { position: static; width: 100%; max-height: none; box-shadow: none; border: none; }
}


/* Five-page storefront — shared page, catalogue and communication patterns. */
body { overflow-wrap: break-word; }
main { min-height: 55vh; }
.container > *, .hero > *, .split-intro > *, .contact-grid > *, .contact-form-layout > *, .field-grid > *, .catalog-toolbar > * { min-width: 0; }
.nav-wrap { gap: 22px; padding-block: 0; flex-wrap: nowrap; }
.nav-links { gap: 22px; width: auto; padding: 0; overflow: visible; order: initial; }
.nav-links a { position: relative; line-height: 1.5; font-size: 12px; padding-block: 14px; }
.nav-links a[aria-current="page"] { color: var(--olive); font-weight: 650; }
.nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 7px; border-bottom: 1px solid var(--olive); }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.bag-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #b9c2ac; border-radius: 7px; padding: 9px 12px; min-height: 42px; text-decoration: none; font-size: 12px; line-height: 1.5; white-space: nowrap; }
.bag-link:hover { background: var(--soft); border-color: var(--olive); }
.bag-count { min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; background: var(--olive); color: var(--white); font-size: 10px; line-height: 1; border-radius: 50%; padding: 2px 4px; }
.menu-toggle { display: none; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 6px; color: var(--olive); background: transparent; padding: 9px 10px; font-size: 11px; line-height: 1.3; }
.menu-toggle svg { width: 18px; height: 18px; }
.menu-toggle[aria-expanded="true"] { background: var(--olive); color: var(--white); border-color: var(--olive); }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding-top: 24px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--olive); }
.page-hero { padding-block: 58px 66px; }
.page-hero .eyebrow { margin-bottom: 19px; }
.page-hero h1 { font-size: clamp(50px, 5.4vw, 72px); max-width: 920px; line-height: 1.08; letter-spacing: -2.8px; margin-bottom: 22px; }
.page-intro { max-width: 660px; color: var(--muted); font-size: 16px; line-height: 1.85; margin-bottom: 0; }
.page-intro + .hero-actions { margin-top: 27px; }
.split-intro { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 70px; align-items: center; }
.split-intro .page-intro { max-width: 580px; }
.split-intro > .guidance-card { margin: 0; }
.guidance-card { background: #e9eddd; border: 1px solid #cdd6be; padding: 29px; border-radius: var(--radius); }
.guidance-card .eyebrow { margin-bottom: 15px; font-size: 9px; letter-spacing: 1.7px; }
.guidance-card h2, .guidance-card h3 { font-family: var(--serif); font-weight: 400; font-size: 29px; line-height: 1.2; letter-spacing: -.6px; margin-bottom: 16px; }
.guidance-card p, .guidance-card li { font-size: 12px; line-height: 1.9; color: #59654e; }
.guidance-card ul, .guidance-card ol { margin-block: 15px 0; padding-left: 18px; }
.guidance-card li + li { margin-top: 7px; }
.guidance-card p:last-child { margin-bottom: 0; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.benefit-card { border-top: 1px solid #bdc6af; padding-top: 25px; }
.benefit-card h3 { font-size: 17px; line-height: 1.45; font-weight: 550; margin-bottom: 11px; }
.benefit-card p { font-size: 13px; line-height: 1.85; color: var(--muted); margin-bottom: 0; }
.benefit-card .eyebrow { font-size: 10px; margin-bottom: 18px; }
.process-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; margin-bottom: 33px; }
.process-intro .section-heading { margin: 0; }
.process-intro > p { max-width: 320px; font-size: 12px; line-height: 1.8; color: var(--muted); margin-bottom: 0; }
.process-panel .steps-grid { row-gap: 34px; }
.process-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; gap: 32px; counter-reset: process; }
.process-list > li { padding-top: 23px; border-top: 1px solid #bfc7b2; counter-increment: process; }
.process-list > li::before { content: counter(process, decimal-leading-zero); display: inline-flex; width: 31px; height: 31px; align-items: center; justify-content: center; font-size: 10px; color: var(--olive); border: 1px solid #b3bea5; border-radius: 50%; margin-bottom: 23px; }
.process-list h3 { font-size: 15px; line-height: 1.5; margin-bottom: 10px; }
.process-list p { font-size: 12px; line-height: 1.85; color: var(--muted); margin-bottom: 0; }
.step-overview { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; color: var(--olive); font-size: 11px; margin: 25px 0 0; }
.step-overview > span { display: inline-flex; align-items: center; gap: 8px; }
.step-overview > span + span::before { content: "→"; color: #9ba58d; margin-right: 3px; }
.note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.note-grid .notice { margin: 0; }
.catalog-toolbar { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(140px, 1fr) minmax(140px, 1fr); gap: 17px; padding: 23px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); margin-bottom: 23px; align-items: end; }
.catalog-toolbar .field { margin: 0 !important; }
.catalog-toolbar label { font-size: 11px; }
.catalog-meta, .catalog-summary { display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap; margin-block: 17px 24px; }
#result-count { font-size: 12px; color: var(--muted); margin-bottom: 18px; }
.catalog-meta #result-count, .catalog-summary #result-count { margin: 0; }
.catalog-grid { gap: 23px; }
.product-card { display: flex; flex-direction: column; min-width: 0; }
.product-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--line); background: #e9ecdf; }
.product-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.product-media .product-badges { position: absolute; top: 14px; left: 14px; right: 14px; }
.product-placeholder, .product-media:not(:has(img)) { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; color: #6e7b5f; }
.product-placeholder { height: 100%; min-height: 190px; width: 100%; padding: 24px; background: #e9ecdf; }
.product-placeholder > span:first-child { font: 400 48px/1.1 var(--serif); color: #8b987c; }
.product-placeholder small, .product-placeholder > span:last-child { max-width: 90%; text-align: center; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; }
.product-info { padding: 23px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.product-info h3 { font-family: var(--serif); font-size: 25px; font-weight: 400; line-height: 1.2; letter-spacing: -.6px; }
.product-info p { font-size: 12px; line-height: 1.8; }
.product-info .eyebrow, .product-category { font-family: var(--sans); font-size: 9px; letter-spacing: 1.7px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.product-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.product-badges span, .product-badge { display: inline-flex; align-items: center; border: 1px solid #c5cfb6; border-radius: 4px; padding: 4px 7px; background: #f7f8f1; color: #4e5c40; font-size: 9px; line-height: 1.4; }
.product-specs { font-size: 11px; line-height: 1.7; color: var(--muted); margin: 12px 0 16px; }
.product-specs dt { color: var(--ink); font-weight: 550; }
.product-specs dd { margin-left: 0; margin-bottom: 8px; }
.product-price { margin-top: auto; padding-top: 8px; }
.product-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: stretch; }
.product-actions .button { margin-top: 0; flex: 1 1 auto; }
.product-actions .text-button { min-height: 40px; }
.empty-catalog, .empty-state { padding: 58px 35px; text-align: center; border: 1px solid #c9d2b9; background: #eef1e4; border-radius: 12px; color: var(--muted); font-size: 13px; }
.empty-catalog h3, .empty-state h3 { color: var(--ink); font: 400 33px/1.2 var(--serif); letter-spacing: -.8px; margin-bottom: 15px; }
.empty-catalog p, .empty-state p { max-width: 550px; margin-inline: auto; font-size: 13px; line-height: 1.9; }
.empty-catalog .eyebrow, .empty-state .eyebrow { font-size: 9px; margin-bottom: 19px; }
.empty-catalog .hero-actions, .empty-state .hero-actions { justify-content: center; margin-top: 24px; }
.empty-catalog .empty-icon, .empty-state .empty-icon { display: flex; width: 56px; height: 56px; margin: 0 auto 25px; border: 1px solid #b9c7a8; border-radius: 50%; align-items: center; justify-content: center; font: 400 27px/1 var(--serif); color: var(--olive); }
.empty-catalog p:last-child, .empty-state p:last-child { margin-bottom: 0; }
.selection-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 28px; border: 1px solid #cbd3bd; border-radius: 10px; padding: 22px 25px; background: #e5ead8; }
.selection-bar p { font-size: 12px; color: #59654d; margin: 0; }
.selection-bar strong { color: var(--olive); font-weight: 600; }
.selection-bar .hero-actions { gap: 8px; }
.selection-bar .button { min-height: 42px; font-size: 12px; padding: 11px 16px; }
.item-row:has(.spec-field), .item-row.has-spec { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 72px 36px; }
.item-row .item-meta { min-width: 0; font-size: 10px; color: var(--muted); }
.item-row .item-name { min-width: 0; font-size: 12px; line-height: 1.5; }
.item-row .item-name strong { display: block; color: var(--ink); }
.item-row .item-name small { display: block; font-size: 10px; margin-top: 4px; color: var(--muted); }
.summary-empty { font-size: 12px; color: #59654f; line-height: 1.8; padding-block: 18px; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; }
.contact-grid .channel-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; background: var(--white); display: flex; flex-direction: column; align-items: flex-start; }
.contact-grid .channel-card h3 { font: 400 30px/1.2 var(--serif); letter-spacing: -.6px; }
.contact-grid .channel-card .button { margin-top: auto; }
.contact-grid .channel-card .contact-value { font-size: 15px; line-height: 1.6; color: var(--olive); overflow-wrap: anywhere; }
.contact-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 315px; gap: 37px; align-items: start; }
.contact-form-layout .guidance-card { margin: 0; }
.contact-form .form-actions { margin-top: 23px; }
#message-preview { min-height: 280px; background: #f6f7ef; font-size: 12px; line-height: 1.8; }
#product-dialog { width: min(820px, calc(100% - 32px)); }
.product-detail-grid, .product-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; align-items: start; }
.product-detail-grid .product-media, .product-detail > .product-media { border: 1px solid var(--line); border-radius: 8px; }
.product-detail-grid h3, .product-detail h3 { font: 400 30px/1.2 var(--serif); margin-bottom: 13px; }
.product-detail-copy p { font-size: 13px; color: var(--muted); }
.footer-grid { align-items: flex-start; }
footer .wordmark { flex-shrink: 1; }
.footer-links { gap: 14px 22px; }
.footer-links a[aria-current="page"] { color: var(--olive); text-decoration: underline; }
@media (max-width: 1100px) {
  .nav-wrap { gap: 14px; }
  .nav-wrap .wordmark { font-size: 19px; gap: 8px; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 11px; }
  .bag-link { padding-inline: 9px; font-size: 11px; }
  .split-intro { gap: 35px; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .contact-form-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
  .product-info { padding: 20px; }
}
@media (min-width: 801px) and (max-width: 850px) {
  .nav-wrap { min-height: 83px; }
  .nav-links { margin-left: auto; gap: 13px; }
  .nav-wrap .wordmark { font-size: 18px; }
  .nav-wrap .brand-mark { width: 25px; height: 25px; }
  .nav-links a { font-size: 10px; }
  .bag-link { gap: 5px; font-size: 10px; }
}
@media (max-width: 800px) {
  .nav-wrap { display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 0; padding-block: 17px; min-height: 79px; }
  .nav-wrap .wordmark { font-size: 20px; margin-right: auto; }
  .menu-toggle { display: inline-flex; order: 2; }
  .nav-actions { order: 1; }
  .nav-links, #primary-nav { display: none; width: 100%; flex-basis: 100%; order: 3; padding: 14px 0 0; margin: 16px 0 0; border-top: 1px solid var(--line); overflow: visible; }
  .nav-links.is-open, #primary-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { padding: 12px; font-size: 13px; border-radius: 5px; }
  .nav-links a[aria-current="page"] { background: #e7ecda; }
  .nav-links a[aria-current="page"]::after { display: none; }
  .nav-links a:hover { background: var(--soft); }
  .page-hero { padding-block: 43px 51px; }
  .page-hero h1 { font-size: 54px; }
  .page-intro { font-size: 14px; }
  .split-intro { grid-template-columns: minmax(0, 1fr); gap: 29px; }
  .guidance-card { padding: 25px; }
  .benefit-grid { gap: 23px; }
  .benefit-card h3 { font-size: 15px; }
  .benefit-card p { font-size: 12px; }
  .process-intro { flex-direction: column; align-items: flex-start; gap: 19px; }
  .process-intro > p { max-width: 580px; }
  .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-toolbar { padding: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  .catalog-toolbar .field:first-child { grid-column: 1 / -1; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .contact-form-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-grid .channel-card { padding: 25px; }
  .item-row:has(.spec-field), .item-row.has-spec { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 72px 36px; }
}
@media (max-width: 600px) {
  .nav-wrap { padding-block: 15px; }
  .nav-wrap .wordmark { font-size: 19px; gap: 7px; }
  .bag-link { min-height: 40px; padding: 8px 9px; font-size: 10px; gap: 6px; }
  .bag-count { min-width: 18px; height: 18px; font-size: 9px; }
  .menu-toggle { min-width: 40px; min-height: 40px; padding: 8px; font-size: 10px; }
  .breadcrumbs { padding-top: 19px; font-size: 10px; }
  .page-hero { padding-block: 33px 41px; }
  .page-hero h1 { font-size: clamp(40px, 11.4vw, 55px); line-height: 1.08; letter-spacing: -1.8px; }
  .page-hero .eyebrow { margin-bottom: 15px; }
  .page-intro { font-size: 13px; line-height: 1.9; }
  .page-intro + .hero-actions { margin-top: 23px; }
  .guidance-card { padding: 23px; }
  .guidance-card h2, .guidance-card h3 { font-size: 27px; }
  .benefit-grid { grid-template-columns: minmax(0, 1fr); gap: 23px; }
  .benefit-card { padding-top: 21px; }
  .benefit-card h3 { font-size: 17px; }
  .benefit-card p { font-size: 13px; }
  .note-grid { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  .catalog-toolbar { padding: 19px 17px; gap: 16px; }
  .catalog-toolbar input, .catalog-toolbar select { font-size: 16px; }
  .catalog-toolbar select { padding-left: 9px; }
  .catalog-grid { grid-template-columns: minmax(0, 1fr); }
  .product-info { padding: 23px; }
  .product-actions .button { min-height: 44px; }
  .empty-catalog, .empty-state { padding: 35px 23px; }
  .empty-catalog h3, .empty-state h3 { font-size: 29px; }
  .empty-catalog p, .empty-state p { font-size: 12px; }
  .empty-catalog .hero-actions, .empty-state .hero-actions { display: flex; flex-direction: column; }
  .empty-catalog .button, .empty-state .button { width: 100%; }
  .selection-bar { padding: 22px; gap: 15px; }
  .selection-bar .hero-actions { width: 100%; }
  .selection-bar .button { font-size: 11px; padding-inline: 10px; }
  .item-row:has(.spec-field), .item-row.has-spec { grid-template-columns: minmax(0, 1fr) 67px 31px; row-gap: 11px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  .item-row:has(.spec-field) > .field:first-child, .item-row.has-spec > .field:first-child { grid-column: 1 / -1; }
  .item-row .item-name { grid-column: 1 / -1; }
  .item-row .spec-field { grid-column: 1; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .contact-grid .channel-card { padding: 25px; }
  .contact-grid .channel-card h3 { font-size: 29px; }
  .contact-form .form-actions { gap: 15px; }
  .contact-form .form-actions .button { width: 100%; }
  .product-detail-grid, .product-detail { grid-template-columns: minmax(0, 1fr); gap: 21px; }
  .product-detail-grid .product-media, .product-detail > .product-media { max-height: 260px; }
  .process-list { gap: 27px 23px; }
  #message-preview { min-height: 270px; font-size: 12px; }
  .footer-links { gap: 14px 20px; }
}
@media (max-width: 360px) {
  .container { width: calc(100% - 32px); }
  .nav-wrap { column-gap: 7px; }
  .nav-wrap .wordmark { font-size: 16px; gap: 5px; letter-spacing: -.7px; }
  .nav-wrap .brand-mark { width: 23px; height: 23px; }
  .bag-link { padding-inline: 7px; gap: 4px; }
  .menu-toggle { padding-inline: 7px; min-width: 38px; }
  .hero-actions .button { font-size: 11px; padding-inline: 9px; }
  .catalog-toolbar { grid-template-columns: minmax(0, 1fr); }
  .catalog-toolbar .field:first-child { grid-column: auto; }
  .hero-visual { min-height: 315px; }
  .visual-orbit { transform: rotate(-18deg) scale(.91); }
  .orbit-foot { font-size: 7px; }
  .steps-grid, .process-list { gap: 26px 18px; }
  .step h3 { font-size: 14px; }
  .order-form { padding-inline: 16px; }
  .dialog-head, .dialog-body { padding-inline: 17px; }
}
@media print {
  .menu-toggle, .nav-actions, .catalog-toolbar, .selection-bar, .product-actions { display: none !important; }
  .page-hero { padding-block: 20px; }
  .contact-form-layout, .split-intro { grid-template-columns: 1fr; }
}

/* Match generated product cards, request rows and the five page layouts. */
.page-hero { padding-top: 28px; }
.page-hero .breadcrumbs { padding: 0; margin-bottom: 35px; }
.page-hero .hero-actions { margin-top: 27px; }
.split-intro + .benefit-grid { margin-top: 38px; }
.step-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin: 0; }
.step-card { border-top: 1px solid #bfc7b2; padding-top: 25px; min-width: 0; }
.step-card h3 { font: 550 16px/1.4 var(--sans); margin-bottom: 11px; letter-spacing: -.2px; }
.step-card p { font: 12px/1.85 var(--sans); color: var(--muted); margin: 0; }
.step-owner { display: block; color: var(--olive); font-size: 9px; line-height: 1.4; letter-spacing: 1.2px; margin: -10px 0 14px; }
#process-panel { row-gap: 35px; }
.catalog-toolbar .filter-field { margin: 0; min-width: 0; }
.catalog-toolbar .filter-field label { display: block; margin-bottom: 7px; font-size: 11px; line-height: 1.5; font-weight: 550; }
.catalog-toolbar > .text-button { grid-column: 1 / -1; justify-self: start; }
.selection-bar { margin-top: 0; margin-bottom: 20px; }
.selection-bar > div { display: flex; flex-wrap: wrap; gap: 16px; }
.selection-bar a { font-size: 12px; color: var(--olive); text-decoration: none; line-height: 1.8; }
.selection-bar a:hover { text-decoration: underline; }
.selection-bar a span { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; margin-left: 4px; border: 1px solid #b9c4aa; font-size: 10px; }
.empty-state > .path-icon { margin: 0 auto 23px; width: 50px; height: 50px; font-size: 23px; background: transparent; }
.catalog-section > .note-grid { margin-top: 32px; }
.product-monogram { font: 400 65px/1 var(--serif); color: #909d80; }
.product-image-label { font-size: 9px; line-height: 1.6; letter-spacing: 1.5px; text-transform: uppercase; color: #68785a; max-width: 85%; text-align: center; }
.product-info h2 { font: 400 26px/1.18 var(--serif); letter-spacing: -.6px; margin-bottom: 13px; }
.product-description { margin-bottom: 15px; }
.product-info .product-code { font-size: 10px; letter-spacing: .2px; margin-bottom: 8px; }
.product-info .product-price { color: var(--olive); font-size: 13px; margin-bottom: 13px; }
.product-info > .text-button { align-self: flex-start; margin-bottom: 17px; }
.product-controls { margin-top: auto; }
.product-controls > label.field { display: block; font-size: 11px; font-weight: 550; }
.product-controls > label.field > select { display: block; margin-top: 7px; }
.product-controls .product-actions { flex-direction: column; margin-top: 13px; }
.product-controls .product-actions .button { width: 100%; margin: 0; }
#product-detail-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; align-items: start; }
#product-detail-body .product-media { border: 1px solid var(--line); border-radius: 8px; aspect-ratio: 1; }
#product-detail-body > * { min-width: 0; }
.product-detail-copy h2 { font-size: 30px; line-height: 1.2; letter-spacing: -.6px; margin-bottom: 13px; }
.product-detail-copy .product-code { font-size: 10px; margin-bottom: 16px; }
.product-detail-copy .eyebrow { font-size: 9px; margin-bottom: 12px; }
.product-detail-copy .product-price { color: var(--olive); font-size: 14px; }
.product-detail-copy .micro-copy { font-size: 11px; line-height: 1.8; margin-top: 0; }
.product-detail-copy .product-specs { border-top: 1px solid var(--line); padding-top: 13px; }
.recipient-line { font-size: 11px !important; overflow-wrap: anywhere; color: var(--olive) !important; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.item-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 72px 36px; }
.summary-item > div { min-width: 0; }
.summary-item strong, .summary-item small { display: block; }
.summary-item small { font-size: 10px; line-height: 1.7; color: #647158; margin-top: 5px; }
.summary-item span:last-child { max-width: 45%; text-align: right; overflow-wrap: normal; }
.summary-total > * { min-width: 0; }
.summary-total strong { max-width: 60%; text-align: right; }
.form-block > .field-grid + .field-grid { margin-top: 18px; }
.order-section.container { background: transparent; }
.contact-grid .channel-card h2 { font-size: 32px; line-height: 1.2; letter-spacing: -.6px; margin-bottom: 16px; }
.contact-grid .channel-value { font-size: 12px; color: var(--olive); padding-block: 12px; border-top: 1px solid var(--line); width: 100%; margin-bottom: 16px; overflow-wrap: anywhere; }
.text-link { font-size: 12px; line-height: 1.8; color: var(--olive); text-decoration-thickness: 1px; }
.order-sidebar > .text-link { display: inline-block; margin-top: 17px; font-size: 11px; }
.guidance-card .feature-list { padding-left: 0; }
@media (max-width: 850px) {
  .step-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 33px; }
}
@media (max-width: 800px) {
  .catalog-toolbar .filter-field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .page-hero { padding-top: 22px; }
  .page-hero .breadcrumbs { margin-bottom: 29px; }
  .page-hero .hero-actions { margin-top: 23px; }
  .step-overview { gap: 27px 23px; }
  .step-card { padding-top: 19px; }
  .step-card h3 { font-size: 15px; }
  .step-card p { font-size: 11px; }
  .selection-bar > div { flex-direction: column; gap: 8px; }
  .selection-bar a { font-size: 12px; }
  #product-detail-body { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  #product-detail-body .product-media { aspect-ratio: 4 / 3; max-height: 270px; }
  .item-row { grid-template-columns: minmax(0, 1fr) 67px 36px; row-gap: 11px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
  .item-row > .field:first-child { grid-column: 1 / -1; }
  .item-row > .field:nth-child(2) { grid-column: 1; }
  .item-row .remove-item { width: 36px; }
  .item-row label { font-size: 10px; }
  .item-row input { font-size: 14px !important; }
  .summary-total strong { font-size: 17px; }
}
@media (max-width: 360px) {
  .catalog-toolbar .filter-field:first-child { grid-column: auto; }
  .step-overview { gap: 26px 18px; }
  .step-card h3 { font-size: 14px; }
}

/* Keep each orbit label outside the central message at every hero size. */
.orbit-tag.two { top: 18px; right: -15px; }
.orbit-tag.three { bottom: 8px; }
@media (max-width: 850px) {
  .orbit-tag.one { left: -10px; }
}
@media (max-width: 360px) {
  .orbit-tag.one { left: 0; }
}