:root { --ink:#142238; --muted:#66758a; --blue:#245cdb; --blue-dark:#1748b4; --line:#e2e8f0; --surface:#fff; --background:#f7f9fc; --radius:12px; --shadow:0 12px 40px rgb(18 33 57 / 6%); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--background); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--blue); text-decoration:none; }
a:hover { color:var(--blue-dark); }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.2; letter-spacing:-.025em; }
h1 { font-size:clamp(30px,4vw,44px); font-weight:750; }
h2 { font-size:26px; font-weight:700; }
h3 { font-size:18px; font-weight:650; }
img { max-width:100%; display:block; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
:focus-visible { outline:3px solid #71a3ff; outline-offset:4px; }
.container { width:min(1280px,calc(100% - 64px)); margin-inline:auto; }
.page-shell { min-height:50vh; padding-top:30px; padding-bottom:76px; }
.icon { width:22px; height:22px; flex-shrink:0; display:inline-block; vertical-align:middle; }
.top-strip { background:#0c1728; color:#afbdd0; font-size:11px; letter-spacing:.04em; }
.top-strip .container { display:flex; justify-content:space-between; padding-block:8px; }
.site-header { background:#122139; color:white; position:relative; z-index:20; }
.header-inner { min-height:100px; display:flex; align-items:center; gap:24px; }
.logo { color:white; display:flex; align-items:center; gap:12px; font-size:25px; line-height:1; font-weight:800; letter-spacing:.03em; flex-shrink:0; }
.logo:hover { color:white; }
.logo-mark { height:43px; width:35px; display:grid; place-items:center; color:#78a6ff; }
.logo-mark .icon { width:31px; height:34px; }
.logo-subtitle { display:block; font-size:10px; letter-spacing:.45em; color:#b7c8df; margin-top:7px; }
.catalog-button { display:flex; align-items:center; gap:10px; color:white; padding:13px 18px; border-radius:8px; background:var(--blue); font-size:14px; font-weight:600; }
.catalog-button:hover { background:var(--blue-dark); color:white; }
.header-search { flex:1; display:flex; margin:0; min-width:0; height:48px; background:white; border-radius:8px; overflow:hidden; }
.header-search input { width:100%; min-width:0; border:0; padding:0 16px; background:white; color:var(--ink); font-size:13px; }
.header-search input:focus { outline:none; }
.header-search:focus-within { box-shadow:0 0 0 3px #78a6ff; }
.header-search button { background:white; color:var(--muted); border:0; width:50px; display:grid; place-items:center; flex-shrink:0; }
.header-cart { display:flex; align-items:center; gap:9px; color:white; font-size:13px; }
.header-cart:hover { color:#a8c6ff; }
.cart-count { background:#304564; min-width:24px; padding:2px 5px; border-radius:6px; text-align:center; font-size:11px; }
.skip-link { position:absolute; top:-100px; left:12px; background:white; padding:10px; z-index:50; }
.skip-link:focus { top:12px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:12px; margin-bottom:28px; color:#8a97a8; }
.breadcrumb a { color:var(--muted); }
.breadcrumb a:hover { color:var(--blue); }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--muted); display:block; margin-bottom:14px; }
.page-heading { margin:24px 0 34px; }
.page-heading .eyebrow { color:var(--blue); }
.page-heading h1 { margin-bottom:12px; }
.page-heading p { color:var(--muted); max-width:660px; }
.button { border:1px solid transparent; min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:12px 21px; font-size:13px; font-weight:650; border-radius:8px; transition:background .15s,transform .15s; text-align:center; }
.button-primary { background:var(--blue); color:white; }
.button-primary:hover { background:var(--blue-dark); color:white; }
.button-secondary { color:var(--ink); border-color:var(--line); background:white; }
.button-secondary:hover { background:#eef3fc; color:var(--blue); }
.button-wide { width:100%; }
.button-group { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.text-link { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; }
.text-link .icon { width:18px; height:18px; }
.text-button { background:transparent; border:0; padding:6px 0; color:var(--muted); font-size:12px; }
.text-button:hover { color:var(--blue); }
.icon-button { display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; background:white; width:40px; height:40px; padding:0; color:var(--ink); }
.field { display:flex; flex-direction:column; gap:8px; margin:0; font-size:12px; font-weight:600; color:var(--ink); }
.field input,.field select,.field textarea { width:100%; min-width:0; border:1px solid #dbe2ec; border-radius:8px; background:white; padding:13px 14px; color:var(--ink); font-weight:400; font-size:14px; }
.field input::placeholder,.field textarea::placeholder { color:#8c99ac; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--blue); outline:2px solid #dce8ff; }
.field textarea { min-height:118px; resize:vertical; }
.field small { color:var(--blue); }
.field .input-error { border-color:#c94848; }
.optional { color:#8a97a8; font-weight:400; margin-left:8px; }
.notice { border:1px solid var(--line); border-radius:8px; padding:16px 18px; font-size:13px; margin-bottom:20px; }
.notice-error { color:#9e3434; background:#fff4f4; border-color:#f3d0d0; }
.notice-warning { color:#735b22; background:#fffbec; border-color:#eee0ae; }
.notice ul { margin:0; padding-left:18px; }
.empty-state { border:1px dashed #cdd9e8; border-radius:var(--radius); padding:64px 24px; text-align:center; background:white; }
.empty-state>.icon { width:40px; height:40px; color:#8aa6cd; margin-bottom:18px; }
.empty-state h2,.empty-state h3 { margin-bottom:12px; font-size:24px; }
.empty-state p { color:var(--muted); margin-bottom:24px; }
.empty-state .button { margin-top:2px; }
.store-section { margin-top:60px; }
.section-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; margin-bottom:26px; }
.section-heading .eyebrow { margin-bottom:8px; }
.pagination { display:flex; justify-content:center; align-items:center; gap:20px; margin-top:32px; font-size:12px; color:var(--muted); }
.site-footer { background:#122139; color:#97a9c2; padding:46px 0 0; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:32px; }
.footer-grid h2 { font-size:13px; letter-spacing:0; color:#e5edf8; margin-bottom:18px; }
.footer-grid a:not(.footer-logo) { display:block; margin-bottom:10px; color:#b0c0d4; font-size:12px; }
.footer-grid a:hover { color:white; }
.footer-grid p { font-size:12px; line-height:1.9; }
.footer-logo { color:white; font-size:23px; font-weight:750; letter-spacing:.02em; display:block; margin-bottom:18px; }
.footer-logo span { display:block; font-size:10px; font-weight:400; letter-spacing:.1em; color:#97a9c2; margin-top:5px; }
.footer-bottom { border-top:1px solid #293a52; padding-block:20px; margin-top:40px; display:flex; justify-content:space-between; gap:20px; font-size:10px; }
/* Existing administrative forms share typography without depending on storefront classes. */
.admin-form { background:white; border:1px solid var(--line); padding:28px; border-radius:var(--radius); }
main.container>form:not([class]) { margin:24px 0; }
main.container>form:not([class]) label { display:block; margin:16px 0; }
main.container>form:not([class]) input,main.container>form:not([class]) select { padding:10px; border:1px solid var(--line); border-radius:6px; }
main.container>ul { padding-left:20px; }
main.container>ul>li { padding:12px 0; }
main.container>table { border-collapse:collapse; width:100%; background:white; }
main.container>table td,main.container>table th { padding:12px; text-align:left; border-bottom:1px solid var(--line); }
@media(max-width:1000px) { .header-inner { gap:16px; }.header-cart>span:not(.cart-count) { display:none; }.logo { font-size:21px; }.catalog-button { padding-inline:14px; } }
@media(max-width:720px) { .container { width:calc(100% - 32px); }.top-strip .container { justify-content:center; }.top-strip-note { display:none; }.header-inner { flex-wrap:wrap; padding-block:18px; min-height:0; gap:14px; }.logo { margin-right:auto; }.catalog-button { order:2; flex:0 0 auto; font-size:12px; min-height:44px; padding:10px; }.header-search { order:3; flex:1 1 170px; height:44px; }.header-search input { font-size:12px; padding-left:12px; }.header-cart { margin-left:auto; }.header-cart>.icon { width:24px; }.page-shell { padding-top:22px; padding-bottom:44px; }.page-heading { margin:18px 0 28px; }.section-heading { align-items:flex-start; flex-direction:column; gap:14px; }h2 { font-size:23px; }.store-section { margin-top:38px; }.footer-grid { grid-template-columns:1fr; gap:28px; }.footer-bottom { flex-direction:column; gap:5px; }.pagination { flex-wrap:wrap; gap:12px; }.breadcrumb { gap:7px; font-size:11px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }

.store-contacts { font-style:normal; display:grid; gap:16px; overflow-wrap:anywhere; }
.contact-label { display:block; font-size:11px; margin-bottom:5px; color:var(--muted); }
.contact-address { display:block; white-space:pre-line; }
.footer-grid .contact-label { color:#97a9c2; }
.footer-grid .store-contacts { font-size:12px; }
.footer-grid .store-contacts a { margin-bottom:0; }

.currency-symbol { display:inline-block; white-space:nowrap; }
.currency-symbol svg { display:inline-block; width:.8em; height:.8em; vertical-align:-.04em; fill:currentColor; }

.information-page { max-width:900px; }
.information-page h2 { font-size:22px; margin:28px 0 14px; }
.information-page>p { margin-bottom:18px; }

/* Long supplier text must fit narrow screens without shrinking the viewport. */
.page-heading,.breadcrumb,.store-contacts{overflow-wrap:anywhere}
.breadcrumb>*{min-width:0;max-width:100%}
.currency-symbol{position:relative}
@media(max-width:720px){
    input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{font-size:16px!important}
    .header-cart{min-height:44px;min-width:44px;justify-content:center}
    .header-search button{min-width:44px}
}

.analytics-controls { padding-bottom: 1rem; }
.analytics-settings { background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 8px; padding: .65rem 1rem; min-height: 44px; cursor: pointer; }
.analytics-banner { position: fixed; bottom: 16px; left: 16px; right: 16px; margin: auto; max-width: 680px; padding: 20px; background: #fff; color: #172337; border: 1px solid #d4deea; border-radius: 16px; box-shadow: 0 8px 40px #17233733; z-index: 100; }
.analytics-banner[hidden] { display: none; }
.analytics-banner p { margin: 0 0 12px; }
.analytics-banner a { color: #1958a6; }
.analytics-actions { display: flex; flex-wrap: wrap; gap: 12px; }