/* /sahi/customer-support/ (Support).
   sahi.com's page is one lavender surface: a soft glow at the top, three
   contact cards, the FAQ search and a three-column grid of 44 categories, then
   the address. Same here on --bg-alt, with the fixes: the breadcrumb clears
   the floating header, the contact cards act (mail, call, the chat answer) and
   have their own icons, counts read the same in every category, and the
   search works across all 452 questions (customer-support.js). */

/* ---- Top: glow, breadcrumb, title, contact cards -------------------------- */
.cs-hero { position: relative; isolation: isolate; overflow: hidden; padding-bottom: clamp(32px, 4vw, 48px); }
.cs-hero::before {
  content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: 340px; pointer-events: none;
  background:
    radial-gradient(50% 90% at 8% 0%, var(--brand-soft), transparent 72%),
    radial-gradient(45% 80% at 92% 0%, var(--brand-wash), transparent 72%);
}
.cs-hero h1 { max-width: 22ch; }
.cs-contact { margin: clamp(28px, 3.4vw, 40px) auto 0; padding: 0; max-width: 1080px; text-align: left; }
.cs-contact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .cs-contact { grid-template-columns: 1fr; } }
.band--alt .cs-card { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 16px; border-color: var(--line); border-radius: var(--radius-sm); }
.cs-card__txt { display: grid; gap: 10px; min-width: 0; }
.cs-card__title { font: 500 20px/1.3 var(--sans); letter-spacing: 0; }
.cs-card p { font-size: 16px; color: var(--ink-2); }
.cs-card .cs-card__note { font-size: 15px; color: var(--ink-3); }
.cs-card__act { display: inline-flex; align-items: center; min-height: 32px; color: var(--brand-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--brand-line); text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; transition: text-decoration-color .2s, color .2s; }
.cs-card__act:hover { text-decoration-color: currentColor; }
.cs-card .card__icon { flex: none; }

/* ---- Got questions? + search ----------------------------------------------- */
.cs-faq { padding-top: clamp(32px, 4vw, 48px); }
.cs-search { max-width: 760px; margin: clamp(20px, 2.6vw, 28px) auto 0; }
html:not(.js) .cs-search { display: none; } /* a search box that cannot search is not offered */
.cs-search__label { display: block; margin-bottom: 8px; font: 500 14px/1.3 var(--sans); color: var(--ink); }
.cs-search__box { position: relative; }
.cs-search__box svg { position: absolute; left: 18px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.cs-search input { width: 100%; min-height: 52px; padding: 0 20px 0 44px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); color: var(--ink); font: 400 16px/1.2 var(--sans); box-shadow: var(--shadow-1); transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.cs-search input::placeholder { color: var(--ink-3); opacity: 1; }
.cs-search input:hover { border-color: var(--ink-3); }
.cs-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--brand-line); }
.cs-search input::-webkit-search-cancel-button { cursor: pointer; }
.cs-search__status { margin-top: 12px; font-size: 14px; color: var(--ink-2); text-align: center; }
.cs-search__status:empty { display: none; }
.cs-search.has-none .cs-search__status { padding: 16px 20px; border: 1px dashed var(--hairline); border-radius: var(--radius-sm); background: var(--surface); font-size: 15px; }

/* ---- Category grid ------------------------------------------------------------ */
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 48px) clamp(24px, 3.4vw, 44px); margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 1000px) { .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cs-grid { grid-template-columns: 1fr; gap: 32px; } }
.cs-cat[hidden] { display: none; }
.cs-cat__title { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font: 500 18px/1.35 var(--disp); letter-spacing: 0; color: var(--ink); }
.cs-cat__title a { display: inline-block; padding-block: 3px; color: inherit; text-decoration: none; border-radius: 4px; }
.cs-cat__title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* sahi.com set the count in the display face, whose ligatures turn "(3)" into a
   circled 3 while "(19)" stays in brackets. The count is plain text here. */
.cs-cat__n { font: 400 15px/1 var(--sans); font-variant-ligatures: none; font-feature-settings: "liga" 0, "dlig" 0, "calt" 0; font-variant-numeric: tabular-nums; color: var(--ink-3); white-space: nowrap; }
.cs-cat__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cs-cat__list a { display: block; padding: 6px 0; color: var(--ink-2); font-size: 16px; line-height: 1.45; text-decoration: none; border-radius: 4px; transition: color .15s; }
.cs-cat__list a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cs-cat__list li[hidden] { display: none; }
/* Past the third question: on sahi.com's category page (View All), or found by search. */
.cs-grid:not(.is-searching) .cs-more { display: none; }
.cs-cat__all { display: inline-flex; align-items: center; min-height: 32px; margin-top: 6px; font-weight: 500; color: var(--brand-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cs-cat__all:hover { text-decoration-thickness: 2px; }
.is-searching .cs-cat__all { display: none; }
.cs-cat mark { padding: 0 1px; border-radius: 3px; background: var(--brand-soft); color: var(--ink); }

/* ---- Address ------------------------------------------------------------------ */
.cs-addr { padding-top: 0; }
.cs-addr__line { margin-top: 12px; color: var(--ink-2); font-style: normal; }
.cs-addr__also { margin-top: 6px; font-size: 14px; color: var(--ink-3); }
.cs-addr__also span { font-weight: 500; }
.cs-addr .cs-addr__slogan { margin-top: clamp(32px, 4vw, 44px); }