/* Desktop layer (>= 1024px). Phones keep the app shell (app bar + tab bar); here the chrome becomes a proper site:
   header with search and navigation, wider content, grids instead of horizontal rails, inline buy panel. Tokens only. */

.site-header, .topbar, .rail-btn { display: none; }

@media (min-width: 1024px) {
  /* ---- chrome: header replaces app bar + tab bar ---- */
  /* slim info bar above the header: delivery promise, phone, store address (desktop only; the footer repeats it in full) */
  .topbar { display: block; background: var(--ink-900); color: var(--ink-300); font-size: var(--fs-caption); }
  .topbar-in { max-width: var(--content-max); margin: 0 auto; padding: var(--s-2) var(--s-8); display: flex; gap: var(--s-8); list-style: none; }
  .topbar-in li { display: flex; align-items: center; gap: var(--s-2); }
  .topbar-in .ic { color: var(--accent-500); }
  .topbar-in a { color: var(--white); font-weight: 700; }
  .site-header { display: block; position: sticky; top: 0; z-index: var(--z-appbar); background: var(--surface);
                 box-shadow: 0 1px 0 var(--line); view-transition-name: appbar;
                 transition: box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
  .site-header.is-stuck { box-shadow: 0 1px 0 var(--line), var(--e-1); }
  .sh-inner { max-width: var(--content-max); margin: 0 auto; height: 72px; padding: 0 var(--s-8); display: flex; align-items: center; gap: var(--s-6); }
  .sh-brand { display: flex; align-items: center; gap: var(--s-3); font-weight: 800; font-size: var(--fs-headline); letter-spacing: -.02em; flex: none; }
  .sh-brand img { width: 40px; height: 40px; border-radius: var(--r-md); object-fit: cover; background: var(--surface-2); }
  .sh-search { flex: 1; max-width: 560px; min-height: 48px; background: var(--surface-2); box-shadow: none; }
  .sh-search:focus-within { background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink-900); }
  .sh-nav { display: flex; gap: var(--s-1); margin-left: auto; }
  .sh-nav a { padding: var(--s-2) var(--s-3); border-radius: var(--r-full); font-weight: 700; color: var(--text-2);
              transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
  .sh-nav a:hover { background: var(--surface-2); color: var(--text); }
  .sh-nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
  .sh-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; }
  /* language: a small dropdown, flag + name */
  .sh-lang { position: relative; }
  .sh-lang summary { list-style: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-3);
                     border-radius: var(--r-full); background: var(--surface-2); font-weight: 700; cursor: pointer; user-select: none; }
  .sh-lang summary::-webkit-details-marker { display: none; }
  .sh-lang[open] summary, .sh-lang summary:hover { background: color-mix(in srgb, var(--surface-2) 70%, var(--ink-300)); }
  .sh-lang summary .ic:last-child { transform: rotate(90deg); color: var(--text-3); }
  .sh-lang .flag { width: 24px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); flex: none; }
  .sh-lang-menu { position: absolute; right: 0; top: calc(100% + var(--s-2)); min-width: 168px; padding: var(--s-2); border-radius: var(--r-lg);
                  background: var(--surface); box-shadow: var(--e-3); z-index: var(--z-sheet); display: grid; gap: var(--s-1); }
  .sh-lang-menu button { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 0; border-radius: var(--r-md);
                         background: transparent; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; text-align: left; }
  .sh-lang-menu button:hover { background: var(--surface-2); }
  html[data-lang="ne"] .sh-lang [data-lang-current]::before { content: "नेपाली"; }
  html[data-lang="ne"] .sh-lang [data-lang-current] { font-size: 0; }
  html[data-lang="ne"] .sh-lang [data-lang-current]::before { font-size: var(--fs-body); }
  .sh-actions .icon-btn { box-shadow: none; background: var(--surface-2); }
  .sh-cart { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-5);
             border-radius: var(--r-full); background: var(--accent-500); color: var(--ink-900); font-weight: 800; }
  .sh-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-full); background: var(--ink-900); color: var(--white);
              font-size: var(--fs-caption); display: grid; place-items: center; }
  .sh-count[hidden] { display: none; }

  html body .tabbar, html body.buy .tabbar { display: none; }
  .appbar { display: none; }
  /* pages without a body heading keep their title: show just the title of the bar, as a page heading */
  .app .appbar.has-desk-title { display: block; position: static; max-width: 640px; margin-inline: auto; padding: var(--s-8) 0 var(--s-4); background: none; box-shadow: none; backdrop-filter: none; }
  .app .appbar.has-desk-title > :not(.appbar-title) { display: none; }
  .app .appbar.has-desk-title .appbar-title { opacity: 1; transform: none; font-size: 2.25rem; line-height: var(--lh-tight); font-weight: 800; letter-spacing: -.025em; margin: 0; }
  .hero-ink { display: none; }
  .appbar-sentinel { margin-top: 0; }

  /* ---- page frame ---- */
  .app { max-width: var(--content-max); padding-inline: var(--s-8); }
  :root, .app > * { --gutter: 0px; }
  .page { padding-top: var(--s-6); padding-bottom: var(--s-14); }
  .page-gutter { padding-inline: 0; }

  /* ---- account pages: narrow column, so the title sits over the content instead of the far left ---- */
  .app .olist { align-items: stretch; }
  .app .ocard { align-content: space-between; }
  /* contact buttons and flow actions size to their label, never stretch across the card */
  .app .helpbar { display: flex; flex-wrap: wrap; gap: var(--s-3); }
  .app .helpbar .btn { flex: 0 0 auto; min-width: 180px; }
  .app .os-actions { display: flex; gap: var(--s-3); }
  .app .os-actions .btn { flex: 1 1 0; }

  /* ---- account hub: who you are on the left, the menus as cards on the right ---- */
  .app .acct { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
  .app .acct-side { position: sticky; top: calc(72px + var(--s-6)); display: grid; gap: var(--s-4); }
  .app .acct .me { flex-direction: column; text-align: center; padding: var(--s-8) var(--s-6); border-radius: var(--r-xl);
                   background: var(--surface); box-shadow: var(--e-1); }
  .app .acct .avatar { width: 96px; height: 96px; }
  .app .acct .menu, .app .acct .guest-card, .app .acct .addr, .app .acct .menu-title { max-width: none; margin-inline: 0; }
  .app .acct .me, .app .acct .addr { margin: 0; }
  .app .acct-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: start; }
  .app .acct-group .menu-title { margin: 0 0 var(--s-3); }
  .app .acct-logout { grid-column: 1 / -1; margin-top: 0; }
  .app .menu-row:hover { background: var(--surface-2); }

  /* ---- order status: progress runs across as a stepper, then items on the left and delivery + help on the right ---- */
  .app .os-body { max-width: 1040px; margin-inline: auto; gap: var(--s-5); align-items: start; }
  .app .os-body .timeline { margin: 0; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .app .os-body .tl { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--s-2); padding: 0; }
  .app .os-body .tl::before { left: calc(50% + 20px); top: 13px; bottom: auto; width: calc(100% - 40px); height: 2px; }
  .app .os-body .tl-label { padding-top: 0; }
  .app .os-body h2 { margin-bottom: var(--s-5); }
  .app .os-main { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .app .os-main > .os-actions { grid-column: 1 / -1; }
  .app .os-hero { padding-top: var(--s-8); }

  /* ---- empty states span the whole grid row so they centre under the title, and the order tabs size to their labels ---- */
  .app .empty { grid-column: 1 / -1; }
  .app .otabs { width: fit-content; margin-inline: 0; }
  .app .otabs button { min-height: 36px; padding-inline: var(--s-6); }

  /* ---- order detail: status and items on the left, delivery, payment and help on the right ---- */
  .app .detail { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; padding: 0; }

  /* ---- service detail: photo on the left, what it is and the booking button on the right ---- */
  .app .svc-detail { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-10); align-items: start; padding-top: var(--s-4); }
  .app .svc-hero { margin: 0; aspect-ratio: 4 / 3; }
  .app .svc-detail .svc-body { padding: var(--s-2) 0 0; }
  .app .svc-detail .svc-body h1 { font-size: 2.25rem; }
  .app .book-bar { position: static; margin: var(--s-8) 0 0; }
  .app .book-bar .btn { width: auto; min-width: 260px; }

  /* ---- contact: ways to reach us on the left, the form on the right ---- */
  .app .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: max-content 1fr; max-width: none; margin: 0; gap: var(--s-4) var(--s-6); align-items: start; }
  .app .contact-grid .menu { grid-column: 1; max-width: none; margin: 0; }
  .app .contact-grid .form-page { grid-column: 2; grid-row: 1 / span 2; max-width: none; margin: 0; }
  .app .contact-grid .helpbar { grid-column: 1; padding: 0; }

  /* ---- auth (login, signup, otp, forgot): one centred card, brand panel left, form right ---- */
  .app .auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 0; max-width: 960px; margin: var(--s-10) auto 0;
               border-radius: var(--r-xl); overflow: hidden; background: var(--surface); box-shadow: var(--e-3); }
  .app .auth .auth-hero { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-8); border-radius: 0; padding: var(--s-10); }
  .app .auth .auth-hero > * { max-width: none; margin-inline: 0; }
  .app .auth .auth-hero { justify-content: flex-start; background-image: radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--accent-500) 38%, transparent), transparent 62%); }
  /* copy and perks stay in view beside a tall form (sign up) instead of sinking to the bottom of the card */
  .app .auth .auth-stick { display: grid; gap: var(--s-8); position: sticky; top: calc(72px + var(--s-8)); margin-top: var(--s-14); align-self: stretch; }
  .app .auth .auth-hero h1 { margin-top: 0; font-size: 2.25rem; }
  .app .auth .auth-hero .auth-copy p { margin-top: var(--s-3); font-size: var(--fs-body); }
  .app .auth .auth-perks { display: grid; gap: var(--s-3); list-style: none; margin: 0; padding: var(--s-6) 0 0; border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
                           color: var(--ink-200); font-weight: 600; }
  .app .auth .auth-perks li { display: flex; align-items: center; gap: var(--s-3); }
  .app .auth .auth-perks span { width: 32px; height: 32px; border-radius: var(--r-full); display: grid; place-items: center; flex: none;
                                background: color-mix(in srgb, var(--accent-500) 22%, transparent); color: var(--accent-300, var(--accent-500)); }
  .app .auth .auth-sheet { width: auto; margin: 0; border-radius: 0; box-shadow: none; padding: var(--s-10); align-content: center; }
  .section-head { margin-top: var(--s-10); margin-bottom: var(--s-5); }
  .section-head h2 { font-size: var(--fs-title); }
  .large-title { padding-top: var(--s-2); font-size: 2.25rem; }
  .footer-slim { display: block; padding: var(--s-8) 0 var(--s-10); border-top: 1px solid var(--line); margin-top: var(--s-10); }

  /* ---- product grids ---- */
  .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); padding-inline: 0; }
  .pcard { padding: var(--s-4); transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-3) var(--spring-soft); }
  .pcard:hover { box-shadow: var(--e-2); transform: translateY(-3px); }
  .pcard-name { font-size: var(--fs-body); }
  .hscroll { padding-inline: 0; }
  .hscroll.prods > .pcard { flex-basis: 220px; }
  .app .hscroll.again > .pcard { flex-basis: 320px; }

  /* ---- home ---- */
  .app .home-sheet { margin-top: 0; }
  .app .hero-row { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s-6); align-items: start; margin-bottom: var(--s-10); }   /* room for the stack layers peeking out below */
  .app .hero-stack { position: relative; }
  .app .promo-stack { margin: 0; isolation: isolate; }
  .app .promo-stack > * { box-shadow: 0 8px 20px -6px rgb(15 27 51 / .38); }   /* each layer casts onto the one behind it */
  /* controls sit on the artwork instead of taking a row below it: arrows at the edges, dots in a pill at the bottom */
  .app .stack-controls { display: contents; }
  .app .stack-controls .icon-btn { display: grid; position: absolute; top: 50%; translate: 0 -50%; z-index: var(--l-1); width: 44px; height: 44px;
                                   background: color-mix(in srgb, var(--white) 88%, transparent); box-shadow: var(--e-2); opacity: 0;
                                   transition: opacity var(--dur-2) var(--ease-out); }
  .app .stack-controls .icon-btn[data-stack-prev] { left: var(--s-3); }
  .app .stack-controls .icon-btn[data-stack-next] { right: var(--s-3); }
  .app .hero-stack:hover .stack-controls .icon-btn, .app .stack-controls .icon-btn:focus-visible { opacity: 1; }
  .app .stack-controls .promo-dots { position: absolute; left: 50%; bottom: var(--s-3); translate: -50% 0; z-index: var(--l-1); padding: var(--s-2) var(--s-3);
                                     border-radius: var(--r-full); background: color-mix(in srgb, var(--ink-900) 55%, transparent); }
  .app .stack-controls .promo-dots i { background: color-mix(in srgb, var(--white) 55%, transparent); }
  .app .stack-controls .promo-dots i[aria-current="true"] { background: var(--white); }
  /* two stacked cards beside the stack: promo banners from the dashboard, or the first two categories */
  .app .hero-side { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: var(--s-4); align-self: stretch; }
  .app .hero-side > .promo, .app .hero-side > .promo-poster { flex: none; width: auto; min-height: 0; aspect-ratio: auto; padding: var(--s-5); }
  .app .hero-side > .promo .promo-title { font-size: var(--fs-headline); }
  .app .hero-side > .promo .promo-copy { max-width: 52%; }
  .app .hero-side > .promo:not(.promo-photo) .promo-img { right: var(--s-3); bottom: var(--s-3); width: 48%; max-height: 80%; }
  .app .hero-tile { position: relative; display: grid; align-content: space-between; min-height: 150px; padding: var(--s-5); border-radius: var(--r-xl);
                    background: var(--tint, var(--surface-2)); overflow: hidden; font-weight: 800; font-size: var(--fs-headline); letter-spacing: -.01em;
                    transition: transform var(--dur-3) var(--spring-soft), box-shadow var(--dur-2) var(--ease-out); }
  .app .hero-tile:hover { transform: translateY(-3px); box-shadow: var(--e-2); }
  .app .hero-tile img { position: absolute; right: var(--s-4); bottom: var(--s-4); width: 48%; height: 70%; object-fit: cover; border-radius: var(--r-lg); }
  .app .hero-tile-name { position: relative; z-index: var(--l-1); max-width: 50%; }
  .app .promo-stack > .promo { padding: var(--s-10); }
  .app .promo-stack > .promo .promo-title { font-size: 2.75rem; }
  .app .promo-stack > .promo .promo-sub { font-size: var(--fs-body); }
  .app .promo-stack > .promo:not(.promo-photo) .promo-img { width: 54%; right: var(--s-4); bottom: var(--s-4); max-height: 100%; }
  .app .promo-title { font-size: 2rem; }
  .app .promo-sub { font-size: var(--fs-body); }
  .app .promo-copy { max-width: 46%; }
  .app .promo-dots { padding-top: var(--s-4); }
  .app .rail-wrap { position: relative; }
  .app .rail-btn { display: grid; position: absolute; top: 50%; z-index: var(--l-2); width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center;
              border: 0; border-radius: var(--r-full); background: var(--surface); color: var(--text); box-shadow: var(--e-2); cursor: pointer; }
  .app .rail-btn.prev { left: calc(var(--s-4) * -1); }
  .app .rail-btn.next { right: calc(var(--s-4) * -1); }
  .app .rail-btn:hover { background: var(--surface-2); }
  .app .hscroll.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: var(--s-6) var(--s-4); overflow: visible; padding: 0; }
  .app .hscroll.cats > .cat { width: auto; font-size: var(--fs-body); }
  .app .cat-img { width: 104px; height: 104px; border-radius: var(--r-xl); transition: transform var(--dur-3) var(--spring-soft); }
  .app .cat:hover .cat-img { transform: translateY(-3px) scale(1.03); }
  .app .strip { padding-inline: 0; }
  .app .slot-banner { padding: var(--s-10) 0 0; }
  .app .slot-banner > .promo { min-height: 220px; padding: var(--s-10); }
  .app .slot-banner.is-multi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); overflow: visible; }
  .app .slot-banner.is-multi.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app .slot-banner.is-multi > .promo { min-height: 200px; padding: var(--s-6); }
  .app .slot-banner.is-multi > .promo, .app .slot-banner.is-multi > .promo-poster { flex: none; width: auto; }
  .app .slot-banner.is-multi > .promo-poster { aspect-ratio: 16 / 9; }
  .app .slot-banner > .promo-poster { aspect-ratio: 21 / 6; }
  .app .svc-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); overflow: visible; padding: 0; }
  .app .svc-card { flex: none; transition: transform var(--dur-3) var(--spring-soft), box-shadow var(--dur-2) var(--ease-out); }
  .app .svc-card:hover { transform: translateY(-3px); box-shadow: var(--e-2); }
  .app .svc-body { padding: var(--s-5); }

  /* ---- product page: gallery left (sticky), info + buy panel right ---- */
  .app .pdp-bar { display: none; }
  .app .pdp { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s-10); padding-inline: 0; padding-bottom: 0; }
  .app .pdp-hero { aspect-ratio: 1 / 1; max-height: 640px; top: calc(72px + var(--s-6)); border-radius: var(--r-xl); }
  .app .pdp-hero img { padding: var(--s-10); }
  .app .pdp-name { font-size: 2rem; }
  .app .pdp-price { font-size: 2.25rem; }
  .app .pdp-body { gap: var(--s-6); }
  .app .pdp-related { padding-bottom: var(--s-8); padding-inline: 0; }
  .app .pdp-related .hscroll { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); overflow: visible; padding: 0; }
  .app .pdp-related .hscroll.prods > .pcard { flex: none; }
  .app .pdp-related .section-head { padding-inline: 0; }
  /* the buy bar becomes an in-flow panel in the info column */
  .app .pbar { position: static; z-index: auto; width: auto; transform: none; left: auto; right: auto; bottom: auto; animation: none; padding: var(--s-5);
          border-radius: var(--r-xl); box-shadow: var(--e-1); }
  .app .pbar-row { gap: var(--s-4); }
  .app .pbar-go { min-height: 56px; font-size: var(--fs-headline); }
  .app [data-page="product"] .toast { bottom: var(--s-6); }
  .app [data-page="product"] .order-pill { bottom: var(--s-6); }

  /* ---- listing pages ---- */
  .app .chips { flex-wrap: wrap; padding-inline: 0; overflow: visible; }
  .app .chips.recent { margin-inline: 0; }   /* mobile bleeds to the card edge; here the chips line up with the label */

  /* ---- floating bits ---- */
  .order-pill { right: var(--s-6); bottom: var(--s-6); max-width: 320px; border-radius: var(--r-full); }
  .toasts { bottom: var(--s-6); }
}

@media (min-width: 1024px) {
  /* 4-up: home shows 10 products, hide the last 2 so the final row is never ragged */
  .home-sheet .grid-products > :nth-child(n+9) { display: none; }
}
@media (min-width: 1280px) {
  .grid-products { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .home-sheet .grid-products > :nth-child(n+9) { display: grid; }
}

/* ---- desktop footer: the full store details (phones get them under Account > Help) ---- */
.site-footer { display: none; }
@media (min-width: 1024px) {
  .footer-slim { display: none; }
  .site-footer { display: block; margin-top: var(--s-10); background: var(--ink-900); border-radius: var(--r-xl) var(--r-xl) 0 0; color: var(--ink-300); }
  .sf-inner { max-width: var(--content-max); margin: 0 auto; padding: var(--s-14) var(--s-8) var(--s-8); }
  .sf-grid { display: grid; grid-template-columns: 1.15fr 1.15fr .8fr 1.1fr; gap: var(--s-10); }
  .sf-col h2 { color: var(--white); font-size: var(--fs-headline); font-weight: 800; letter-spacing: -.01em; margin-bottom: var(--s-5); }
  .sf-phone { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
  .sf-ico { width: 48px; height: 48px; border-radius: var(--r-full); display: grid; place-items: center; background: rgb(255 255 255 / .08); color: var(--white); flex: none; }
  .sf-phone small, .sf-facts small { display: block; font-size: var(--fs-caption); font-weight: 600; color: var(--ink-300); }
  .sf-phone b { color: var(--white); font-size: var(--fs-headline); font-weight: 800; }
  .sf-list, .sf-links, .sf-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
  .sf-list li { display: flex; align-items: center; gap: var(--s-3); }
  .sf-list a, .sf-links a, .sf-facts a { color: var(--white); font-weight: 600; transition: color var(--dur-2) var(--ease-out); }
  .sf-list a:hover, .sf-links a:hover, .sf-facts a:hover { color: var(--accent-500); }
  .sf-facts li { display: flex; gap: var(--s-3); align-items: flex-start; }
  .sf-facts .ic { margin-top: 2px; color: var(--ink-300); flex: none; }
  .sf-facts b { color: var(--white); font-weight: 700; }
  .sf-label { margin: var(--s-6) 0 var(--s-3); font-size: var(--fs-caption); font-weight: 700; color: var(--ink-300); }
  .sf-social { display: flex; gap: var(--s-2); }
  .sf-social a { width: 44px; height: 44px; border-radius: var(--r-full); display: grid; place-items: center; background: rgb(255 255 255 / .08);
                 color: var(--white); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
  .sf-social a:hover { background: var(--accent-500); color: var(--ink-900); }
  .sf-text { margin: 0 0 var(--s-4); font-size: var(--fs-small); max-width: 32ch; }
  .sf-news { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1); border-radius: var(--r-full); background: rgb(255 255 255 / .08); }
  .sf-news input { flex: 1; min-width: 0; height: 44px; padding: 0 var(--s-4); border: 0; background: transparent; color: var(--white); font-size: var(--fs-small); }
  .sf-news input::placeholder { color: var(--ink-300); }
  .sf-news input:focus { outline: 0; }
  .sf-news:focus-within { box-shadow: 0 0 0 2px var(--accent-500); }
  .sf-news button { width: 44px; height: 44px; border: 0; border-radius: var(--r-full); background: var(--accent-500); color: var(--ink-900); display: grid; place-items: center; cursor: pointer; }
  .sf-msg { min-height: 1.4em; margin: var(--s-2) 0 0; font-size: var(--fs-small); font-weight: 700; color: var(--white); }
  .sf-msg.is-error { color: var(--accent-100); }
  .sf-bottom { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-10); padding-top: var(--s-6);
               border-top: 1px solid rgb(255 255 255 / .12); font-size: var(--fs-small); }
  .sf-bottom p { margin: 0; display: flex; align-items: center; gap: var(--s-2); }
  .sf-bottom b { color: var(--white); }
}