.spc { --navy: #142a6b;
  --navy-2: #1d3a8f;
  --blue: #2346b8;
  --blue-50: #eef2fd;
  --blue-100: #dbe4fb;
  --red: #d7191f;
  --red-d: #b51217;
  --ink: #14193a;
  --muted: #5d6585;
  --line: #e2e6f0;
  --bg: #f6f8fc;
  --ok: #138a52;
  --ok-50: #e8f6ef;
  --amber-50: #fff6e5;
  --amber: #8a5a00;
  --r: 14px;
  --r-s: 10px;
  --sh: 0 1px 2px rgba(20, 25, 58, .06), 0 8px 24px rgba(20, 25, 58, .08); }
.spc * { box-sizing: border-box; }
.spc [hidden] { display: none !important; }
.spc { margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
.spc button:where(:not(.spc-legacy *)) { font: inherit; color: inherit; cursor: pointer; }
.spc button:disabled:where(:not(.spc-legacy *)) { cursor: not-allowed; }
.spc :focus-visible:where(:not(.spc-legacy *)) { outline: 3px solid #ffb703; outline-offset: 2px; }
.spc svg:where(:not(.spc-legacy *)) { display: block; flex: none; }
.spc .spc-flag { display: block; width: 26px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); flex: none; }
.spc .spc-hero { background: radial-gradient(1200px 500px at 70% 0, var(--navy-2), var(--navy) 70%); padding: 48px 16px 64px; }
.spc .spc-wrap { max-width: 1180px; margin: 0 auto; }
.spc .spc-hero h1 { color: #fff; font-size: clamp(26px, 4vw, 40px); line-height: 1.15; letter-spacing: -.02em; text-align: center; margin: 0 auto 12px; max-width: 760px; }
.spc .spc-lead { color: #cdd7f6; text-align: center; font-size: 17px; margin: 0 0 28px; }
.spc .spc-lead b { color: #fff; }
.spc .spc-calc { background: #fff; border-radius: 20px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45); overflow: hidden; }
.spc .spc-kinds { display: flex; gap: 4px; padding: 8px 8px 0; background: #f1f4fa; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.spc .spc-kinds::-webkit-scrollbar { display: none; }
.spc .spc-kind { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 18px; border: 0; background: none; border-radius: 12px 12px 0 0; font-weight: 600; font-size: 15px; color: var(--navy); position: relative; white-space: nowrap; }
.spc .spc-kind svg { width: 19px; height: 19px; }
.spc .spc-kind:hover { background: rgba(255, 255, 255, .6); }
.spc .spc-kind.is-on { background: #fff; box-shadow: 0 -1px 0 var(--line), 1px 0 0 var(--line), -1px 0 0 var(--line); }
.spc .spc-kind.is-on::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; background: var(--red); border-radius: 0 0 3px 3px; }
.spc .calc-body { padding: 24px; }
.spc .pane[hidden] { display: none; }
.spc .ot-route { margin-bottom: 16px; }
.spc .ot-route[hidden] { display: none; }
.spc .bar { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 12px; align-items: stretch; }
.spc .route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; min-width: 0; }
.spc .spc-fld { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; padding: 12px 16px; min-height: 76px; text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r); transition: border-color .15s, box-shadow .15s; }
.spc button.spc-fld:hover { border-color: #b9c5ea; }
.spc button.spc-fld:active { transform: translateY(1px); }
.spc .spc-fld.is-err { border-color: var(--red); box-shadow: 0 0 0 3px rgba(215, 25, 31, .12); }
.spc .lbl { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.spc .spc-val { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: var(--navy); min-width: 0; }
.spc .spc-val > span:not(.edit) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.spc .spc-val .ph { color: #8a93b2; font-weight: 500; }
.spc .chev { width: 16px; height: 16px; margin-left: auto; color: var(--muted); }
.spc .swap { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; display: grid; place-items: center; color: var(--blue); transition: transform .25s; }
.spc .swap svg { width: 18px; height: 18px; }
.spc .swap:hover { border-color: var(--blue); }
.spc .swap.is-in { transform: rotate(180deg); }
.spc .fld-what .spc-val { font-size: 15px; justify-content: space-between; }
.spc .fld-what #what-txt { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.spc .fld-what #what-txt.ph { font-size: 18px; display: block; white-space: nowrap; }
.spc .edit { font-size: 13px; font-weight: 600; color: var(--blue); background: var(--blue-50); padding: 5px 10px; border-radius: 999px; flex: none; }
.spc .seg { display: flex; gap: 6px; flex: 1; min-width: 0; }
.spc .seg button { flex: 1; padding: 8px 10px; border-radius: 9px; border: 1.5px solid var(--line); background: #fff; font-weight: 600; color: var(--navy); white-space: nowrap; }
.spc .seg button small { font-weight: 500; color: var(--muted); }
.spc .seg button.is-on { border-color: var(--blue); background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue); }
.spc .qty { display: inline-flex; align-items: center; gap: 4px; background: #f3f5fa; border-radius: 999px; padding: 3px; flex: none; }
.spc .qty button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: #fff; font-size: 18px; font-weight: 600; color: var(--blue); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); display: grid; place-items: center; line-height: 1; }
.spc .qty button:disabled { color: #c3c9da; box-shadow: none; background: transparent; }
.spc .qty b { min-width: 26px; text-align: center; font-size: 15px; white-space: nowrap; }
.spc .qty b small { font-weight: 500; color: var(--muted); font-size: 12px; }
.spc .go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 28px; min-height: 76px; border: 0; border-radius: var(--r); background: var(--red); color: #fff; font-weight: 700; font-size: 17px; box-shadow: 0 10px 24px -8px rgba(215, 25, 31, .6); white-space: nowrap; transition: background .15s, transform .1s; }
.spc .go:hover { background: var(--red-d); }
.spc .go:active { transform: translateY(1px); }
.spc .go svg { width: 20px; height: 20px; }
.spc .results { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--line); animation: spc-rise .35s ease-out; }
.spc .res-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 14px; }
.spc .res-head b { font-size: 17px; color: var(--navy); }
.spc .res-head span { font-size: 14px; color: var(--muted); }
.spc .res-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.spc .rc { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n p" "d d" "t t" "by by"; gap: 4px 10px; text-align: left; padding: 16px; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.spc .rc:hover { border-color: #b9c5ea; transform: translateY(-1px); }
.spc .rc.is-on { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-100); background: linear-gradient(#fff, #fbfcff); }
.spc .rc.is-on::after { content: ""; position: absolute; top: 16px; right: -1px; width: 0; height: 0; }
.spc .rc-n { grid-area: n; font-weight: 700; font-size: 16px; color: var(--navy); }
.spc .rc-p { grid-area: p; font-weight: 800; font-size: 22px; color: var(--navy); letter-spacing: -.02em; }
.spc .rc-d { grid-area: d; font-size: 13px; color: var(--muted); }
.spc .rc-t { grid-area: t; font-size: 14px; color: var(--ink); margin-top: 6px; }
.spc .rc-by { grid-area: by; font-size: 12px; color: #8a93b2; }
.spc .badge { position: absolute; top: -10px; left: 14px; font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 3px 8px; border-radius: 999px; background: var(--ok); color: #fff; }
.spc .badge-f { background: var(--blue); }
.spc .rc-quote { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 18px 20px; border-radius: var(--r); background: var(--amber-50); color: var(--amber); }
.spc .rc-quote p { margin: 0; font-weight: 500; }
.spc .bar-oil { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.spc .sub-h { margin: 22px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.spc .oil-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 280px)); gap: 10px; }
.spc .oc { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color .15s, background .15s; }
.spc .oc.is-on { border-color: var(--blue); background: var(--blue-50); }
.spc .oc-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #fff7df; color: #a87700; margin-bottom: 8px; }
.spc .oc-ic svg { width: 22px; height: 22px; }
.spc .oc-n { font-weight: 700; font-size: 15px; color: var(--navy); }
.spc .oc-d { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.spc .oc .qty { margin-top: auto; }
.spc .oc.is-on .qty { background: #fff; }
.spc .oil-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; }
.spc .oil-total { margin: 0; font-size: 14px; color: var(--muted); }
.spc .oil-total b { color: var(--navy); }
.spc .note { margin: 0; font-size: 14px; padding: 10px 14px; border-radius: var(--r-s); background: var(--amber-50); color: var(--amber); }
.spc .qcard { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding: 22px 24px; border-radius: var(--r); background: var(--blue-50); }
.spc .qcard h3 { margin: 0 0 6px; color: var(--navy); font-size: 20px; }
.spc .qcard p { margin: 0; max-width: 640px; color: var(--muted); line-height: 1.5; }
.spc .assure { list-style: none; margin: 0; padding: 14px 24px; display: flex; flex-wrap: wrap; gap: 8px 26px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.spc .assure li { display: flex; align-items: center; gap: 7px; }
.spc .assure li::before { content: ""; width: 14px; height: 8px; border: solid var(--ok); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translateY(-2px); }
.spc .assure a { color: inherit; }
.spc .dlg { width: min(560px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 48px)); padding: 0; border: 0; border-radius: 20px; box-shadow: 0 40px 80px -20px rgba(10, 16, 50, .5); color: var(--ink); flex-direction: column; }
.spc .dlg[open] { display: flex; animation: spc-pop .22s ease-out; }
.spc .dlg::backdrop { background: rgba(12, 20, 55, .55); backdrop-filter: blur(3px); }
.spc .dlg-wide { width: min(760px, calc(100vw - 32px)); }
.spc .dlg-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.spc .dlg-hd h2 { margin: 0; font-size: 19px; color: var(--navy); }
.spc .dlg-x { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #f1f4fa; font-size: 22px; line-height: 1; color: var(--muted); }
.spc .dlg-x:hover { background: var(--blue-100); color: var(--navy); }
.spc .dlg-bd { padding: 16px 20px 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.spc .dlg-ft { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--line); background: #fbfcfe; }
.spc .dlg-sub { margin: 18px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.spc .dlg-hint { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.spc .search { display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; position: sticky; top: -16px; z-index: 1; box-shadow: 0 -16px 0 #fff; }
.spc .search:focus-within { border-color: var(--blue); }
.spc .search svg { width: 18px; height: 18px; color: var(--muted); }
.spc .search input { flex: 1; border: 0; outline: 0; padding: 13px 0; font: inherit; font-size: 16px; background: none; color: var(--ink); }
.spc .cc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.spc .cc { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; text-align: left; }
.spc .cc:hover { border-color: var(--blue); background: var(--blue-50); }
.spc .cc .cn { font-weight: 700; color: var(--navy); }
.spc .cc .cp { font-size: 13px; color: var(--ok); font-weight: 600; }
.spc .cl-list { display: flex; flex-direction: column; }
.spc .cl { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border: 0; border-bottom: 1px solid #eef1f7; background: none; text-align: left; border-radius: 8px; }
.spc .cl:hover { background: var(--blue-50); }
.spc .cl.is-on { background: var(--blue-50); box-shadow: inset 3px 0 0 var(--blue); }
.spc .cl .cn { font-weight: 600; color: var(--navy); }
.spc .cl .cp { margin-left: auto; font-size: 13px; color: var(--muted); }
.spc .cl .tag { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ok); background: var(--ok-50); padding: 3px 8px; border-radius: 999px; }
.spc .empty { color: var(--muted); padding: 16px 4px; margin: 0; }
.spc .sz-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; transition: opacity .2s; }
.spc .kind-ics { display: flex; align-items: center; gap: 5px; margin-right: 2px; }
.spc .cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 5px; margin-bottom: 14px; border-radius: 14px; background: var(--navy); }
.spc .cat { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 10px; border: 0; border-radius: 10px; background: none; font-weight: 700; font-size: 15px; color: #fff; transition: background .15s, color .15s, box-shadow .15s; }
.spc .cat svg { width: 18px; height: 18px; }
.spc .cat:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.spc .cat.has { color: #fff; }
.spc .cat.is-on, .spc .cat.is-on:hover { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(20, 25, 58, .1), 0 0 0 1.5px var(--blue); }
.spc .cat-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 12px; display: inline-grid; place-items: center; }
.spc .cat:not(.is-on) .cat-n { background: #fff; color: var(--navy); }
.spc .sz-list.is-one { grid-template-columns: minmax(0, 340px); }
.spc .sz { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color .15s, background .15s; }
.spc .sz.is-on { border-color: var(--blue); background: var(--blue-50); }
.spc .sz-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.spc .sz-hd b { display: block; color: var(--navy); font-size: 16px; }
.spc .sz-hd small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.spc .sz-ic { flex: none; border: 2px solid #9aa9d8; border-radius: 4px; background: linear-gradient(#e7ecfa, #d6def5); }
.spc .sz-s { width: 24px; height: 18px; }
.spc .sz-m { width: 32px; height: 24px; }
.spc .sz-l { width: 40px; height: 32px; }
.spc .sz-f { width: 34px; height: 24px; }
.spc .zr > span { white-space: nowrap; }
.spc .zr { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px 6px 10px; border-radius: 10px; font-size: 14px; color: var(--ink); }
.spc .zr.has { background: #fff; font-weight: 600; }
.spc .sz.is-on .zr .qty { background: #fff; }
.spc .sz.is-on .zr.has .qty { background: var(--blue-50); }
.spc .more-t { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 14px; border: 1.5px dashed #b9c5ea; border-radius: 999px; background: #fff; color: var(--blue); font-weight: 600; font-size: 14px; }
.spc .more-t svg { width: 16px; height: 16px; transition: transform .2s; }
.spc .more-t.is-on svg { transform: rotate(45deg); }
.spc .dlg-bd .note { margin-top: 14px; }
.spc .exl-hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 22px 0 10px; }
.spc .exl-hd > b { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.spc .exl-hd span { font-size: 13px; color: var(--muted); }
.spc .exl { display: flex; flex-direction: column; gap: 8px; }
.spc .exr { display: grid; grid-template-columns: 92px 72px repeat(4, minmax(0, 1fr)) 38px; grid-template-areas: "n q kg l w h x" ". f f f f f ."; align-items: end; gap: 6px 10px; padding: 12px 14px; border: 1.5px solid var(--blue-100); border-radius: var(--r); background: var(--blue-50); }
.spc .exr.is-new { animation: spc-rise .25s ease-out; }
.spc .exr.is-err { border-color: var(--red); background: #fff4f4; }
.spc .exr-n { grid-area: n; align-self: center; font-weight: 700; color: var(--navy); font-size: 15px; }
.spc .exr label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.spc .exr label:nth-of-type(1) { grid-area: kg; }
.spc .exr label:nth-of-type(2) { grid-area: l; }
.spc .exr label:nth-of-type(3) { grid-area: w; }
.spc .exr label:nth-of-type(4) { grid-area: h; }
.spc .exr label.is-q { grid-area: q; }
.spc .exr select { width: 100%; padding: 10px 8px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; }
.spc .exr select:focus { outline: 0; border-color: var(--blue); }
.spc .exr input { width: 100%; padding: 10px 11px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; }
.spc .exr input:focus { outline: 0; border-color: var(--blue); }
.spc .exr.is-err input.is-miss { border-color: var(--red); }
.spc .exr-x { grid-area: x; width: 38px; height: 42px; border: 0; border-radius: 10px; background: #fff; color: var(--muted); font-size: 20px; line-height: 1; }
.spc .exr-x:hover { background: #ffe4e4; color: var(--red); }
.spc .exr-fit { grid-area: f; font-size: 12.5px; color: var(--ok); font-weight: 600; min-height: 0; }
.spc .exr-fit:empty { display: none; }
.spc .exr-fit.is-over { color: var(--amber); }
.spc .exr-fit.is-err { color: var(--red); }
.spc .dw-sum { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.spc .dw-sum-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.spc .dw-sum b { color: var(--navy); font-size: 14px; }
.spc #dw-price { color: var(--ok); font-size: 13px; font-weight: 600; }
.spc .dlg-ft { align-items: flex-end; }
.spc .bd-tog { border: 0; background: none; padding: 0; color: var(--blue); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.spc .bd { list-style: none; margin: 4px 0 2px; padding: 4px 0; max-width: 520px; max-height: 168px; overflow-y: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); animation: spc-rise .2s ease-out; }
.spc .bd li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 6px 0; }
.spc .bd li + li { border-top: 1px dashed var(--line); }
.spc .bd-q { font-weight: 800; color: var(--blue); font-size: 14px; }
.spc .bd-t { display: flex; flex-direction: column; min-width: 0; }
.spc .bd-t b { font-size: 14px; color: var(--navy); }
.spc .bd-t small { font-size: 12.5px; color: var(--muted); }
.spc .bd-p { font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.spc .btn-ok { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border: 0; border-radius: 12px; background: var(--blue); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.spc .btn-ok:hover { background: var(--navy-2); }
.spc .btn-ok:disabled { background: #c3c9da; }
.spc .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; box-shadow: var(--sh); font-size: 14px; max-width: calc(100vw - 32px); animation: spc-rise .25s ease-out; }
@keyframes spc-rise {from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; }}
.spc .toast { animation-name: spc-toast; }
@keyframes spc-toast {from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); }}
@keyframes spc-pop {from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; }}
@keyframes spc-sheet {from { transform: translateY(100%); } to { transform: none; }}
@media (max-width: 1040px) {
  .spc .bar { grid-template-columns: 1fr 1fr; }
  .spc .route { grid-column: 1 / -1; }
  .spc .go { min-height: 64px; }
  .spc .bar-oil .go { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .spc .spc-hero { padding: 32px 12px 40px; }
  .spc .calc-body { padding: 16px; }
  .spc .spc-kind { padding: 12px 14px; font-size: 14px; flex: 0 0 auto; }
  .spc .bar, .spc .bar-oil { grid-template-columns: 1fr; }
  .spc .route { grid-template-columns: 1fr; gap: 0; }
  .spc .route .spc-fld:first-child { border-radius: var(--r) var(--r) 0 0; border-bottom-width: .75px; }
  .spc .route .spc-fld:last-child { border-radius: 0 0 var(--r) var(--r); border-top-width: .75px; }
  .spc .swap { position: absolute; right: 14px; transform: translateY(-50%) rotate(90deg); z-index: 1; }
  .spc .swap.is-in { transform: translateY(-50%) rotate(270deg); }
  .spc .route { position: relative; }
  .spc .route .swap { top: 50%; }
  .spc .spc-fld { min-height: 64px; }
  .spc .go { width: 100%; min-height: 56px; }
  .spc .res-cards { grid-template-columns: 1fr; }
  .spc .rc { grid-template-areas: "n p" "d d" "t t"; }
  .spc .rc-by { display: none; }
  .spc .oil-grid { grid-template-columns: 1fr; gap: 8px; }
  .spc .oc { display: grid; grid-template-columns: 40px 1fr auto; grid-template-areas: "ic n q" "ic d q"; align-items: center; column-gap: 12px; padding: 12px; }
  .spc .oc-ic { grid-area: ic; margin: 0; }
  .spc .oc-n { grid-area: n; }
  .spc .oc-d { grid-area: d; margin: 0; }
  .spc .oc .qty { grid-area: q; margin: 0; }
  .spc .sz-list, .spc .sz-list.is-one { grid-template-columns: 1fr; }
  .spc .cat { flex-direction: column; gap: 4px; font-size: 13px; padding: 9px 4px; position: relative; }
  .spc .cat-n { position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; font-size: 11px; padding: 0 5px; }
  .spc .exr { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "n n x" "q kg kg" "l w h" "f f f"; }
  .spc .exr-x { justify-self: end; }
  .spc .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spc .assure { padding: 12px 16px; gap: 6px 16px; font-size: 13px; }
  .spc .dlg, .spc .dlg-wide { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .spc .dlg[open] { animation: spc-sheet .28s cubic-bezier(.2, .8, .2, 1); }
  .spc .dlg-ft { flex-direction: column; align-items: stretch; gap: 10px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .spc .dlg-ft .btn-ok { width: 100%; }
  .spc .bd { max-width: none; max-height: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .spc *, .spc *::before, .spc *::after { animation: none !important; transition: none !important; }
}

.spc .spc-hero { padding-top: calc(var(--hdr-total, 110px) + clamp(32px, 4vw, 56px)); }
.spc .fld-c { position: relative; }
.spc .spc-hint { position: absolute; top: -11px; right: 12px; z-index: 2; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 3px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 14px -4px rgba(216, 12, 24, .5); animation: spc-bob 1.6s ease-in-out 3; }
.spc .cp.is-wait { display: inline-flex; align-items: center; min-height: 16px; }
.spc .cp-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--blue-100); border-top-color: var(--blue); border-radius: 50%; animation: spc-spin .7s linear infinite; }
@keyframes spc-spin { to { transform: rotate(360deg); } }
.spc .go.is-wait { opacity: .8; }
@keyframes spc-bob { 50% { transform: translateY(-3px); } }
@media (max-width: 720px) {
  .spc .spc-hero { padding-top: calc(var(--hdr-total, 64px) + 18px); }
  .spc .spc-hint { right: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .spc .spc-hint { animation: none; }
  .spc .cp-spin { animation: spc-spin 1.4s linear infinite !important; }
}

#main#main .sp-platform.spc-legacy { padding-bottom: 0; background: transparent; }
.spc .spc-ks { display: none; }
@media (max-width: 720px) {
  .spc .spc-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 6px 6px 0; overflow: visible; }
  .spc .spc-kind { flex-direction: column; gap: 5px; min-width: 0; padding: 10px 4px 9px; font-size: 12.5px; line-height: 1.15; white-space: normal; text-align: center; }
  .spc .spc-kind svg { width: 20px; height: 20px; }
  .spc .kind-ics { margin-right: 0; gap: 3px; }
  .spc .spc-kind.is-on::before { left: 12px; right: 12px; }
  .spc .spc-kl { display: none; }
  .spc .spc-ks { display: inline; }
}
@media (max-width: 360px) {
  .spc .spc-kind { font-size: 11.5px; padding: 9px 2px 8px; }
  .spc .spc-kind svg { width: 18px; height: 18px; }
}
.spc .spc-anchor { display: block; height: 0; scroll-margin-top: calc(var(--hdr-total, 110px) + 16px); }

.spc .spc-hero { position: relative; overflow: hidden; }
.spc .spc-hero > .spc-wrap { position: relative; z-index: 1; }
.spc .spc-routes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55; overflow: hidden; }
.spc .spc-routes path { fill: none; stroke: rgba(127, 168, 240, .45); stroke-width: 1.4; stroke-dasharray: 3 7; }
.spc .spc-routes .spc-pulse { fill: #e8a33d; }
@media (prefers-reduced-motion: reduce) {
  .spc .spc-routes .spc-pulse { display: none; }
}

.spc .dlg-hint { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r-s); background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--navy); font-size: 15px; line-height: 1.45; }
.spc .dlg-hint svg { width: 20px; height: 20px; margin-top: 1px; color: var(--blue); }
.spc .dlg-hint b { font-weight: 700; }
.spc .more-t { margin-top: 18px; padding: 12px 18px; border: 2px solid var(--blue); border-radius: 999px; background: var(--blue-50); color: var(--blue); font-weight: 700; font-size: 15px; box-shadow: 0 4px 12px -6px rgba(35, 70, 184, .45); }
.spc .more-t:hover { background: var(--blue); color: #fff; }
.spc .more-t svg { width: 18px; height: 18px; }
.spc .bd li { grid-template-columns: 30px 1fr auto 30px; }
.spc .bd-x { width: 28px; height: 28px; border-radius: 50%; border: 0; background: #f1f4fa; color: var(--muted); font-size: 18px; line-height: 1; display: grid; place-items: center; grid-column: 4; }
.spc .bd-x:hover { background: #fde8e8; color: var(--red); }
.spc .oil-total { line-height: 1.5; }
.spc .dw-sum-h { align-items: center; }
.spc .dw-sum-h .bd-x { width: 26px; height: 26px; font-size: 17px; }
.spc .chk.sp-nomail { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; font-size: 14px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.spc .chk.sp-nomail input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--navy); }

/* #17194 (64857, 10/11/2026) — «Ξεκινήστε εδώ» και στο πεδίο νομού (το JS το βάζει πάντα στο αριστερό πεδίο). */
.spc .fld-gr { position: relative; }
/* #17194 (64857) — Ελαιόλαδο σε κινητό: το «Υπολογίστε τιμή» μετά το «Τι περιέχει η αποστολή». */
@media (max-width: 720px) {
  .spc #pane-ladi:not([hidden]) { display: flex; flex-direction: column; }
  .spc #pane-ladi .bar-oil { display: contents; }
  .spc #pane-ladi #oil-nomos { margin-bottom: 12px; }
  .spc #pane-ladi #oil-go { order: 1; margin-top: 16px; }
}