/*
 * 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: #0F4C81; background: #fff; box-shadow: 0 0 0 3px rgba(15, 76, 129, .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; }
/* Left to right the count would touch the brand ("Apple1"); the Persian design sets them together on purpose. */
[dir="ltr"] .sf-svc__tabs button:not([data-svc-tab=""]) small { margin-left: 4px; }

.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: #0F4C81; }
.sf-svc-switch input:checked + i::after { right: 2px; }
.sf-svc-switch input:focus-visible + i { outline: 2px solid #0F4C81; 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: #0F4C81; background: #0F4C81 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 #0F4C81; 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: #0F4C81; 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: #0F4C81; 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; }
/* Design 113 (2026-10-26): a pale card with a white rim, the mark in a 38px circle, the line under the
   name in navy and a navy button. */
.sf-svc-card { position: relative; min-width: 0; height: 230px; padding: 14px 13px 12px; display: flex; flex-direction: column; align-items: stretch; border: 1px solid #fff; border-radius: 16px; background: linear-gradient(180deg, #F7F9FB 0%, #F9FBFD 100%); box-shadow: 0 1px 3px rgba(6, 23, 46, .06), 0 6px 18px rgba(6, 23, 46, .04); 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 #0F4C81; outline-offset: 2px; }
.sf-svc-card__icon { width: 38px; height: 38px; 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: 20px 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: 16px; }
.sf-svc-card p { height: 34px; margin: 15px 0 0; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #0F4C81; 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 16px/20px 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: #0F4C81; color: #fff; font: 500 14px/20px var(--sf-font); }
.sf-svc-card__order:hover { background: #0B3D69; }
/* The categories tab's chip and dots (below); a wider screen has the line and the footer instead. */
.sf-svc-card__chip, .sf-svc-card__dots { display: none; }
.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, .sf-svc__empty a { height: 40px; display: inline-flex; align-items: center; padding: 0 18px; border: 0; border-radius: 10px; background: #0F4C81; color: #fff; font: 500 13px/20px var(--sf-font); cursor: pointer; }

/* /groups: no filter column, so the cards take the whole width, four across. */
.sf-svc--groups .sf-svc__body { margin-top: 50px; }
.sf-svc--groups .sf-svc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-svc-card--group .sf-svc-card__price b { color: #62748E; }

.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, .sf-svc--groups .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: #0F4C81; 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, .sf-svc--groups .sf-svc__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sf-svc--groups .sf-svc__body { margin-top: 20px; }
  .sf-svc-card { height: auto; min-height: 230px; }
  .sf-svc__pager { margin-top: 32px; }
}

/* /groups as the phone's "Product categories" tab (design 110, 390 frame): the page's own bar above
   (site-header.php, appShop), the search on the same band under it, then the groups two across - the
   mark in a 48px tile, a corner and four dots at the far end, the name, the short line or the count as
   a chip and a blue-to-gold line at the foot. */
@media (max-width: 760px) {
  .sf-svc--groups { width: 100%; padding: 0 0 24px; }
  .sf-svc--groups .sf-svc__crumbs { display: none; }
  .sf-svc--groups .sf-svc__head { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sf-svc--groups .sf-svc__search { width: auto; height: auto; margin: 0; padding: 0 16px 12px; border-bottom: 1px solid #E5E7EB; background: #fff; }
  .sf-svc--groups .sf-svc__search input { height: 48px; padding: 0 46px 0 16px; border-color: #D5DDE7; border-radius: 16px; background: #F8FAFC; font-size: 15px; }
  [dir="ltr"] .sf-svc--groups .sf-svc__search input { padding: 0 16px 0 46px; }
  .sf-svc--groups .sf-svc__search .sf-ico { top: 14px; right: 32px; left: auto; color: #7F99B2; }
  [dir="ltr"] .sf-svc--groups .sf-svc__search .sf-ico { right: auto; left: 32px; }
  .sf-svc--groups .sf-svc__body { margin: 16px 16px 0; }
  .sf-svc--groups .sf-svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 13px; }
  .sf-svc--groups .sf-svc-card { height: auto; min-height: 154px; padding: 16px; overflow: hidden; border: 1px solid #E5E9F0; background: #fff; box-shadow: none; }
  .sf-svc--groups .sf-svc-card::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 32px; background: #DDE6FF; clip-path: polygon(0 0, 100% 0, 0 100%); }
  [dir="ltr"] .sf-svc--groups .sf-svc-card::before { right: 0; left: auto; clip-path: polygon(0 0, 100% 0, 100% 100%); }
  .sf-svc--groups .sf-svc-card::after { content: ""; position: absolute; right: 14px; bottom: 0; left: 14px; height: 3px; border-radius: 3px; background: linear-gradient(to left, #58A1D3, #C2975C); }
  [dir="ltr"] .sf-svc--groups .sf-svc-card::after { background: linear-gradient(to right, #58A1D3, #C2975C); }
  .sf-svc--groups .sf-svc-card__icon { width: 48px; height: 48px; border-radius: 12px; background: #E8EEFB; color: #0F4C81; opacity: 1; }
  .sf-svc--groups .sf-svc-card__icon svg { width: 24px; height: 24px; }
  .sf-svc--groups .sf-svc-card__icon[style] { background: #fff; box-shadow: inset 0 0 0 1px #E5E9F0; }
  .sf-svc--groups .sf-svc-card__icon span { width: 28px; height: 32px; background: #06172E; }
  .sf-svc--groups .sf-svc-card h3 { margin-top: 14px; color: #06172E; font: 700 16px/24px var(--sf-font); }
  .sf-svc--groups .sf-svc-card p, .sf-svc--groups .sf-svc-card footer { display: none; }
  .sf-svc--groups .sf-svc-card__chip { max-width: 100%; height: 24px; margin-top: 10px; display: inline-flex; align-self: flex-start; align-items: center; padding: 0 10px; overflow: hidden; border-radius: 12px; font: 600 13px/1 var(--sf-font); white-space: nowrap; text-overflow: ellipsis; }
  .sf-svc--groups .sf-svc-card__chip.is-blue { background: #EEF2FC; color: #0F4C81; }
  .sf-svc--groups .sf-svc-card__chip.is-gold { background: #FBF4E8; color: #A0763A; }
  .sf-svc--groups .sf-svc-card__dots { position: absolute; top: 16px; left: 16px; display: grid; grid-template-columns: repeat(2, 10px); gap: 4px; }
  [dir="ltr"] .sf-svc--groups .sf-svc-card__dots { right: 16px; left: auto; }
  .sf-svc--groups .sf-svc-card__dots i { width: 10px; height: 10px; border-radius: 3px; background: #EEF0F5; }
}

/* --------------------------------------------- /services (design 47-50, 2026-10-17) */
/* A white head over a grey body: crumbs, title, search with its button and a chip
   per brand; then one filter card beside the results. The /groups cards above keep
   the older .sf-svc styles. */

.sf-svl-page { background: #F4F6F9; }
.sf-svl { color: #06172E; font-family: var(--sf-font); }
.sf-svl__wrap { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }

.sf-svl__hero { padding: 28px 0 32px; border-bottom: 1px solid #E3E8EF; background: #fff; }
.sf-svl__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #5B6676; font: 400 13px/20px var(--sf-font); }
.sf-svl__crumbs a { color: #5B6676; }
.sf-svl__crumbs a:hover { color: #0F4C81; }
.sf-svl__crumbs b { color: #06172E; font-weight: 600; }

.sf-svl__head { margin-top: 22px; }
.sf-svl__head h1 { margin: 0; color: #06172E; font: 800 34px/1.3 var(--sf-display); }
.sf-svl__head p { margin: 8px 0 0; color: #5B6676; font: 400 15px/23px var(--sf-font); }

.sf-svl__search { margin-top: 22px; display: flex; align-items: center; gap: 10px; }
.sf-svl__field { height: 56px; flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 18px; border: 1.5px solid #D5DDE7; border-radius: 14px; background: #F8FAFC; cursor: text; }
.sf-svl__field:focus-within { border-color: #0F4C81; background: #fff; box-shadow: 0 0 0 3px rgba(15, 76, 129, .12); }
.sf-svl__field .sf-ico { width: 20px; height: 20px; flex: none; color: #5B6676; }
.sf-svl__field input { min-width: 0; flex: 1; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #06172E; font: 400 15px/23px var(--sf-font); }
.sf-svl__field input::placeholder { color: #7A8597; }
.sf-svl__field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sf-svl__go { height: 56px; flex: none; padding: 0 28px; border: 0; border-radius: 14px; background: #0F4C81; color: #fff; font: 700 15px/23px var(--sf-font); cursor: pointer; }
.sf-svl__go:hover { background: #0C3F6B; }

.sf-svl__brands { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.sf-svl__brands button { height: 42px; display: inline-flex; align-items: center; gap: 8px; padding-block: 0; padding-inline: 14px 8px; border: 1px solid #D5DDE7; border-radius: 12px; background: #fff; color: #2A3646; font: 600 14px/22px var(--sf-font); cursor: pointer; }
.sf-svl__brands button:hover { border-color: #0F4C81; }
.sf-svl__brands button i { min-width: 24px; height: 24px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 8px; background: #F1F4F8; color: #5B6676; font: 500 12px/19px var(--sf-font); font-style: normal; }
.sf-svl__brands button.is-active { border-color: #0F4C81; background: #0F4C81; color: #fff; }
.sf-svl__brands button.is-active i { background: rgba(255, 255, 255, .18); color: #fff; }

.sf-svl__main { padding: 28px 0 56px; display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: start; gap: 24px; }

/* The one filter card. */
.sf-svl__filters { overflow: hidden; border: 1px solid #E3E8EF; border-radius: 16px; background: #fff; }
.sf-svl-filters__head { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #E3E8EF; }
.sf-svl-filters__head h2 { margin: 0; display: flex; align-items: center; gap: 8px; color: #06172E; font: 700 16px/24px var(--sf-font); }
.sf-svl-filters__head h2 .sf-ico { width: 18px; height: 18px; }
.sf-svl-filters__head button { padding: 0; border: 0; background: none; color: #0F4C81; font: 600 13px/20px var(--sf-font); cursor: pointer; }
.sf-svl-filters__head button:hover { text-decoration: underline; }
.sf-svl-filters__row, .sf-svl-filters__group { padding: 18px 20px; border-bottom: 1px solid #E3E8EF; }
.sf-svl-filters__group:last-child { border-bottom: 0; }
.sf-svl-filters__group h3 { margin: 0 0 12px; color: #06172E; font: 700 15px/23px var(--sf-font); }
.sf-svl-filters__group h3 small { color: #5B6676; font: 400 13px/20px var(--sf-font); }

.sf-svl-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #06172E; font: 600 14px/22px var(--sf-font); cursor: pointer; }
.sf-svl-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sf-svl-switch i { position: relative; width: 44px; height: 24px; flex: none; border-radius: 999px; background: #D5DDE7; transition: background .15s; }
.sf-svl-switch i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(6, 23, 46, .2); transition: inset-inline-start .15s; }
.sf-svl-switch input:checked + i { background: #0F4C81; }
.sf-svl-switch input:checked + i::after { inset-inline-start: 23px; }
.sf-svl-switch input:focus-visible + i { outline: 2px solid #0F4C81; outline-offset: 2px; }

.sf-svl-check { min-height: 36px; display: flex; align-items: center; gap: 10px; color: #2A3646; font: 400 14px/22px var(--sf-font); cursor: pointer; }
.sf-svl-check input { width: 18px; height: 18px; flex: none; margin: 0; border: 1.5px solid #C4CDD8; border-radius: 5px; background: #fff; -webkit-appearance: none; appearance: none; cursor: pointer; }
.sf-svl-check input:checked { border-color: #0F4C81; background: #0F4C81 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.sf-svl-check input:focus-visible { outline: 2px solid #0F4C81; outline-offset: 2px; }
.sf-svl-check span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.sf-svl-check i { min-width: 24px; height: 24px; flex: none; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 8px; background: #F1F4F8; color: #5B6676; font: 500 12px/19px var(--sf-font); font-style: normal; }

.sf-svl-range__track { --from: 0%; --to: 100%; position: relative; height: 20px; margin: 6px 0 14px; }
.sf-svl-range__track::before { content: ""; position: absolute; inset: 8px 0; border-radius: 2px; background: linear-gradient(to left, #E3E8EF var(--from), #0F4C81 var(--from), #0F4C81 var(--to), #E3E8EF var(--to)); }
[dir="ltr"] .sf-svl-range__track::before { background: linear-gradient(to right, #E3E8EF var(--from), #0F4C81 var(--from), #0F4C81 var(--to), #E3E8EF var(--to)); }
.sf-svl-range__track input { position: absolute; inset: 0; width: 100%; height: 20px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.sf-svl-range__track input::-webkit-slider-runnable-track { height: 20px; background: none; }
.sf-svl-range__track input::-webkit-slider-thumb { width: 20px; height: 20px; border: 3px solid #0F4C81; border-radius: 50%; background: #fff; pointer-events: auto; cursor: grab; -webkit-appearance: none; appearance: none; }
.sf-svl-range__track input::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid #0F4C81; border-radius: 50%; background: #fff; pointer-events: auto; cursor: grab; }
.sf-svl-range__track input::-moz-range-track { background: none; }
.sf-svl-range__track input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(15, 76, 129, .2); }
.sf-svl-range__boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sf-svl-range__boxes label { display: grid; gap: 6px; color: #5B6676; font: 400 13px/20px var(--sf-font); }
.sf-svl-range__boxes input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #D5DDE7; border-radius: 10px; background: #fff; color: #06172E; font: 600 14px/22px var(--sf-font); outline: 0; }
.sf-svl-range__boxes input:focus { border-color: #0F4C81; box-shadow: 0 0 0 3px rgba(15, 76, 129, .12); }

/* The results: count, currency and sort, then the cards. */
.sf-svl__toolbar { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sf-svl__count { margin: 0; color: #5B6676; font: 400 15px/23px var(--sf-font); }
.sf-svl__count b { color: #06172E; font: 700 17px/27px var(--sf-font); }
.sf-svl__controls { display: flex; align-items: center; gap: 10px; }
.sf-svl__money { height: 44px; display: flex; align-items: center; padding: 4px; border-radius: 12px; background: #E9EEF4; }
.sf-svl__money button { height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: #5B6676; font: 600 13px/20px var(--sf-font); cursor: pointer; }
.sf-svl__money button.is-active { background: #fff; color: #06172E; font-weight: 700; box-shadow: 0 1px 2px rgba(6, 23, 46, .06); }
.sf-svl__money button:disabled { cursor: progress; }
.sf-svl__sort { display: flex; align-items: center; gap: 8px; color: #5B6676; font: 400 13px/20px var(--sf-font); }
.sf-svl__select { position: relative; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid #D5DDE7; border-radius: 12px; background: #fff; }
.sf-svl__select select { height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #06172E; font: 400 14px/22px var(--sf-font); -webkit-appearance: none; appearance: none; cursor: pointer; }
.sf-svl__select .sf-ico { width: 16px; height: 16px; flex: none; color: #5B6676; pointer-events: none; }
.sf-svl__select:focus-within { border-color: #0F4C81; }
.sf-svl__sort-icon { display: none; }
.sf-svl__toggle, .sf-svl__chips { display: none; }

.sf-svl__grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.sf-svl-card { position: relative; min-width: 0; min-height: 440px; display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid #E3E8EF; border-radius: 16px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.sf-svl-card:hover { border-color: #C9D6E3; box-shadow: 0 12px 26px rgba(6, 23, 46, .06); }
.sf-svl-card__media { position: relative; height: 136px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; background-color: #E8ECF2; color: #06172E; }
.sf-svl-card__chips { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sf-svl-card__chips b, .sf-svl-card__chips span { height: 28px; min-width: 0; display: inline-flex; align-items: center; padding: 0 10px; overflow: hidden; color: #06172E; font: 700 12px/19px var(--sf-font); white-space: nowrap; text-overflow: ellipsis; }
.sf-svl-card__chips b { border-radius: 8px; background: #fff; }
.sf-svl-card__chips span { border-radius: 999px; background: rgba(255, 255, 255, .75); font-weight: 600; }
.sf-svl-card__tile { width: 76px; height: 76px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 6px 18px rgba(6, 23, 46, .08); }
.sf-svl-card__tile svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sf-svl-card__tile img { width: 100%; height: 100%; object-fit: cover; }
.sf-svl-card .sf-fav-heart { position: absolute; bottom: 8px; inset-inline-end: 8px; width: 30px; height: 30px; background: rgba(255, 255, 255, .85); }
.sf-svl-card .sf-fav-heart svg { width: 17px; height: 17px; }
.sf-svl-card__meta { display: none; }
.sf-svl-card h3 { margin: 0; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #06172E; font: 700 16px/24px var(--sf-font); text-align: start; unicode-bidi: plaintext; }
.sf-svl-card h3 a { color: inherit; outline: 0; }
/* The whole card opens the service; the heart and the order button sit above it. */
.sf-svl-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 16px; }
.sf-svl-card:focus-within { outline: 2px solid #0F4C81; outline-offset: 2px; }
.sf-svl-card__tile, .sf-svl-card__order { position: relative; z-index: 1; }
.sf-svl-card .sf-fav-heart { z-index: 2; }
.sf-svl-card h3 a:hover { color: #0F4C81; }
.sf-svl-card__about { margin: 0; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #5B6676; font: 400 13.5px/1.8 var(--sf-font); text-align: start; unicode-bidi: plaintext; }
.sf-svl-card__eta { margin: 0; display: flex; align-items: center; gap: 6px; color: #3D4A5C; font: 400 13px/20px var(--sf-font); }
.sf-svl-card__eta .sf-ico { width: 16px; height: 16px; flex: none; }
.sf-svl-card__foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px dashed #E3E8EF; }
.sf-svl-card__price { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.sf-svl-card__price > small { color: #5B6676; font: 400 12px/19px var(--sf-font); }
.sf-svl-card__price > span { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.sf-svl-card__price b { color: #06172E; font: 800 18px/28px var(--sf-font); }
.sf-svl-card__price span small { color: #5B6676; font: 500 12px/19px var(--sf-font); }
.sf-svl-card__price .is-off b { color: #7A8597; font-size: 14px; font-weight: 600; }
.sf-svl-card__order { height: 44px; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 18px; border-radius: 12px; background: #0F4C81; color: #fff; font: 700 14px/22px var(--sf-font); white-space: nowrap; }
.sf-svl-card__order:hover { background: #0C3F6B; }
.sf-svl-card__order .sf-ico { width: 16px; height: 16px; stroke-width: 2.4; }
[dir="ltr"] .sf-svl-card__order .sf-ico { transform: scaleX(-1); }
.sf-svl-card.is-off .sf-svl-card__order { background: #C4CDD8; }

/* Each kind of service has its own tint and ink (design 47). */
.sf-svl-card--account .sf-svl-card__media { background-color: #F3EEE6; color: #8A6430; }
.sf-svl-card--frp .sf-svl-card__media { background-color: #EAF3FB; color: #0F4C81; }
.sf-svl-card--network .sf-svl-card__media, .sf-svl-card--rent .sf-svl-card__media { background-color: #F5EEE3; color: #8A6430; }
.sf-svl-card--check .sf-svl-card__media { background-color: #E6EEF6; color: #0B3C68; }
.sf-svl-card--icloud .sf-svl-card__media, .sf-svl-card--apple-id .sf-svl-card__media { background-color: #E3F1FB; color: #1F6FA8; }
.sf-svl-card--bootloader .sf-svl-card__media, .sf-svl-card--other .sf-svl-card__media { background-color: #E8ECF2; color: #06172E; }
.sf-svl-card__chips b, .sf-svl-card__chips span { color: #06172E; }

.sf-svl__empty { margin-top: 18px; padding: 64px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; border: 1px dashed #D5DDE7; border-radius: 16px; background: #fff; color: #5B6676; text-align: center; }
.sf-svl__empty .sf-ico { width: 32px; height: 32px; color: #7A8597; }
.sf-svl__empty p { margin: 0; font: 400 14px/22px var(--sf-font); }
.sf-svl__empty button, .sf-svl__empty a { height: 40px; display: inline-flex; align-items: center; padding: 0 18px; border: 0; border-radius: 10px; background: #0F4C81; color: #fff; font: 600 13px/20px var(--sf-font); cursor: pointer; }

.sf-svl__foot { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.sf-svl__foot p { margin: 0; color: #5B6676; font: 400 13px/20px var(--sf-font); }
.sf-svl__pager { display: flex; align-items: center; gap: 8px; }
.sf-svl__pager > span { display: flex; gap: 8px; }
.sf-svl__pager button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid #E3E8EF; border-radius: 10px; background: #fff; color: #06172E; font: 700 14px/20px var(--sf-font); cursor: pointer; }
.sf-svl__pager button:hover:not(:disabled):not([aria-current]) { border-color: #0F4C81; }
.sf-svl__pager button[aria-current="page"] { border-color: #06172E; background: #06172E; color: #fff; }
.sf-svl__pager button:disabled { color: #A9B4C2; cursor: default; }
.sf-svl__pager .sf-ico { width: 16px; height: 16px; stroke-width: 2.4; }
[dir="ltr"] .sf-svl__pager .sf-ico { transform: scaleX(-1); }
.sf-svl__more { margin-top: 16px; display: grid; justify-items: center; gap: 10px; }
.sf-svl__more[hidden] { display: none; }
.sf-svl__more button { width: 100%; height: 50px; border: 1px solid #D5DDE7; border-radius: 14px; background: #fff; color: #06172E; font: 700 15px/23px var(--sf-font); cursor: pointer; }
.sf-svl__more button[hidden] { display: none; }
.sf-svl__more p { margin: 0; color: #5B6676; font: 400 13px/20px var(--sf-font); }

@media (max-width: 1180px) {
  .sf-svl__main { grid-template-columns: 250px minmax(0, 1fr); }
  .sf-svl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Narrower: the filter card folds behind a button above the results. */
@media (max-width: 860px) {
  .sf-svl__main { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sf-svl-card { min-height: 0; }
  .sf-svl__results { display: contents; }
  .sf-svl__toolbar { order: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "toggle sort" "count chips"; gap: 12px; }
  .sf-svl__controls { display: contents; }
  .sf-svl__money, .sf-svl__sort-label { display: none; }
  .sf-svl__sort { grid-area: sort; }
  .sf-svl__select { width: 100%; height: 48px; justify-content: center; border-radius: 14px; }
  .sf-svl__select select { font-weight: 700; text-align: center; }
  .sf-svl__select > .sf-ico:last-child { display: none; }
  .sf-svl__sort-icon { display: block; color: #06172E; }
  .sf-svl__toggle { grid-area: toggle; height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #D5DDE7; border-radius: 14px; background: #fff; color: #06172E; font: 700 15px/23px var(--sf-font); cursor: pointer; }
  .sf-svl__toggle .sf-ico { width: 18px; height: 18px; }
  .sf-svl__toggle i { min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 7px; background: #0F4C81; color: #fff; font: 600 12px/18px var(--sf-font); font-style: normal; }
  .sf-svl__toggle i[hidden] { display: none; }
  .sf-svl__toggle[aria-expanded="true"] { border-color: #0F4C81; }
  .sf-svl__count { grid-area: count; align-self: center; }
  .sf-svl__chips { grid-area: chips; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .sf-svl__chip { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-radius: 999px; background: #E6EEF6; color: #0F4C81; font: 600 12px/18px var(--sf-font); cursor: pointer; }
  .sf-svl__chip .sf-ico { width: 13px; height: 13px; stroke-width: 2.6; }
  .sf-svl__filters { order: 2; margin-top: 12px; }
  .sf-svl__filters:not(.is-open) { display: none; }
  .sf-svl__grid, .sf-svl__empty { order: 3; }
  .sf-svl__foot, .sf-svl__more { order: 4; }
}

/* A phone: the list design of frame 50 - a tile beside the words, six at a time. */
@media (max-width: 640px) {
  .sf-svl__wrap { width: calc(100% - 32px); }
  .sf-svl__hero { padding: 16px 0 18px; }
  .sf-svl__head { margin-top: 14px; }
  .sf-svl__head h1 { font-size: 26px; }
  .sf-svl__head p { font-size: 14px; line-height: 22px; }
  .sf-svl__search { margin-top: 16px; }
  .sf-svl__field { height: 52px; }
  .sf-svl__go { display: none; }
  .sf-svl__brands { margin: 16px -16px 0; padding: 0 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sf-svl__brands::-webkit-scrollbar { display: none; }
  .sf-svl__brands button { flex: none; }
  .sf-svl__main { padding: 16px 0 40px; }
  .sf-svl__grid { margin-top: 14px; grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .sf-svl-card { min-height: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "tile meta meta" "tile title title" "about about about" "rule rule rule" "price price order" "eta eta order"; align-items: start; gap: 6px 12px; padding: 16px; }
  .sf-svl-card::before { content: ""; grid-area: rule; margin-top: 4px; border-top: 1px dashed #E3E8EF; }
  .sf-svl-card__media { display: contents; }
  .sf-svl-card__chips { display: none; }
  .sf-svl-card__tile { grid-area: tile; width: 56px; height: 56px; border-radius: 15px; background-color: inherit; box-shadow: none; }
  .sf-svl-card__tile svg { width: 28px; height: 28px; }
  .sf-svl-card .sf-fav-heart { top: 10px; bottom: auto; inset-inline-end: 10px; background: none; }
  .sf-svl-card__meta { grid-area: meta; margin: 0; padding-inline-end: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #5B6676; font: 500 12px/18px var(--sf-font); }
  .sf-svl-card__meta b { color: #0F4C81; font-weight: 600; }
  .sf-svl-card__meta b::before { content: "·"; margin-inline-end: 6px; color: #A9B4C2; }
  .sf-svl-card h3 { grid-area: title; font-size: 15px; line-height: 23px; }
  [dir="rtl"] .sf-svl-card h3, [dir="rtl"] .sf-svl-card__about { text-align: right; }
  .sf-svl-card__about { grid-area: about; margin-top: 4px; font-size: 13px; }
  .sf-svl-card__foot { display: contents; }
  .sf-svl-card__price { grid-area: price; margin-top: 6px; }
  .sf-svl-card__price > small { display: none; }
  .sf-svl-card__eta { grid-area: eta; }
  .sf-svl-card__eta-label { display: none; }
  .sf-svl-card__order { grid-area: order; align-self: center; margin-top: 6px; padding: 0 22px; }
  .sf-svl-card__order .sf-ico { display: none; }
}

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

/* The review form under a service's reviews: five stars, a box, a button. */
.sf-svd__write { margin-top: 28px; padding-top: 22px; border-top: 1px solid #F0F1F2; }
.sf-svd__write h3 { margin: 0 0 12px; color: #020618; font: 700 16px/24px var(--sf-font); }
.sf-svd__review-form { display: grid; gap: 14px; }
.sf-svd__rate { margin: 0; padding: 0; border: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.sf-svd__rate legend { width: 100%; margin-bottom: 6px; color: #45556C; font: 600 13px/20px var(--sf-font); }
.sf-svd__rate input { position: absolute; opacity: 0; pointer-events: none; }
.sf-svd__rate label { cursor: pointer; }
.sf-svd__rate svg { width: 28px; height: 28px; fill: #E2E8F0; transition: fill .12s; }
.sf-svd__rate label:hover svg, .sf-svd__rate label:hover ~ label svg, .sf-svd__rate input:checked ~ label svg { fill: #F59E0B; }
.sf-svd__rate input:focus-visible + label svg { outline: 2px solid #0F4C81; outline-offset: 2px; border-radius: 4px; }
.sf-svd__review-text { display: grid; gap: 6px; color: #45556C; font: 600 13px/20px var(--sf-font); }
.sf-svd__review-text textarea { width: 100%; min-height: 88px; padding: 10px 12px; border: 1px solid #E2E8F0; border-radius: 12px; background: #FAFBFD; color: #0F172B; font: 400 14px/22px var(--sf-font); resize: vertical; }
.sf-svd__review-text textarea:focus { border-color: #0F4C81; outline: 0; background: #fff; }
.sf-svd__review-form button { justify-self: start; height: 42px; padding: 0 22px; border: 0; border-radius: 12px; background: #06172E; color: #fff; font: 600 14px/20px var(--sf-font); cursor: pointer; }
.sf-svd__review-form button:disabled { opacity: .6; cursor: default; }
.sf-svd__review-error { margin: 0; color: #E7000B; font: 400 13px/20px var(--sf-font); }
.sf-svd__mine { margin: 0; padding: 10px 14px; border-radius: 12px; font: 500 14px/22px var(--sf-font); }
.sf-svd__mine.is-pending { background: #FEF3C7; color: #92400E; }
.sf-svd__mine.is-approved { background: #DCFCE7; color: #016630; }
.sf-svd__mine.is-rejected { background: #F1F5F9; color: #45556C; }
.sf-svd__write .sf-svd__hint a { color: #1A4D82; font-weight: 600; text-decoration: underline; }

/* The crumbs over the page (owner, 2026-10-21; frame 84 has none): the /services
   style, every step a link, the service's own name cut short on one line. They
   take the top of the 35px the design leaves under the header. */
.sf-svd__crumbs { width: min(1224px, calc(100% - 32px)); margin: 0 auto; padding-top: 24px; }
.sf-svd__crumbs a { min-width: 0; }
.sf-svd__crumbs a[aria-current] { max-width: min(560px, 100%); overflow: hidden; color: #06172E; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sf-svd { width: min(1224px, calc(100% - 32px)); margin: 0 auto; padding: 18px 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__name h1.is-mid { font-size: 26px; line-height: 36px; }
.sf-svd__name h1.is-long { font-size: 21px; line-height: 31px; }
.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: #0F4C81; 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: #008236; 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: #0F4C81; color: #fff; font: 700 16px/24px var(--sf-font); cursor: pointer; }
.sf-svd-cta:hover:not(:disabled) { background: #0B3D69; }
.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: #008236; 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; }
/* A stocked service with no codes left (Digital Inventory, 2026-10-29), and the timer's line under it. */
.sf-svd-state.is-out { color: #B45309; }
.sf-svd-state.is-out { align-items: flex-start; }
.sf-svd-state.is-out i { margin-top: 6px; background: #F59E0B; }
.sf-svd-state span { min-width: 0; text-align: center; }
.sf-svd-restock { display: block; margin-top: 2px; color: #62748E; font-size: 12px; line-height: 18px; }
.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-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: #0F4C81; background: #fff; box-shadow: 0 0 0 3px rgba(15, 76, 129, .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: 14px 0 64px; gap: 20px; }
  .sf-svd__crumbs { padding-top: 16px; }
  .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); }
}

/* ------------------------------------------------------ cart and favourites */

/* The header's cart and its count. */
.sf-cart-link { position: relative; }
.sf-cart-badge { position: absolute; top: 2px; inset-inline-end: 0; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 9px; background: #E7000B; color: #fff; font: 700 10px/17px var(--sf-latin); }
.sf-cart-badge[hidden] { display: none; }

/* The heart: a card's top corner (design 30's popular cards), above the card's link. */
.sf-fav-heart { position: relative; z-index: 2; width: 32px; height: 32px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #90A1B9; cursor: pointer; }
.sf-fav-heart svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.sf-fav-heart:hover { color: #E7000B; background: rgba(231, 0, 11, .06); }
.sf-fav-heart[aria-pressed="true"] { color: #E7000B; }
.sf-fav-heart[aria-pressed="true"] svg { fill: currentColor; }
.sf-fav-heart:focus-visible { outline: 2px solid #0F4C81; outline-offset: 2px; }
.sf-pcard header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sf-svc-card > .sf-fav-heart { position: absolute; top: 16px; inset-inline-end: 12px; }

/* "Add to cart" beside "Order and pay" in the order dialog. */
.sf-svd-order footer .sf-svd-cart { width: 100%; height: 46px; margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid #CAD5E2; border-radius: 14px; background: #fff; color: #06172E; font: 600 14px/20px var(--sf-font); cursor: pointer; }
.sf-svd-order footer .sf-svd-cart:hover { border-color: #0F4C81; }
.sf-svd-cart svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-svd-order__added { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #DCFCE7; color: #016630; font: 500 13px/20px var(--sf-font); }
.sf-svd-order__added a { color: inherit; font-weight: 700; text-decoration: underline; }

/* /cart: the lines beside a summary. */
.sf-cart__body { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 24px; }
.sf-cart__list { margin: 0; padding: 0; display: grid; gap: 12px; list-style: none; }
.sf-cart__line { padding: 16px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto 36px; align-items: center; gap: 16px; border: 1px solid #E9EBEE; border-radius: 16px; background: #fff; }
.sf-cart__tile { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: #EEF3FB; color: #1A4D82; font-style: normal; }
.sf-cart__tile img { width: 100%; height: 100%; object-fit: cover; }
.sf-cart__tile span { width: 26px; height: 26px; background: #1A4D82; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.sf-cart__tile svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.sf-cart__info { min-width: 0; }
.sf-cart__info a { display: block; overflow: hidden; color: #020618; font: 700 15px/22px var(--sf-font); text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.sf-cart__details { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; color: #62748E; font: 400 13px/20px var(--sf-font); }
.sf-cart__gone { margin: 6px 0 0; color: #E7000B; font: 400 13px/20px var(--sf-font); }
.sf-cart__qty { color: #62748E; font: 400 13px/20px var(--sf-font); white-space: nowrap; }
.sf-cart__price { color: #06172E; font: 700 15px/22px var(--sf-font); white-space: nowrap; }
.sf-cart__remove { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: #F5F6F8; color: #62748E; cursor: pointer; }
.sf-cart__remove:hover { background: #FFE2E2; color: #E7000B; }
.sf-cart__remove svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sf-cart__summary { position: sticky; top: calc(var(--sf-head, 64px) + 24px); padding: 22px; border: 1px solid #E9EBEE; border-radius: 16px; background: #fff; }
.sf-cart__summary h2 { margin: 0 0 14px; color: #020618; font: 700 18px/28px var(--sf-font); }
.sf-cart__summary dl { margin: 0; display: grid; gap: 10px; }
.sf-cart__summary dl div { display: flex; justify-content: space-between; gap: 12px; color: #62748E; font: 400 14px/22px var(--sf-font); }
.sf-cart__summary dd { margin: 0; color: #06172E; font-weight: 600; }
.sf-cart__summary .is-total { padding-top: 10px; border-top: 1px solid #F0F1F2; }
.sf-cart__summary .is-total dd { font-size: 18px; font-weight: 800; }
.sf-cart__note { margin: 14px 0 0; color: #90A1B9; font: 400 12px/20px var(--sf-font); }
.sf-cart__skip { margin: 10px 0 0; color: #B45309; font: 500 12px/19px var(--sf-font); }
.sf-cart__warn { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #FEF3C7; color: #92400E; font: 500 13px/20px var(--sf-font); }
.sf-cart__warn a { color: inherit; font-weight: 700; text-decoration: underline; }
.sf-cart__summary .sf-svd-cta { width: 100%; margin-top: 16px; }
.sf-cart__summary .sf-svd-cta:disabled { opacity: .55; cursor: default; }
.sf-cart__results { margin: 14px 0 0; padding: 0; display: grid; gap: 8px; list-style: none; font: 400 13px/20px var(--sf-font); }
.sf-cart__results li { padding: 8px 10px; border-radius: 10px; }
.sf-cart__results .is-ok { background: #DCFCE7; color: #016630; }
.sf-cart__results .is-bad { background: #FFE2E2; color: #9F0712; }
.sf-cart__results .is-done a { color: #1A4D82; font-weight: 700; text-decoration: underline; }

/* /favourites: the cards in the account frame. */
.sf-fav__intro { margin: 8px 0 0; color: #62748E; font: 400 14px/22px var(--sf-font); }
.sf-fav__grid { margin-top: 24px; }

@media (max-width: 1100px) {
  .sf-cart__body { grid-template-columns: minmax(0, 1fr); }
  .sf-cart__summary { position: static; }
}
@media (max-width: 640px) {
  .sf-cart__line { grid-template-columns: 44px minmax(0, 1fr) 36px; gap: 12px; }
  .sf-cart__qty, .sf-cart__sum { grid-column: 2; }
}
/* The line's price cell: the figure, and its Toman under it. */
.sf-cart__sum { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }

/* "≈ ۳۵۹٬۰۰۰ تومان" (TomanRate): the card's price labels are smalls too, and hidden on a phone. */
.sf-svl-card__price > small.sf-toman { display: block; margin-top: 2px; color: #6B7280; font: 400 12px/18px var(--sf-font); }
.sf-svd-price__now:has(.sf-toman), .sf-svd-order__service > span > span:has(.sf-toman), .sf-svc-card__price:has(.sf-toman) { flex-wrap: wrap; }
.sf-svd-price__now .sf-toman { text-align: center; }
.sf-svc-card__price .sf-toman { white-space: nowrap; }

/* ---- A service's picture, whole (1.4.6) ------------------------------------------------------
   The owner: the brand and kind labels belong at the top of the card, and the picture should fill
   the card's picture area and show whole. A 1200x600 picture was cut into a 76px square here and an
   88px one on the service page (object-fit: cover), so only a middle slice of it ever showed. The
   labels now sit above the picture area, which is 2:1 like the pictures the console asks for, and
   the picture is shown whole inside it (contain). */
.sf-svl-card__chips { flex: none; margin-bottom: -2px; }
.sf-svl-card__chips b, .sf-svl-card__chips span { border: 1px solid #E1E7EF; background: #F3F6FA; }
.sf-svl-card__media { height: auto; aspect-ratio: 2 / 1; justify-content: center; overflow: hidden; }
.sf-svl-card.has-picture .sf-svl-card__media { padding: 0; }
.sf-svl-card.has-picture .sf-svl-card__tile { position: absolute; inset: 0; z-index: 0; width: auto; height: auto; border-radius: inherit; background: transparent; box-shadow: none; }
.sf-svl-card.has-picture .sf-svl-card__tile img { object-fit: contain; }
.sf-svl-card.has-picture .sf-fav-heart { z-index: 2; }

.sf-svd__tile.has-picture { width: 176px; height: 88px; border-radius: 16px; background: #fff; }
.sf-svd__tile.has-picture img, .sf-svd-related__tile.has-picture img { object-fit: contain; }
.sf-svd-related__tile.has-picture { width: 72px; height: 36px; border-radius: 8px; background: #fff; }

@media (max-width: 640px) {
  .sf-svl-card__media { aspect-ratio: auto; }
  .sf-svl-card.has-picture .sf-svl-card__tile { position: relative; inset: auto; width: 56px; height: 56px; border-radius: 15px; background: #fff; }
  .sf-svd__tile.has-picture { width: 128px; height: 64px; border-radius: 14px; }
}