/*
 * Every service (/services) and one service (/service/{slug}), October 2026
 * design. Loaded after storefront.css, whose tokens and header it shares.
 * Measurements are the Figma frame's at 1440px.
 */

body.sf-svc-page, body.sf-svd-page { background: #F3F4F6; font-family: var(--sf-font); }
.sf-emoji { display: inline-block; flex: none; vertical-align: middle; }

/* ------------------------------------------------------------- /services */

.sf-svc { width: min(1224px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 133px; color: var(--sf-ink); }
.sf-svc__crumbs { min-height: 20px; gap: 4px; color: #62748E; font-size: 13px; line-height: 20px; }
.sf-svc__crumbs a { color: #1A4D82; }
.sf-svc__crumbs a:hover { text-decoration: underline; }
.sf-svc__crumbs b { color: #62748E; font-weight: 400; }
.sf-svc__crumbs .sf-ico { width: 12px; height: 12px; color: #90A1B9; }
[dir="ltr"] .sf-svc__crumbs .sf-ico { transform: scaleX(-1); }

.sf-svc__head { margin-top: 30px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.sf-svc__head h1 { margin: 0; color: #020618; font: 900 32px/44px var(--sf-display); }
.sf-svc__head h1 + p { margin: 0; color: #62748E; font: 400 14px/22px var(--sf-font); }
.sf-svc__count { margin: 23px 0 0; flex: none; color: #90A1B9; font: 400 13px/22px var(--sf-font); }

.sf-svc__search { position: relative; width: min(704px, 100%); height: 54px; margin-top: 38px; }
.sf-svc__search input { width: 100%; height: 100%; padding: 0 16px 0 52px; border: 1px solid #E2E5EA; border-radius: 16px; background: #F5F6F8; color: var(--sf-gray-900); font: 400 14px/20px var(--sf-font); outline: 0; -webkit-appearance: none; appearance: none; }
[dir="ltr"] .sf-svc__search input { padding: 0 52px 0 16px; }
.sf-svc__search input::placeholder { color: #90A1B9; }
.sf-svc__search input:focus { border-color: #58A1D3; background: #fff; box-shadow: 0 0 0 3px rgba(88, 161, 211, .15); }
.sf-svc__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sf-svc__search .sf-ico { position: absolute; top: 17px; left: 17px; width: 20px; height: 20px; color: #90A1B9; pointer-events: none; }
[dir="ltr"] .sf-svc__search .sf-ico { left: auto; right: 17px; }

.sf-svc__tabs { margin-top: 50px; padding-inline-start: 22px; display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.sf-svc__tabs::-webkit-scrollbar { display: none; }
.sf-svc__tabs button { height: 44px; flex: none; display: inline-block; padding: 0 21px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: #62748E; font: 500 14px/42px var(--sf-font); white-space: nowrap; cursor: pointer; }
.sf-svc__tabs button:hover { color: var(--sf-ink); }
.sf-svc__tabs button.is-active { border-bottom-color: #0F2036; color: #020618; font-weight: 700; }
.sf-svc__tabs small { font: inherit; }

.sf-svc__body { margin-top: 24px; display: flex; align-items: flex-start; gap: 24px; }
.sf-svc__more { display: none; }
.sf-svc__filters { width: 288px; flex: none; display: flex; flex-direction: column; gap: 20px; }
.sf-svc__results { min-width: 0; flex: 1; }

.sf-svc-filter { padding: 20px 20px 15px; border: 1px solid #E9EBEE; border-radius: 16px; background: #fff; }
.sf-svc-filter h2 { margin: 0 0 4px; color: var(--sf-ink); font: 700 16px/24px var(--sf-font); }

.sf-svc-switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline-start: 28px; cursor: pointer; }
.sf-svc-switch span { color: #1D293D; font: 400 14px/22px var(--sf-font); }
.sf-svc-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.sf-svc-switch i { position: relative; width: 44px; height: 22px; flex: none; border-radius: 11px; background: #CAD5E2; transition: background .15s; }
.sf-svc-switch i::after { content: ""; position: absolute; top: 2px; right: 24px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); transition: right .15s; }
.sf-svc-switch input:checked + i { background: #58A1D3; }
.sf-svc-switch input:checked + i::after { right: 2px; }
[dir="ltr"] .sf-svc-switch i { transform: scaleX(-1); }
.sf-svc-switch input:focus-visible + i { outline: 2px solid #58A1D3; outline-offset: 2px; }
.sf-svc-filter:first-child { padding-bottom: 19px; }
.sf-svc-filter:first-child h2 { margin-bottom: 8px; }

.sf-svc-check { height: 30px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.sf-svc-check input { width: 16px; height: 16px; flex: none; margin: 0; border: 1.5px solid #CAD5E2; border-radius: 4px; background: #fff; -webkit-appearance: none; appearance: none; cursor: pointer; }
.sf-svc-check input:checked { border-color: #58A1D3; background: #58A1D3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.sf-svc-check input:focus-visible { outline: 2px solid #58A1D3; outline-offset: 2px; }
.sf-svc-check span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1D293D; font: 400 14px/20px var(--sf-font); text-align: start; }
[dir="rtl"] .sf-svc-check span { text-align: right; }
.sf-svc-check small { flex: none; color: #90A1B9; font: 400 12px/16px var(--sf-font); }

.sf-svc-range { padding-bottom: 43px; }
.sf-svc-range h2 { margin-bottom: 10px; }
.sf-svc-range__values { margin: 0; display: flex; justify-content: space-between; gap: 8px; color: #90A1B9; font: 400 12px/18px var(--sf-font); }
.sf-svc-range__values output { white-space: nowrap; }
.sf-svc-range__track { --from: 0%; --to: 100%; position: relative; height: 17px; margin-top: 10px; }
.sf-svc-range__track::before { content: ""; position: absolute; inset: 4px 0; border-radius: 5px; background: linear-gradient(to left, #C3C3C3 var(--from), #06172E var(--from), #06172E var(--to), #C3C3C3 var(--to)); }
[dir="ltr"] .sf-svc-range__track::before { background: linear-gradient(to right, #C3C3C3 var(--from), #06172E var(--from), #06172E var(--to), #C3C3C3 var(--to)); }
.sf-svc-range__track input { position: absolute; inset: 0; width: 100%; height: 17px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.sf-svc-range__track input::-webkit-slider-runnable-track { height: 17px; background: none; }
.sf-svc-range__track input::-webkit-slider-thumb { width: 17px; height: 17px; border: 0; border-radius: 50%; background: #58A1D3; box-shadow: 0 1px 3px rgba(6, 23, 46, .25); pointer-events: auto; cursor: grab; -webkit-appearance: none; appearance: none; }
.sf-svc-range__track input::-moz-range-thumb { width: 17px; height: 17px; border: 0; border-radius: 50%; background: #58A1D3; pointer-events: auto; cursor: grab; }
.sf-svc-range__track input::-moz-range-track { background: none; }
.sf-svc-range__track input:focus-visible::-webkit-slider-thumb { outline: 2px solid #06172E; outline-offset: 2px; }

.sf-svc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sf-svc-card { position: relative; min-width: 0; height: 254px; padding: 23px 13px 23px 13px; display: flex; flex-direction: column; align-items: stretch; border: 1px solid #878787; border-radius: 12px; background: rgba(247, 250, 253, .8); transition: box-shadow .15s, transform .15s; }
.sf-svc-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(6, 23, 46, .08); }
.sf-svc-card:focus-within { outline: 2px solid #58A1D3; outline-offset: 2px; }
.sf-svc-card__icon { width: 39px; height: 42px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 70px; background: rgba(231, 233, 235, .62); color: #004078; opacity: .85; font-style: normal; }
.sf-svc-card__icon span { width: 22px; height: 26px; background: #004078; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.sf-svc-card__icon b { color: #004078; font: 800 17px/1 var(--sf-latin); }
.sf-svc-card__icon img { width: 100%; height: 100%; object-fit: cover; }
.sf-svc-card__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-svc-card h3 { margin: 17px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #000; font: 700 16px/19px var(--sf-font); text-align: start; unicode-bidi: plaintext; }
[dir="rtl"] .sf-svc-card h3, [dir="rtl"] .sf-svc-card p { text-align: right; }
.sf-svc-card h3 a { color: inherit; outline: 0; }
.sf-svc-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 12px; }
.sf-svc-card p { height: 34px; margin: 17px 0 0; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #58A1D3; font: 400 14px/17px var(--sf-font); unicode-bidi: plaintext; }
.sf-svc-card footer { height: 35px; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf-svc-card__price { min-width: 0; display: inline-flex; align-items: flex-end; gap: 3px; color: #06172E; white-space: nowrap; }
.sf-svc-card__price b { font: 400 14px/17px var(--sf-font); }
.sf-svc-card__price small { font: 400 12px/15px var(--sf-font); }
.sf-svc-card__price.is-off b { color: #90A1B9; }
.sf-svc-card__order { position: relative; z-index: 1; height: 35px; min-width: 82px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: 8px; background: #58A1D3; color: #fff; font: 400 12px/15px var(--sf-font); }
.sf-svc-card__order:hover { background: #4A93C6; }
.sf-svc-card.is-off .sf-svc-card__order { background: #CAD5E2; }

.sf-svc__empty { padding: 64px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; border: 1px dashed #CAD5E2; border-radius: 16px; background: #fff; color: #62748E; text-align: center; }
.sf-svc__empty .sf-ico { width: 32px; height: 32px; color: #90A1B9; }
.sf-svc__empty p { margin: 0; font: 400 14px/22px var(--sf-font); }
.sf-svc__empty button { height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: #58A1D3; color: #fff; font: 500 13px/20px var(--sf-font); cursor: pointer; }

.sf-svc__pager { margin-top: 76px; display: flex; justify-content: center; gap: 4px; }
.sf-svc__pager > span { display: flex; gap: 4px; }
.sf-svc__pager button { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid #E2E4E8; border-radius: 10px; background: #F5F6F8; color: #06172E; font: 500 14px/20px var(--sf-font); cursor: pointer; }
.sf-svc__pager button:hover:not(:disabled):not([aria-current]) { border-color: #CAD5E2; background: #fff; }
.sf-svc__pager button[aria-current="page"] { border-color: #06172E; background: #06172E; color: #fff; }
.sf-svc__pager button:disabled { color: #CAD5E2; cursor: default; }
.sf-svc__pager .sf-ico { width: 18px; height: 18px; }
[dir="ltr"] .sf-svc__pager .sf-ico { transform: scaleX(-1); }

@media (max-width: 1100px) {
  .sf-svc__body { flex-direction: column; }
  .sf-svc__filters { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .sf-svc__results { width: 100%; }
  .sf-svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sf-svc { padding: 20px 0 64px; }
  .sf-svc__head { margin-top: 16px; flex-direction: column; gap: 4px; }
  .sf-svc__head h1 { font-size: 26px; line-height: 38px; }
  .sf-svc__count { margin: 0; }
  .sf-svc__search { margin-top: 20px; height: 48px; }
  .sf-svc__search .sf-ico { top: 14px; }
  .sf-svc__tabs { margin-top: 20px; gap: 4px; }
  .sf-svc__tabs button { padding: 0 12px 2px; }
  .sf-svc__more { width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #E2E5EA; border-radius: 12px; background: #fff; color: #1D293D; font: 600 14px/20px var(--sf-font); cursor: pointer; }
  .sf-svc__more .sf-ico { width: 18px; height: 18px; }
  .sf-svc__more[aria-expanded="true"] { border-color: #58A1D3; color: #1A4D82; }
  .sf-svc__body { gap: 16px; }
  .sf-svc__filters { grid-template-columns: minmax(0, 1fr); }
  .sf-svc__filters:not(.is-open) { display: none; }
  .sf-svc__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sf-svc-card { height: auto; min-height: 220px; }
  .sf-svc__pager { margin-top: 32px; }
}

/* ------------------------------------------------------- /service/{slug} */

.sf-svd { width: min(1224px, calc(100% - 32px)); margin: 0 auto; padding: 35px 0 120px; display: flex; align-items: flex-start; gap: 24px; color: var(--sf-ink); }
.sf-svd__main { min-width: 0; flex: 1; }
.sf-svd__side { width: 392px; flex: none; margin-top: 37px; display: flex; flex-direction: column; gap: 24px; }
.sf-svd__side > .sf-svd-price { margin-bottom: -9px; }

.sf-svd__head { display: flex; flex-direction: column; }
.sf-svd__id { display: flex; align-items: flex-start; gap: 28px; }
.sf-svd__tile { position: relative; width: 88px; height: 88px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 22px; background: color-mix(in srgb, var(--brand) 6%, #F3F4F6); box-shadow: 0 10px 24px rgba(6, 23, 46, .08); color: #0F3D6E; font-style: normal; }
.sf-svd__tile span { width: 36px; height: 36px; background: var(--brand); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.sf-svd__tile b { color: var(--brand); font: 900 34px/1 var(--sf-latin); }
.sf-svd__tile img { width: 100%; height: 100%; object-fit: cover; }
.sf-svd__tile svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sf-svd__tile.is-plain { background: #E8EEF6; }
.sf-svd__name { min-width: 0; flex: 1; }
.sf-svd__badges { margin: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.sf-svd__badges span { height: 22px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 11px; font: 600 12px/16px var(--sf-font); }
.sf-svd__badges .is-deal { background: #FFE2E2; color: #E7000B; }
.sf-svd__badges .is-on { background: #DCFCE7; color: #016630; }
.sf-svd__badges .is-idle { background: #E2E8F0; color: #45556C; }
.sf-svd__badges .is-brand { background: color-mix(in srgb, var(--brand) 10%, #F3F4F6); color: color-mix(in srgb, var(--brand) 74%, #000); }
.sf-svd__name h1 { margin: 6px 0 0; color: #020618; font: 900 32px/44px var(--sf-display); text-align: start; unicode-bidi: plaintext; overflow-wrap: anywhere; }
[dir="rtl"] .sf-svd__name h1, [dir="rtl"] .sf-svd__sub { text-align: right; }
.sf-svd__sub { margin: 8px 0 0; color: #62748E; font: 400 16px/24px var(--sf-font); unicode-bidi: plaintext; }
.sf-svd__rating { margin: 17px 0 0; align-self: flex-end; display: flex; align-items: center; gap: 12px; color: #90A1B9; font: 400 14px/20px var(--sf-font); }
.sf-svd__rating > i { width: 1px; height: 14px; background: #CAD5E2; }
.sf-svd__rating b { color: #0F172B; font: 700 15px/20px var(--sf-font); }
.sf-svd__stars { display: inline-flex; gap: 1px; }
.sf-svd__stars svg { width: 17px; height: 17px; fill: #E2E8F0; }
.sf-svd__stars svg.is-on { fill: #F59E0B; }

.sf-svd__chips { margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; list-style: none; }
.sf-svd__chips li { height: 30px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 13px; border-radius: 15px; background: #EFF6FF; color: #0B3A6E; font: 400 13px/20px var(--sf-font); white-space: nowrap; }
.sf-svd__chips .sf-emoji { width: 13px; height: 13px; }

.sf-svd__tabs { margin-top: 32px; overflow: hidden; border: 1px solid #E5E7EB; border-radius: 16px; background: #fff; }
.sf-svd__tablist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid #F0F1F2; }
.sf-svd__tablist button { height: 54px; padding: 0 12px 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: #fff; color: #62748E; font: 500 14px/20px var(--sf-font); cursor: pointer; }
.sf-svd__tablist button:hover { color: #020618; }
.sf-svd__tablist button[aria-selected="true"] { border-bottom-color: #0F2036; background: #FAFAFB; color: #020618; font-weight: 700; }
.sf-svd__pane { padding: 82px 24px 82px 33px; }
[dir="ltr"] .sf-svd__pane { padding: 82px 33px 82px 24px; }
.sf-svd__pane > section + section, .sf-svd__pane > section + aside { margin-top: 32px; }
.sf-svd__pane h2 { margin: 0 0 14px; color: #020618; font: 700 18px/28px var(--sf-font); }
.sf-svd__about p, .sf-svd__article { margin: 0; color: #314158; font: 400 14px/26px var(--sf-font); }
.sf-svd__article > :first-child { margin-top: 0; }
.sf-svd__article > :last-child { margin-bottom: 0; }
.sf-svd__article img { max-width: 100%; height: auto; border-radius: 12px; }
.sf-svd__article a { color: #1A4D82; text-decoration: underline; }

.sf-svd__steps { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; list-style: none; }
.sf-svd__steps li { display: flex; align-items: center; gap: 14px; }
.sf-svd__steps li > b { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #58A1D3; color: #fff; font: 700 16px/1 var(--sf-font); }
.sf-svd__steps h3 { margin: 0; color: #020618; font: 700 14px/20px var(--sf-font); }
.sf-svd__steps p { margin: 0; color: #62748E; font: 400 13px/18px var(--sf-font); }

.sf-svd__features { margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; list-style: none; }
.sf-svd__features li { min-width: 0; display: flex; align-items: center; gap: 12px; color: #314158; font: 400 14px/20px var(--sf-font); }
.sf-svd__features .sf-ico { width: 20px; height: 20px; flex: none; padding: 5px; border-radius: 50%; background: #DCFCE7; color: #016630; stroke-width: 3; }

.sf-svd__links { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sf-svd__links a { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 1px solid #BEDBFF; border-radius: 12px; background: #EFF6FF; color: #1A4D82; font: 500 14px/20px var(--sf-font); }
.sf-svd__links a:hover { background: #DBEAFE; }
.sf-svd__links .sf-ico { width: 16px; height: 16px; }

.sf-svd__needs { margin-top: 32px; display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px; border: 1px solid #BEDBFF; border-radius: 16px; background: #EFF6FF; }
.sf-svd__needs > img { margin-top: 2px; border-radius: 6px; }
.sf-svd__needs h3 { margin: 0 0 6px; color: #1C398E; font: 700 15px/24px var(--sf-font); }
.sf-svd__needs p { margin: 0; color: #0F172B; font: 400 14px/24px var(--sf-font); }
.sf-svd__needs b { font-weight: 700; }
.sf-svd__needs code { padding: 2px 6px; border-radius: 4px; background: #E2E8F0; font: 600 12px/18px Consolas, "Courier New", monospace; }
.sf-svd__hint { margin: 8px 0 0; color: #62748E; font: 400 13px/22px var(--sf-font); }

.sf-svd__none { margin: 0; color: #62748E; font: 400 14px/24px var(--sf-font); }
.sf-svd__reviews { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; list-style: none; }
.sf-svd__reviews li { padding: 16px 18px; border: 1px solid #E5E7EB; border-radius: 14px; }
.sf-svd__reviews header { display: flex; align-items: center; gap: 12px; }
.sf-svd__reviews header b { color: #020618; font: 700 14px/20px var(--sf-font); }
.sf-svd__reviews time { margin-inline-start: auto; color: #90A1B9; font: 400 12px/18px var(--sf-font); }
.sf-svd__reviews p { margin: 10px 0 0; color: #314158; font: 400 14px/24px var(--sf-font); white-space: pre-line; }

.sf-svd__faq { border-bottom: 1px solid #F0F1F2; }
.sf-svd__faq summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #020618; font: 600 14px/22px var(--sf-font); cursor: pointer; list-style: none; }
.sf-svd__faq summary::-webkit-details-marker { display: none; }
.sf-svd__faq summary .sf-ico { width: 16px; height: 16px; color: #90A1B9; transition: transform .15s; }
.sf-svd__faq[open] summary .sf-ico { transform: rotate(-90deg); }
[dir="ltr"] .sf-svd__faq summary .sf-ico { transform: scaleX(-1); }
[dir="ltr"] .sf-svd__faq[open] summary .sf-ico { transform: rotate(90deg); }
.sf-svd__faq p { margin: 0 0 16px; color: #45556C; font: 400 14px/24px var(--sf-font); }

.sf-svd-card { padding: 20px; border: 1px solid #E7EAEE; border-radius: 16px; background: #F8FAFC; }
.sf-svd-card h2 { margin: 0; color: #020618; font: 700 16px/24px var(--sf-font); }

.sf-svd-price { display: flex; flex-direction: column; }
.sf-svd-price__was { align-self: flex-end; color: #90A1B9; font: 400 14px/20px var(--sf-font); }
.sf-svd-price__now { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.sf-svd-price__now b { color: #020618; font: 900 32px/38px var(--sf-display); }
.sf-svd-price__now small { color: #90A1B9; font: 400 14px/20px var(--sf-font); }
.sf-svd-price__save { margin: 0; color: #00C950; font: 500 13px/20px var(--sf-font); text-align: center; }
.sf-svd-cta { width: 100%; height: 54px; margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border: 0; border-radius: 14px; background: #5EA4D5; color: #fff; font: 700 16px/24px var(--sf-font); cursor: pointer; }
.sf-svd-cta:hover:not(:disabled) { background: #4A93C6; }
.sf-svd-cta:disabled { background: #CAD5E2; cursor: not-allowed; }
.sf-svd-state { margin: 15px 0 0; padding-top: 2px; display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid #ECEEF2; color: #00C950; font: 400 13px/20px var(--sf-font); }
.sf-svd-state i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #00C950; }
.sf-svd-state.is-idle { color: #90A1B9; }
.sf-svd-state.is-idle i { background: #CAD5E2; }
.sf-svd-state.is-end { margin-top: 15px; padding-top: 0; justify-content: flex-end; border-top: 0; font-size: 12px; line-height: 16px; }

.sf-svd-promise { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 17px 20px; }
.sf-svd-promise p { margin: 0; display: flex; align-items: center; gap: 10px; color: #45556C; font: 400 14px/22px var(--sf-font); }

.sf-svd-quick { padding: 20px 20px 21px; background: #fff; }
.sf-svd-quick__row { margin-top: 19px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf-svd-quick__price { display: flex; flex-direction: column; align-items: flex-start; }
.sf-svd-quick__price p { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.sf-svd-quick__price b { color: #020618; font: 900 24px/28px var(--sf-display); }
.sf-svd-quick__price small { color: #90A1B9; font: 400 13px/18px var(--sf-font); }
.sf-svd-quick__price s { color: #90A1B9; font: 400 12px/14px var(--sf-font); }
.sf-svd-quick__off { height: 26px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 13px; background: #FFE2E2; color: #E7000B; font: 700 13px/18px var(--sf-font); }
.sf-svd-quick .sf-svd-cta { margin-top: 20px; }

.sf-svd-related { background: #fff; }
.sf-svd-related h2 { margin-bottom: 9px; text-align: left; }
.sf-svd-related a { min-height: 82px; display: flex; align-items: center; gap: 17px; padding: 16px 18px; border: 1px solid #E5E7EB; border-radius: 16px; color: inherit; }
.sf-svd-related a + a { margin-top: 12px; }
.sf-svd-related a:hover { border-color: #CAD5E2; box-shadow: 0 6px 16px rgba(6, 23, 46, .06); }
.sf-svd-related__tile { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: color-mix(in srgb, var(--brand) 5%, #fff); color: #0F3D6E; font-style: normal; }
.sf-svd-related__tile span { width: 22px; height: 22px; background: #0F3D6E; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.sf-svd-related__tile b { color: #0F3D6E; font: 800 18px/1 var(--sf-latin); }
.sf-svd-related__tile img { width: 100%; height: 100%; object-fit: cover; }
.sf-svd-related__tile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-svd-related__tile.is-plain { background: #EEF2F7; }
.sf-svd-related a > span, .sf-svd-order__service > span { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sf-svd-related a > span > b, .sf-svd-order__service > span > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #020618; font: 700 14px/20px var(--sf-font); text-align: start; unicode-bidi: plaintext; }
[dir="rtl"] .sf-svd-related a > span > b, [dir="rtl"] .sf-svd-order__service > span > b { text-align: right; }
.sf-svd-related a > span > span, .sf-svd-order__service > span > span { display: flex; align-items: baseline; gap: 4px; }
.sf-svd-related a > span > span b, .sf-svd-order__service > span > span b { color: #020618; font: 800 14px/20px var(--sf-font); }
.sf-svd-related a > span > span small, .sf-svd-order__service > span > span small { color: #90A1B9; font: 400 12px/16px var(--sf-font); }
.sf-svd-related a > .sf-ico { width: 18px; height: 18px; color: #90A1B9; }
[dir="ltr"] .sf-svd-related a > .sf-ico { transform: scaleX(-1); }

/* ---- the order dialog ---- */
.sf-svd-order { width: min(520px, calc(100% - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 20px; background: #fff; color: #020618; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); font-family: var(--sf-font); overflow: auto; }
.sf-svd-order::backdrop { background: rgba(2, 6, 24, .5); }
.sf-svd-order__form { padding: 24px; }
.sf-svd-order__form > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sf-svd-order__form > header h2 { margin: 0; font: 800 20px/30px var(--sf-font); }
.sf-svd-order__close { width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: #F3F4F6; color: #45556C; cursor: pointer; }
.sf-svd-order__close:hover { background: #E5E7EB; color: #020618; }
.sf-svd-order__close .sf-ico { width: 18px; height: 18px; }
.sf-svd-order__service { margin-top: 18px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #E5E7EB; border-radius: 16px; background: #F8FAFC; }
.sf-svd-order__notice { margin: 16px 0 0; padding: 10px 14px; border-radius: 12px; background: #EFF6FF; color: #1C398E; font: 400 13px/20px var(--sf-font); }
.sf-svd-order .order-fields { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.sf-svd-order .order-fields label { display: flex; flex-direction: column; gap: 6px; color: #314158; font: 600 13px/20px var(--sf-font); }
.sf-svd-order .order-fields input:not([type="checkbox"]), .sf-svd-order .order-fields select, .sf-svd-order .order-fields textarea { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #E2E5EA; border-radius: 12px; background: #F8FAFC; color: #020618; font: 400 14px/20px var(--sf-font); outline: 0; }
.sf-svd-order .order-fields textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.sf-svd-order .order-fields input:focus, .sf-svd-order .order-fields select:focus, .sf-svd-order .order-fields textarea:focus { border-color: #58A1D3; background: #fff; box-shadow: 0 0 0 3px rgba(88, 161, 211, .15); }
.sf-svd-order .order-fields input[type="checkbox"] { width: 18px; height: 18px; }
.sf-svd-order .order-range { margin-inline-start: 6px; color: #90A1B9; font: 400 12px/18px var(--sf-font); font-style: normal; }
.sf-svd-order .order-total { color: #00A63E; font: 500 13px/20px var(--sf-font); }
.sf-svd-order .field-error { margin: 0; color: #E7000B; font: 400 13px/20px var(--sf-font); }
.sf-svd-order #orderCouponRow { margin-top: 14px; }
.sf-svd-order__error { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: #FEF2F2; color: #C10007; font: 400 13px/20px var(--sf-font); }
.sf-svd-order__form > footer { margin-top: 6px; }
.sf-svd-order__form > footer .sf-svd-cta { margin-top: 14px; }
.sf-svd-order__terms { margin: 12px 0 0; color: #90A1B9; font: 400 12px/18px var(--sf-font); text-align: center; }
.sf-svd-order__terms a { color: #1A4D82; text-decoration: underline; }
.sf-svd-order__done { padding: 36px 28px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sf-svd-order__done > .sf-ico { width: 56px; height: 56px; padding: 12px; border-radius: 50%; background: #DCFCE7; color: #00A63E; }
.sf-svd-order__done h2 { margin: 16px 0 0; font: 800 20px/30px var(--sf-font); }
.sf-svd-order__done p { margin: 6px 0 0; color: #62748E; font: 400 14px/22px var(--sf-font); }
.sf-svd-order__done .sf-svd-cta { margin-top: 22px; }
.sf-svd-order__again { height: 44px; margin-top: 8px; padding: 0 16px; border: 0; background: none; color: #62748E; font: 500 14px/20px var(--sf-font); cursor: pointer; }

@media (max-width: 1100px) {
  .sf-svd { flex-direction: column; }
  .sf-svd__main, .sf-svd__side { width: 100%; }
  .sf-svd__side { margin-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .sf-svd__side > .sf-svd-price { margin-bottom: 0; }
}
@media (max-width: 760px) {
  /* The price and the order buttons come straight after the title, not after
     the whole description. */
  .sf-svd { padding: 20px 0 64px; gap: 20px; }
  .sf-svd__main { display: contents; }
  .sf-svd__head { order: 1; }
  .sf-svd__chips { order: 2; margin-top: 0; }
  .sf-svd__side { order: 3; }
  .sf-svd__tabs { order: 4; margin-top: 0; }
  .sf-svd__id { gap: 16px; }
  .sf-svd__tile { width: 64px; height: 64px; border-radius: 18px; }
  .sf-svd__tile span { width: 28px; height: 28px; }
  .sf-svd__name h1 { font-size: 24px; line-height: 34px; }
  .sf-svd__rating { align-self: flex-start; flex-wrap: wrap; }
  .sf-svd__chips { justify-content: flex-start; gap: 8px; }
  .sf-svd__chips li { font-size: 13px; }
  .sf-svd__tablist button { padding: 0 6px 2px; font-size: 13px; }
  .sf-svd__pane, [dir="ltr"] .sf-svd__pane { padding: 28px 16px; }
  .sf-svd__features { grid-template-columns: minmax(0, 1fr); }
  .sf-svd__needs { padding: 16px; }
  .sf-svd__side { grid-template-columns: minmax(0, 1fr); }
}