/* ==========================================================================
   CrysMed — Base + Layout
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

@media (max-width: 720px) {
  .container { padding-inline: var(--sp-4); }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-700);
}
.eyebrow::before {
  content: "";
  width: 14px;
  height: 1.5px;
  background: var(--accent-500);
  display: inline-block;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-normal);
  border-radius: var(--r-md);
  padding: .625rem var(--sp-5);
  border: 1px solid transparent;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--premium-500);
  color: var(--white);
}
.btn-primary:hover { background: var(--brand-900); }

.btn-ghost {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--ink-900); }

.btn-text {
  background: transparent;
  color: var(--brand-700);
  font-weight: var(--fw-bold);
  padding: .625rem var(--sp-2);
  text-decoration: none;
}
.btn-text:hover { color: var(--brand-900); text-decoration: underline; }

/* ==========================================================================
   Header
   ========================================================================== */

.prelaunch-banner {
  background: #fbbf24;
  color: #451a03;
}
.prelaunch-banner .container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-align: center;
  max-width: 1600px;
}
.utility-bar {
  background: linear-gradient(90deg, var(--brand-700), var(--brand-900));
  color: var(--surface);
}
.utility-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  font-size: var(--fs-2xs);
  max-width: 1600px;
}
.utility-bar__left, .utility-bar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.utility-bar a { opacity: .85; transition: opacity .15s var(--ease); }
.utility-bar a:hover { opacity: 1; }
.utility-bar__right a.is-current { color: var(--white); font-weight: var(--fw-bold); opacity: 1; }
.utility-bar__locale {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: var(--fw-medium);
}

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header .container {
  display: flex;
  align-items: center;
  height: 68px;
  gap: var(--sp-4);
  max-width: 1600px;
}

.logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.logo__img {
  height: 85px;
  width: auto;
  display: block;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
  min-width: 0;
}
.primary-nav a {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-700);
  padding-block: 4px;
  border-bottom: 1.5px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
  white-space: nowrap;
}
.primary-nav a:hover {
  color: var(--ink-900);
  border-color: #f7c22e;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}
.header-actions .btn { padding-inline: var(--sp-4); }
.header-actions .btn-primary { background: var(--badge-amber); }
.header-actions .btn-primary:hover { background: #c6660a; }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  transition: transform .1s var(--ease), background-color .1s var(--ease);
}
.nav-toggle:active { transform: scale(.92); background: var(--surface); }
@media (max-width: 1320px) {
  .nav-toggle { width: 44px; height: 44px; }
}

.primary-nav__mobile-utility { display: none; }

@media (max-width: 1320px) {
  .primary-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .utility-bar__left > *:not(.utility-bar__locale) { display: none; }
  .utility-bar__right { display: none; }

  .primary-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-2) var(--sp-6) var(--sp-4);
    gap: 0;
    box-shadow: var(--shadow-hover);
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }
  .primary-nav.is-open a {
    padding-block: var(--sp-3);
    border-bottom: 1px solid var(--line);
    white-space: normal;
  }
  .primary-nav.is-open a:last-child { border-bottom: none; }

  .primary-nav__mobile-utility {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--sp-2);
  }
  .primary-nav__mobile-utility a {
    font-size: .75rem;
    font-weight: var(--fw-medium);
    color: var(--ink-500);
  }
}
@media (max-width: 480px) {
  .header-actions .btn-ghost { display: none; }
}

/* ==========================================================================
   Hero (Version 2 — warm-tinted zone, card overlaps down into the page.
   Orange is the dominant ACCENT here, not a saturated background.)
   ========================================================================== */

.hero-v2 {
  background: var(--peach-tint);
}
.hero-v2 .container {
  padding-block: var(--sp-7) var(--sp-9);
}

.hero__top {
  display: grid;
  grid-template-columns: 1fr .78fr;
  gap: var(--sp-7);
  align-items: center;
}

.eyebrow--v2 { color: var(--brand-900); }
.eyebrow--v2::before { background: var(--brand-700); }

.hero-v2__headline {
  font-size: 2.375rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--lh-tight);
  color: var(--ink-900);
  margin-block: var(--sp-3) var(--sp-3);
}
.hero-v2__headline em { font-style: normal; color: var(--brand-700); }

.hero-v2__sub {
  font-size: var(--fs-xs);
  color: var(--ink-700);
  line-height: var(--lh-relaxed);
  max-width: 42ch;
  margin-bottom: var(--sp-4);
}

.hero__cta {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.hero__cta .btn { padding-block: .5rem; }

.hero-v2__checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-2xs);
  color: var(--ink-500);
  font-weight: var(--fw-medium);
}
.hero-v2__checks li { display: flex; align-items: center; gap: 5px; }
.hero-v2__checks li::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand-tint-strong);
  color: var(--brand-900);
  font-size: 8px;
  font-weight: var(--fw-bold);
}

.hero__media { position: relative; }
.hero-v2__frame {
  border-radius: var(--r-lg);
  border: 1px solid var(--brand-tint-strong);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  box-shadow: 0 16px 40px rgba(22,22,22,.14);
}
.placeholder-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--sp-2);
  color: var(--ink-500);
  font-size: var(--fs-2xs);
  text-align: center;
  padding: var(--sp-5);
  background:
    repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 10px, var(--surface) 10px, var(--surface) 20px);
}
.placeholder-img svg { width: 32px; height: 32px; opacity: .5; }

/* Real <img> tags reuse the same layout classes (width/height/border-radius
   set by .placeholder-img and page-specific combinator classes) but need
   photo-appropriate rendering instead of the decorative stripe pattern. */
img.placeholder-img {
  display: block;
  object-fit: cover;
  padding: 0;
  background: none;
}

.hero-v2__floatcard {
  position: absolute;
  left: -1.25rem;
  bottom: -.5rem;
  z-index: 3;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 14px 32px rgba(22,22,22,.16);
  padding: var(--sp-3) var(--sp-4);
  width: 195px;
}
.hero-v2__floatcard-tag {
  display: inline-block;
  font-size: .625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-900);
  background: var(--brand-tint);
  padding: 2px 7px;
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-2);
}
.hero-v2__floatcard p {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

/* White zone below the navy hero — search card overlaps upward into it */
.hero-search-zone {
  background: var(--paper);
  padding-bottom: var(--sp-3);
}

.search-panel--card {
  margin-top: -2.5rem;
  position: relative;
  z-index: 2;
}

/* Search panel — dense bank-style form row, not a soft pill */
.search-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 48px rgba(8,13,51,.18);
  padding: var(--sp-3);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 1px;
  background-color: var(--line);
  margin-bottom: var(--sp-5);
}
.search-field {
  background: var(--white);
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.search-field:first-child { border-top-left-radius: var(--r-md); border-bottom-left-radius: var(--r-md); }
.search-field label {
  font-size: .6875rem;
  font-weight: var(--fw-semibold);
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.search-field select,
.search-field input {
  border: none;
  outline: none;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-900);
  background: transparent;
  padding: 0;
  width: 100%;
}
.search-panel .btn-primary {
  border-radius: var(--r-md);
  padding-inline: var(--sp-6);
  margin: 2px;
}

@media (max-width: 640px) {
  .search-panel { grid-template-columns: minmax(0, 1fr); }
  .search-panel .btn-primary { width: 100%; margin: 2px 0 0; }
}

/* Trust icon row — dense, single line of 4 */
.hero__trustrow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}
.trust-item > .trust-item__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.trust-item__icon svg { width: 14px; height: 14px; stroke-width: 2.6; }
.trust-item b {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
  line-height: var(--lh-snug);
}
.trust-item span {
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

@media (max-width: 980px) {
  .hero__top { grid-template-columns: minmax(0, 1fr); }
  .hero__media { order: -1; max-width: 420px; margin-inline: auto; }
  .hero-v2__floatcard { display: none; }
  .search-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .search-panel .btn-primary { grid-column: 1 / -1; margin: 2px 0 0; }
  .search-panel--card { margin-top: var(--sp-5); }
  .hero__trustrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hero__trustrow { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Section heading
   ========================================================================== */

.section {
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.section--tint { background: var(--paper); }
.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.section__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  margin-top: var(--sp-1);
}

/* ==========================================================================
   Categories
   ========================================================================== */

.section__sub {
  font-size: var(--fs-sm);
  color: var(--ink-700);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .section__head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cat-row {
  background: var(--white);
  padding: var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  transition: background-color .15s var(--ease);
}
.cat-row:hover { background: var(--brand-tint); }
.cat-row__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-row__icon svg {
  width: 16px;
  height: 16px;
  color: var(--brand-700);
  stroke-width: 1.7;
}
.cat-row__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cat-row__text b {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
  line-height: var(--lh-snug);
}
.cat-row__text span {
  font-size: .6875rem;
  color: var(--ink-500);
  line-height: var(--lh-snug);
}
.cat-row__arrow { display: none; }

@media (max-width: 980px) {
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Ad banner (sponsored)
   ========================================================================== */

.ad-strip {
  padding-block: var(--sp-4);
}
.ad-banner {
  display: grid;
  grid-template-columns: auto 1.4fr auto auto;
  align-items: center;
  gap: var(--sp-6);
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-6);
}
.ad-banner__label {
  display: block;
  font-size: .625rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-500);
  margin-bottom: 3px;
}
.ad-banner__brand b {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  white-space: nowrap;
}
.ad-banner__body h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  margin-bottom: 2px;
}
.ad-banner__body p {
  font-size: var(--fs-2xs);
  color: var(--ink-700);
}
.placeholder-img--sm {
  width: 150px;
  height: 64px;
  font-size: .5625rem;
  border-radius: var(--r-sm);
  padding: var(--sp-1);
}
.ad-banner__disclosure {
  text-align: right;
  max-width: 160px;
}
.ad-banner__disclosure a {
  display: block;
  font-size: .6875rem;
  font-weight: var(--fw-semibold);
  color: var(--brand-700);
  text-decoration: underline;
  margin-bottom: 3px;
}
.ad-banner__disclosure span {
  font-size: .625rem;
  color: var(--ink-500);
}

@media (max-width: 900px) {
  .ad-banner { grid-template-columns: minmax(0, 1fr); text-align: left; gap: var(--sp-3); }
  .ad-banner__disclosure { text-align: left; max-width: none; }
  .placeholder-img--sm { width: 100%; height: 90px; }
}

/* ==========================================================================
   Deals
   ========================================================================== */

.tab-row {
  display: flex;
  gap: var(--sp-6);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-5);
  overflow-x: auto;
}
.tab-item {
  background: none;
  border: none;
  padding: var(--sp-2) 0 var(--sp-3);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-500);
  white-space: nowrap;
  flex-shrink: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s var(--ease);
}
.tab-item:hover { color: var(--ink-900); }
.tab-item.is-active {
  color: var(--ink-900);
  border-bottom-color: var(--accent-500);
}

.deal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}
.deal-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.deal-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.deal-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--line-strong);
}
.deal-card__media {
  aspect-ratio: 4 / 3;
  background: var(--surface);
  position: relative;
}
.deal-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.deal-card__badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  background: #f26614;
  color: #ffffff;
  font-size: .625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
}
.deal-card__discount {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  background: var(--danger);
  color: var(--white);
  font-size: .625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
}
.deal-card__body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; }
.deal-card__provider {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .6875rem;
  font-weight: var(--fw-semibold);
  color: var(--brand-700);
  margin-bottom: var(--sp-2);
}
.deal-card__verified { display: inline-flex; }
.deal-card__verified svg { width: 12px; height: 12px; }
.deal-card__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-1);
}
.deal-card__meta {
  font-size: .6875rem;
  color: var(--ink-500);
  margin-bottom: var(--sp-1);
}
.deal-card__available {
  font-size: .6875rem;
  color: var(--success);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-3);
}
.deal-card__price {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.deal-card__price .now {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
}
.tag-selfpay {
  font-size: .625rem;
  font-weight: var(--fw-semibold);
  color: #ffffff;
  background: #f26614;
  padding: 2px 7px;
  border-radius: var(--r-sm);
}
.deal-card__desc {
  font-size: .75rem;
  color: var(--ink-500);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-3);
}
.deal-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .75rem;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.deal-card__footer span { color: #f26614; }
.deal-card__footer a { color: var(--brand-700); font-weight: var(--fw-bold); }

/* Sponsored deal card variant */
.deal-card--sponsored {
  background: var(--brand-tint);
  border-color: var(--brand-tint-strong);
}
.deal-card__sponsored-head {
  background: var(--brand-700);
  color: var(--white);
  font-size: .625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  padding: var(--sp-2);
}
.deal-card--sponsored .deal-card__provider { color: var(--brand-700); }
.deal-card__list {
  font-size: .75rem;
  color: var(--ink-700);
  padding-left: 1.1em;
  margin: 0 0 var(--sp-3);
}
.deal-card__list li { margin-bottom: 3px; }
.deal-card__fineprint {
  font-size: .6875rem;
  color: var(--ink-500);
  margin-bottom: var(--sp-3);
}
.btn-block { width: 100%; margin-top: auto; }

@media (max-width: 1180px) {
  .deal-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .deal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phone widths: card grids become a horizontal swipe carousel (one card + a
   peek of the next) instead of one long vertical stack — applies to every
   .deal-grid variant sitewide since they all share this base class. */
@media (max-width: 640px) {
  .deal-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--sp-4);
    padding-bottom: var(--sp-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .deal-grid::-webkit-scrollbar { display: none; }
  .deal-grid > * {
    flex: 0 0 78%;
    min-width: 0;
    scroll-snap-align: start;
  }
}

.btn-sm { padding: .4375rem var(--sp-4); font-size: .6875rem; }

/* ==========================================================================
   New this week + Gift voucher
   ========================================================================== */

.new-week-layout {
  display: grid;
  grid-template-columns: 1fr .58fr;
  gap: var(--sp-6);
  align-items: stretch;
}

.new-week-row {
  display: flex;
  align-items: stretch;
  gap: var(--sp-4);
}
.new-week-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.new-week-grid--2col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 1;
}
.mini-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
  transition: box-shadow .15s var(--ease);
}
.mini-card:hover { box-shadow: var(--shadow-hover); }
.mini-card__discount {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 1;
  background: var(--danger);
  color: var(--white);
  font-size: .625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
}
.mini-card .placeholder-img--sm {
  width: 100%;
  height: 92px;
  border-radius: 0;
}
.mini-card__img {
  width: 100%;
  height: 92px;
  object-fit: cover;
  display: block;
}
.mini-card__body {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mini-card__body b {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
}
.mini-card__body span {
  font-size: .6875rem;
  color: var(--ink-500);
}
.mini-card__price-row { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; white-space: nowrap; }
.mini-card__price {
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--ink-900) !important;
}
.mini-card__price-row s { font-size: .6875rem; color: var(--ink-300); }

.mini-card--sponsored {
  flex: 1;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--accent-tint);
  border-color: var(--accent-700);
}
.mini-card--sponsored .mini-card__sponsored-label {
  font-size: .625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-700);
  margin-bottom: 2px;
}
.mini-card--sponsored b { font-size: var(--fs-xs); color: var(--ink-900); }
.mini-card--sponsored > span { font-size: .6875rem; color: var(--ink-500); }
.mini-card--sponsored p { font-size: .75rem; color: var(--ink-700); margin: var(--sp-1) 0 var(--sp-3); }
.mini-card--sponsored .btn { margin-top: auto; }

.voucher-card {
  background: var(--accent-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.voucher-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--ink-900);
}
.voucher-card p { font-size: var(--fs-xs); color: var(--ink-700); line-height: var(--lh-relaxed); }
.voucher-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.voucher-amounts span {
  font-size: .75rem;
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 5px 12px;
}
.voucher-card .btn { align-self: flex-start; }
.voucher-card__media {
  width: 100%;
  height: 130px;
  margin-top: auto;
  border-radius: var(--r-md);
  object-fit: cover;
  display: block;
}

@media (max-width: 980px) {
  .new-week-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .new-week-row { flex-direction: column; }
}
@media (max-width: 640px) {
  .new-week-grid--2col {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--sp-3);
    padding-bottom: var(--sp-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .new-week-grid--2col::-webkit-scrollbar { display: none; }
  .new-week-grid--2col > * {
    flex: 0 0 46%;
    min-width: 160px;
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   Trusted providers
   ========================================================================== */

.provider-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-4);
}
.provider-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.provider-card:hover { box-shadow: var(--shadow-hover); border-color: var(--line-strong); }
.provider-card__media { position: relative; }
.provider-card__media .placeholder-img--sm { width: 100%; height: 84px; border-radius: 0; }
.provider-card__img { width: 100%; height: 84px; object-fit: cover; display: block; }
.provider-card__badge {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 1;
  background: #f26614;
  color: #ffffff;
  font-size: .5625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.provider-card__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
.provider-card__verified {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .625rem;
  font-weight: var(--fw-semibold);
  color: var(--brand-700);
  margin-bottom: 2px;
}
.provider-card__verified svg { width: 10px; height: 10px; }
.provider-card__body b { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-900); line-height: var(--lh-snug); }
.provider-card__meta { font-size: .625rem; color: var(--ink-500); }
.provider-card__body p { font-size: .6875rem; color: var(--ink-500); line-height: var(--lh-snug); margin: 3px 0 var(--sp-2); }
.provider-card__link { font-size: .6875rem; font-weight: var(--fw-bold); color: var(--brand-700); margin-top: auto; }

.coverage-card {
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.coverage-card b { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-900); margin-bottom: 4px; }
.coverage-card ul { margin: 2px 0 var(--sp-3); }
.coverage-card li { font-size: .75rem; color: var(--ink-700); line-height: 1.7; }
.coverage-card a { font-size: .6875rem; font-weight: var(--fw-bold); color: var(--brand-700); margin-top: auto; }

@media (max-width: 1180px) {
  .provider-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .provider-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--sp-4);
    padding-bottom: var(--sp-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .provider-grid::-webkit-scrollbar { display: none; }
  .provider-grid > * {
    flex: 0 0 78%;
    min-width: 0;
    scroll-snap-align: start;
  }
}

/* Sponsor strip */
.sponsor-strip {
  background: var(--surface);
  border-block: 1px solid var(--line);
  padding-block: var(--sp-3);
}
.sponsor-strip__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.sponsor-strip__tag {
  flex-shrink: 0;
  background: var(--brand-700);
  color: var(--white);
  font-size: .5625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-sm);
}
.sponsor-strip__inner p { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); }
.sponsor-strip__inner p b { font-size: var(--fs-xs); color: var(--ink-900); font-weight: var(--fw-semibold); }
.sponsor-strip__inner p span { font-size: .6875rem; color: var(--ink-500); }
.sponsor-strip__inner > a { flex-shrink: 0; font-size: .6875rem; font-weight: var(--fw-bold); color: var(--brand-700); }

@media (max-width: 720px) {
  .sponsor-strip__inner { flex-wrap: wrap; }
}

/* ==========================================================================
   Membership (dark emphasis section)
   ========================================================================== */

.membership {
  background: var(--ink-900);
  padding-block: var(--sp-7);
}
.membership__layout {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, .78fr) auto;
  gap: var(--sp-5);
  align-items: stretch;
}
.eyebrow--dark { color: var(--accent-500); }
.eyebrow--dark::before { background: var(--white); opacity: .5; }

.membership__intro { display: flex; flex-direction: column; padding-block: var(--sp-2); }
.membership__headline {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--accent-500);
  margin: var(--sp-2) 0 var(--sp-1);
}
.membership__tagline {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--white);
  margin-bottom: var(--sp-2);
}
.membership__body {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.65);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-4);
  max-width: 34ch;
}
.membership__intro .btn { align-self: flex-start; }
.membership__fineprint {
  font-size: .6875rem;
  color: rgba(255,255,255,.4);
  margin-top: var(--sp-3);
}

.pricing-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  position: relative;
}
.pricing-card b { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--white); margin-bottom: var(--sp-2); }
.pricing-card__price { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--white); margin-bottom: var(--sp-3); }
.pricing-card__price span { font-size: .6875rem; font-weight: var(--fw-regular); color: rgba(255,255,255,.5); }
.pricing-card ul { margin-bottom: var(--sp-4); }
.pricing-card li {
  font-size: .75rem;
  color: rgba(255,255,255,.75);
  line-height: 1.9;
  padding-left: 1.1em;
  position: relative;
}
.pricing-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-500);
  font-weight: var(--fw-bold);
}
.pricing-card__desc { font-size: .75rem; color: rgba(255,255,255,.55); line-height: var(--lh-relaxed); margin-bottom: var(--sp-4); }
.pricing-card .btn { margin-top: auto; }
.pricing-card--popular { border-color: var(--accent-500); background: rgba(0,124,122,.08); }
.pricing-card__tag {
  position: absolute;
  top: -11px;
  left: var(--sp-4);
  background: var(--accent-500);
  color: var(--white);
  font-size: .5625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
}
.btn-white { background: var(--white); color: var(--ink-900); }
.btn-white:hover { background: var(--surface); }

.membership__media {
  width: 150px;
  align-self: center;
  height: auto;
  aspect-ratio: 9 / 16;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-md);
  color: rgba(255,255,255,.5);
  /* Real screenshot (2026-09-04) doesn't exactly match this box's 9:16 ratio —
     contain (not cover) so the whole screen always shows, never cropped;
     any small top/bottom gap is filled by the box's own tint background. */
  object-fit: contain;
  padding: var(--sp-2);
}

@media (max-width: 1180px) {
  .membership__layout { grid-template-columns: 1fr 1fr 1fr; }
  .membership__intro { grid-column: 1 / -1; }
  .membership__media { display: none; }
}
@media (max-width: 640px) {
  .membership__layout { grid-template-columns: minmax(0, 1fr); }
}

/* Education partner banner (sponsor visual language, extended with a list) */
.ad-banner--edu {
  grid-template-columns: auto 1.3fr auto auto auto;
}
.ad-banner__list { font-size: .6875rem; color: var(--ink-700); }
.ad-banner__list li { margin-bottom: 2px; }
.ad-strip--edu { padding-block: var(--sp-4); }

@media (max-width: 900px) {
  .ad-banner--edu { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Learning / CME
   ========================================================================== */

.course-grid {
  display: grid;
  grid-template-columns: 1fr 1fr .7fr;
  gap: var(--sp-5);
}
.course-card {
  display: grid;
  grid-template-columns: 40% 1fr;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
}
.course-card .placeholder-img--sm { width: 100%; height: 100%; border-radius: 0; }
.course-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-card--tint { background: var(--brand-tint); border-color: var(--brand-tint-strong); }
.course-card__body { padding: var(--sp-4); display: flex; flex-direction: column; }
.course-card__tag {
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: var(--sp-2);
}
.course-card__body b { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-900); line-height: var(--lh-snug); margin-bottom: var(--sp-1); }
.course-card__meta { font-size: .75rem; color: var(--ink-700); margin-bottom: var(--sp-3); }
.course-card__body ul { margin-bottom: var(--sp-3); }
.course-card__body li { font-size: .75rem; color: var(--ink-700); line-height: 1.7; padding-left: 1em; position: relative; }
.course-card__body li::before { content: "•"; position: absolute; left: 0; color: var(--ink-500); }
.course-card__body > a { font-size: .8125rem; font-weight: var(--fw-bold); color: var(--brand-700); margin-top: auto; text-decoration: none; }
.course-card__body > a:hover { text-decoration: underline; }

.upcoming-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  background: var(--white);
}
.upcoming-card > b { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-900); margin-bottom: var(--sp-3); }
.upcoming-card ul { margin-bottom: var(--sp-3); }
.upcoming-card li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: .75rem;
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.upcoming-card li:first-child { padding-top: 0; }
.upcoming-card li span:first-child { color: var(--ink-900); font-weight: var(--fw-medium); }
.upcoming-card li span:last-child { color: var(--ink-500); }
.upcoming-card > a { font-size: .75rem; font-weight: var(--fw-bold); color: var(--brand-700); margin-top: auto; }

@media (max-width: 980px) {
  .course-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .upcoming-card { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .course-grid { grid-template-columns: minmax(0, 1fr); }
  .course-card { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   More support — International / Corporate / Home care / Careers
   ========================================================================== */

.section__sub--wide { max-width: 46ch; text-align: right; }

.feature-grid-lg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.feature-card-lg {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 320px;
  display: flex;
}
.feature-card-lg__bg { position: absolute; inset: 0; border-radius: 0; }
img.feature-card-lg__bg { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-card-lg--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,24,28,.15), rgba(20,24,28,.82));
}
.feature-card-lg--solid { background: var(--brand-900); }
.feature-card-lg__content {
  position: relative;
  z-index: 1;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--white);
  flex: 1;
}
.feature-card-lg__tag {
  display: inline-block;
  align-self: flex-start;
  font-size: .625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: rgba(255,255,255,.15);
  padding: 4px 10px;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-3);
}
.feature-card-lg__content h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-2);
}
.feature-card-lg__content p {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.8);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-4);
  max-width: 42ch;
}

.pill-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.pill-list li {
  font-size: .6875rem;
  font-weight: var(--fw-medium);
  color: var(--white);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  padding: 4px 10px;
  border-radius: var(--r-full);
}
.pill-list--light li { color: var(--brand-700); background: var(--brand-tint); border-color: var(--brand-tint-strong); }

.stat-row { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.stat-row > div {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  flex: 1;
  min-width: 110px;
}
.stat-row b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--white); }
.stat-row span { font-size: .6875rem; color: rgba(255,255,255,.65); }

.feature-card-lg__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.btn-outline-white { background: transparent; border: 1px solid rgba(255,255,255,.4); color: var(--white); }
.btn-outline-white:hover { border-color: var(--white); background: rgba(255,255,255,.08); }

.feature-grid-sm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); }
.feature-card-sm {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  background: var(--white);
  display: flex;
  flex-direction: column;
}
.feature-card-sm__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
}
.feature-card-sm__icon svg { width: 18px; height: 18px; color: var(--brand-700); }
.feature-card-sm b { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink-900); margin: var(--sp-1) 0 var(--sp-2); }
.feature-card-sm p { font-size: var(--fs-xs); color: var(--ink-700); line-height: var(--lh-relaxed); margin-bottom: var(--sp-3); max-width: 48ch; }
.feature-card-sm > a { font-size: .75rem; font-weight: var(--fw-bold); color: var(--brand-700); margin-top: auto; }

@media (max-width: 980px) {
  .feature-grid-lg, .feature-grid-sm { grid-template-columns: minmax(0, 1fr); }
  .section__sub--wide { text-align: left; }
}

/* ==========================================================================
   How it works + partnerships CTA
   ========================================================================== */

.steps-row {
  display: flex;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.step-item { display: flex; align-items: flex-start; gap: var(--sp-3); flex: 1; min-width: 190px; }
.step-item .step-item__num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-700);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.step-item b { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-900); margin-bottom: 2px; }
.step-item span { font-size: .75rem; color: var(--ink-500); line-height: var(--lh-snug); }

.partnership-cta {
  background: var(--accent-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: var(--sp-6);
  align-items: center;
}
.partnership-cta__intro h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  margin: var(--sp-2) 0 var(--sp-2);
}
.partnership-cta__intro p { font-size: var(--fs-xs); color: var(--ink-700); line-height: var(--lh-relaxed); max-width: 40ch; }
.partnership-cta__list { font-size: .75rem; color: var(--ink-700); }
.partnership-cta__list li { margin-bottom: 4px; padding-left: 1em; position: relative; }
.partnership-cta__list li::before { content: "–"; position: absolute; left: 0; color: var(--ink-500); }
.partnership-cta__actions { display: flex; flex-direction: column; gap: var(--sp-2); }

@media (max-width: 980px) {
  .partnership-cta { grid-template-columns: minmax(0, 1fr); }
  .steps-row { gap: var(--sp-5); }
}

/* ==========================================================================
   4-column info row + guidance CTA
   ========================================================================== */

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.info-card { background: var(--white); padding: var(--sp-5) var(--sp-4); display: flex; flex-direction: column; }
.info-card b { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-900); margin-bottom: var(--sp-3); }
.info-card ul { margin-bottom: var(--sp-3); }
.info-card li { font-size: .75rem; color: var(--ink-700); line-height: 1.9; }
.info-card > a { font-size: .75rem; font-weight: var(--fw-bold); color: var(--brand-700); margin-top: auto; }

.info-card__store-btns { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: auto; }
.store-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-900);
  color: var(--white);
  font-size: .6875rem;
  font-weight: var(--fw-semibold);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
}
.store-btn:hover { background: var(--ink-700); }

.info-card--media { padding: 0; }
.info-card--media .placeholder-img--sm { width: 100%; height: 100px; border-radius: 0; }
.info-card__img { width: 100%; height: 100px; object-fit: cover; display: block; }
.info-card__body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; }
.info-card__body p { font-size: .75rem; color: var(--ink-500); line-height: var(--lh-relaxed); margin-bottom: var(--sp-3); }
.info-card__body > a { font-size: .75rem; font-weight: var(--fw-bold); color: var(--brand-700); margin-top: auto; }

.info-card--tint { background: var(--accent-tint); }

@media (max-width: 980px) {
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .info-grid { grid-template-columns: minmax(0, 1fr); }
}

.guidance-strip {
  background: var(--brand-tint);
  border-block: 1px solid var(--brand-tint-strong);
  padding-block: var(--sp-6);
}
.guidance-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.guidance-strip__inner > div:first-child { flex: 1; min-width: 280px; }
.guidance-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.guidance-form input {
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font-family: inherit;
  font-size: var(--fs-xs);
  color: var(--ink-900);
  min-width: 160px;
}
.guidance-form input::placeholder { color: var(--ink-500); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--brand-900); padding-block: var(--sp-7) var(--sp-5); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
/* White backing panel behind the logo (client, 2026-09-04) — the logo PNG is
   transparent, so its teal/blue colors were low-contrast directly on the
   dark teal footer background. */
.site-footer__brand .logo {
  display: inline-flex;
  background: var(--white);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}
.site-footer__brand .logo__img { height: 68px; }
.site-footer__brand p { font-size: var(--fs-xs); color: rgba(255,255,255,.55); margin-top: var(--sp-2); }
.site-footer__col { display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer__col-trigger {
  display: block;
  width: 100%;
  text-align: left;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  color: var(--white);
  margin-bottom: var(--sp-1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: default;
}
.site-footer__chevron { display: none; }
.site-footer__col-panel { display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer__col a { font-size: .8125rem; color: rgba(255,255,255,.65); }
.site-footer__col a:hover { color: var(--white); }
/* CAMP §3 "Social connectivity" item, 2026-09-14 — icon-only links inherit their color from
   nothing without this (browser default, near-invisible on the dark footer), unlike the text
   links above which get color from .site-footer__col a. */
.site-footer__social a { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.65); }
.site-footer__social a:hover { color: var(--white); }
.site-footer__bottom {
  padding-top: var(--sp-4);
  font-size: .6875rem;
  color: rgba(255,255,255,.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.site-footer__legal a { color: rgba(255,255,255,.6); }
.site-footer__legal a:hover { color: var(--white); }

@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer__brand { margin-bottom: var(--sp-2); }

  .site-footer__col { gap: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .site-footer__col:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
  .site-footer__col-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-block: var(--sp-4);
    margin-bottom: 0;
    cursor: pointer;
  }
  .site-footer__chevron {
    display: block;
    width: 18px;
    height: 18px;
    color: rgba(255,255,255,.5);
    flex-shrink: 0;
    transition: transform .15s var(--ease);
  }
  .site-footer__col.is-open .site-footer__chevron { transform: rotate(180deg); }
  .site-footer__col-panel { display: none; padding-bottom: var(--sp-4); gap: var(--sp-3); }
  .site-footer__col.is-open .site-footer__col-panel { display: flex; }
  .site-footer__col a { padding-block: 2px; font-size: .875rem; }
}

/* WhatsApp floating button */
.whatsapp-float {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--brand-700);
  color: var(--white);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-hover);
  font-size: .6875rem;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}
.whatsapp-float svg { width: 20px; height: 20px; flex-shrink: 0; }
.whatsapp-float:hover { background: var(--brand-900); }

@media (max-width: 560px) {
  .whatsapp-float span { display: none; }
  .whatsapp-float { padding: var(--sp-3); }
}

/* ==========================================================================
   Shared page components (used by deals.html, doctors.html, …)
   ========================================================================== */

.btn-dark { background: var(--ink-900); color: var(--white); }
.btn-dark:hover { background: var(--ink-700); }

.eyebrow--onDark { color: var(--white); }
.eyebrow--onDark::before { background: var(--white); }

.support-band { background: var(--brand-900); }
.support-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding-block: var(--sp-6);
  color: var(--white);
}
.support-band h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--lh-tight);
  margin-block: var(--sp-2) var(--sp-1);
}
.support-band p { font-size: var(--fs-xs); color: rgba(255,255,255,.78); max-width: 52ch; }
.support-band__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.support-band .btn-primary { background: var(--white); color: var(--brand-900); }
.support-band .btn-primary:hover { background: var(--brand-tint); }

/* ==========================================================================
   Shared inner-page header (dark band + photo). Used by every page that
   isn't the homepage: doctors.html, providers.html, and future pages.
   ========================================================================== */

.page-header { background: var(--ink-900); }
.page-header .container { padding-block: var(--sp-7); }
.page-header__grid {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: var(--sp-7);
  align-items: center;
}
.page-header__title {
  font-size: 2.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--lh-tight);
  color: var(--white);
  margin-block: var(--sp-3) var(--sp-3);
  max-width: 18ch;
}
.page-header__sub {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.7);
  line-height: var(--lh-relaxed);
  max-width: 52ch;
  margin-bottom: var(--sp-5);
}
.page-header__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.page-header__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(255,255,255,.14);
}

@media (max-width: 980px) {
  .page-header__grid { grid-template-columns: minmax(0, 1fr); }
  .page-header__media { order: -1; max-width: 480px; margin-inline: auto; }
  .page-header__title { font-size: 1.875rem; max-width: none; }
}

/* Trust row + search zone that follows a page-header (white, borders off) */
.page-searchzone { background: var(--white); border-bottom: 1px solid var(--line); }
.page-searchzone .container { padding-block: var(--sp-5); }
.page-searchzone .hero__trustrow { margin-bottom: var(--sp-5); }
.page-searchzone .search-panel { margin-bottom: 0; }

/* Shared form controls used across search panels */
.search-field select {
  border: none; outline: none;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-900);
  background: transparent;
  padding: 0; width: 100%;
}
.sortbox {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 6px var(--sp-3);
  font-size: .6875rem;
  color: var(--ink-500);
  background: var(--white);
}
.sortbox select {
  border: none; outline: none; background: transparent;
  font-family: inherit; font-size: .6875rem;
  font-weight: var(--fw-semibold); color: var(--ink-900);
}

/* Helper card grid (used by deals.html, providers.html, …) */
.helper-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.helper {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.helper b { font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--ink-900); }
.helper p { font-size: .75rem; color: var(--ink-500); line-height: var(--lh-snug); margin-bottom: var(--sp-2); }
.helper .btn-text { align-self: flex-start; padding-left: 0; margin-top: auto; }

@media (max-width: 900px) { .helper-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Shared: info CTA strip (light tinted, text + button) — used by Courses'
   "For Employers" band, Careers' "Don't see your role?" band, and beyond.
   ========================================================================== */

.info-cta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.info-cta__text { max-width: 62ch; }
.info-cta__text h2 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  margin: var(--sp-2) 0 var(--sp-1);
}
.info-cta__text p { font-size: var(--fs-xs); color: var(--ink-700); line-height: var(--lh-relaxed); }

/* ==========================================================================
   Shared: filled tile grid (no border, soft fill) — "Why CrysMed" style
   3-up feature blocks.
   ========================================================================== */

.tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.tile {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.tile b { display: block; font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--ink-900); margin-bottom: var(--sp-2); }
.tile p { font-size: var(--fs-xs); color: var(--ink-700); line-height: var(--lh-relaxed); }

@media (max-width: 900px) {
  .tile-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Shared small bold link with an arrow (e.g. "View programme →") */
.link-go { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--brand-900); }
.link-go:hover { color: var(--brand-700); }

/* Tick grid — light-section checklist boxes (Membership's .benefit-grid is
   the dark-section version; contexts differ enough to need separate rules).
   Used by Corporate Healthcare and Home Healthcare. */
.tick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
.tick-grid > div {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-700);
}

@media (max-width: 980px) { .tick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tick-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Shared: process track - dark-band numbered steps with a connecting line.
   Used by International Care, Corporate, Home Healthcare.
   ========================================================================== */

.process-band { background: var(--ink-900); padding-block: var(--sp-7); }
.process-band .eyebrow { color: var(--accent-500); margin-bottom: var(--sp-2); }
.process-band .eyebrow::before { background: var(--accent-500); }
.process-band h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tighter);
  color: var(--white);
  margin-bottom: var(--sp-6);
}

.process-track { display: flex; align-items: flex-start; }
.process-track li {
  position: relative;
  flex: 1;
  padding-top: var(--sp-6);
  padding-right: var(--sp-3);
}
.process-track li::before {
  content: "";
  position: absolute;
  top: 15px; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,.18);
}
.process-track li:first-child::before { left: 15px; }
.process-track li:last-child::before { right: calc(100% - 15px); }
.process-track__num {
  position: absolute;
  top: 0; left: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand-700);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  z-index: 1;
}
.process-track b { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--white); margin-bottom: 2px; }
.process-track span { font-size: .6875rem; color: rgba(255,255,255,.55); line-height: var(--lh-snug); }

@media (max-width: 980px) {
  .process-track { flex-wrap: wrap; gap: var(--sp-5) 0; }
  .process-track li { flex: 0 0 calc(33.333% - var(--sp-3)); }
  .process-track li::before { display: none; }
}
@media (max-width: 640px) {
  .process-track li { flex: 0 0 calc(50% - var(--sp-3)); }
}

/* ==========================================================================
   Shared: duo grid - a plain info card + a tinted info card, side by side.
   Used by International Care, Home Healthcare.
   ========================================================================== */

.duo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
.duo-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: var(--sp-5);
}
.duo-card--tint { background: var(--accent-tint); border-color: var(--accent-500); }
.duo-card b {
  display: block;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  margin-bottom: var(--sp-3);
}
.duo-card ul { display: flex; flex-direction: column; gap: 6px; }
.duo-card li { font-size: var(--fs-xs); color: var(--ink-700); padding-left: 1.1em; position: relative; }
.duo-card li::before { content: "·"; position: absolute; left: 0; color: var(--ink-300); font-weight: var(--fw-bold); }
.duo-card p { font-size: var(--fs-xs); color: var(--ink-700); line-height: var(--lh-relaxed); }

@media (max-width: 900px) { .duo-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Shared: fact row - plain label/value facts under a page header (no icon),
   distinct from .hero__trustrow which always has an icon.
   ========================================================================== */

.fact-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.fact-row b { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-900); margin-bottom: 2px; }
.fact-row span { font-size: .75rem; color: var(--ink-500); }

@media (max-width: 720px) { .fact-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-4); } }

/* ==========================================================================
   Shared: plan grid - light-background pricing cards (3 or 4 columns).
   Used by Membership and Corporate Healthcare.
   ========================================================================== */

.plan-grid { display: grid; gap: var(--sp-4); }
.plan-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.plan-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
}
.plan-card__tag {
  position: absolute;
  top: -11px; left: var(--sp-5);
  background: var(--accent-500);
  color: var(--white);
  font-size: .5625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
}
.plan-card b { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink-900); margin-bottom: var(--sp-1); }
.plan-card__price { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--brand-700); margin-bottom: 2px; }
.plan-card__note { font-size: .6875rem; color: var(--ink-500); margin-bottom: var(--sp-3); }
.plan-card ul { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.plan-card li { font-size: .75rem; color: var(--ink-700); padding-left: 1.2em; position: relative; }
.plan-card li::before { content: "✓"; position: absolute; left: 0; color: var(--brand-700); font-weight: var(--fw-bold); font-size: .6875rem; }
.plan-card > .link-go, .plan-card > .btn { margin-top: auto; }

.plan-card--featured { border-color: var(--accent-500); box-shadow: 0 0 0 1px var(--accent-500); }
.plan-card--solid { background: var(--brand-700); border-color: var(--brand-700); color: var(--white); }
.plan-card--solid b, .plan-card--solid .plan-card__price { color: var(--white); }
.plan-card--solid .plan-card__note { color: rgba(255,255,255,.7); }
.plan-card--solid li { color: rgba(255,255,255,.9); }
.plan-card--solid li::before { color: var(--white); }
.plan-card--solid .plan-card__tag { background: var(--white); color: var(--brand-900); }

@media (max-width: 1080px) {
  .plan-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .plan-grid--3, .plan-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Shared: stat panel - small metric tiles inside a tinted card
   (Corporate "sample reporting" panel; reusable elsewhere)
   ========================================================================== */

.stat-panel {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: grid;
  grid-template-columns: 1.3fr auto;
  gap: var(--sp-5);
  align-items: center;
}
.stat-panel__text b {
  display: block;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  margin-bottom: var(--sp-2);
}
.stat-panel__text p { font-size: var(--fs-xs); color: var(--ink-700); line-height: var(--lh-relaxed); }
.stat-panel__text strong { display: block; font-weight: var(--fw-bold); color: var(--ink-900); margin-top: var(--sp-2); }
.stat-panel__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
.stat-panel__grid > div { background: var(--white); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); min-width: 140px; }
.stat-panel__grid b { display: block; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--brand-700); letter-spacing: var(--tracking-tight); }
.stat-panel__grid span { font-size: .6875rem; color: var(--ink-500); }

@media (max-width: 900px) {
  .stat-panel { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Shared: form field (label + input/select/textarea)
   Used by contact, member/provider auth and cart & checkout.
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
}
.field input,
.field select,
.field textarea {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--ink-900);
  background: var(--white);
  width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--brand-700); }

.checkbox-field {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--ink-700);
}
.checkbox-field input { width: 15px; height: 15px; accent-color: var(--brand-700); }

/* Group of checkbox-fields standing in for what used to be a free-text input (languages
   spoken, payment methods, consultation modes, etc.) — see tech spec §9. */
.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}
.checkbox-grid .checkbox-field { flex: 0 0 auto; }

/* A value that's fixed for this deployment (settlement currency) and shown for information
   only — never an editable input, so it can't be typed into. */
.fixed-value {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-700);
  background: var(--bg-subtle, #f6f7f8);
}

/* Fixed country-code prefix + local-digits input (mobile/WhatsApp fields) — the hidden field
   alongside it carries the combined E.164 value that actually submits. See
   provider-onboarding.js / auth.js. */
.phone-input { display: flex; align-items: stretch; }
.phone-input__prefix {
  display: flex;
  align-items: center;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line-strong);
  border-right: none;
  border-radius: var(--r-md) 0 0 var(--r-md);
  background: var(--bg-subtle, #f6f7f8);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink-700);
}
.phone-input input { border-radius: 0 var(--r-md) var(--r-md) 0; }

/* One-click presets that pre-fill an otherwise-editable grid (business hours). */
.preset-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.preset-row .btn { font-size: var(--fs-xs); }
.preset-row .btn.is-active { background: var(--brand-tint); border-color: var(--brand-700); color: var(--brand-900); }

/* File input + client-side preview thumbnail + upload progress bar — see
   provider-onboarding.js. Hidden until there's something to show. */
.upload-preview { margin-top: var(--sp-2); max-width: 160px; max-height: 160px; border-radius: var(--r-md); display: none; }
.upload-progress { margin-top: var(--sp-2); height: 6px; border-radius: 999px; background: var(--line-strong); overflow: hidden; display: none; }
.upload-progress__bar { height: 100%; width: 0; background: var(--brand-700); transition: width .15s ease; }
.upload-status { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-500); }

/* ==========================================================================
   Shared: header cart icon + badge
   ========================================================================== */

.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink-700);
  flex-shrink: 0;
}
.cart-link:hover, .cart-link.is-current { border-color: var(--brand-700); color: var(--brand-700); }
.cart-link { transition: transform .1s var(--ease), border-color .1s var(--ease); }
.cart-link:active { transform: scale(.92); }
@media (max-width: 1320px) {
  .cart-link { width: 44px; height: 44px; }
}
.cart-link__count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--badge-amber);
  color: var(--white);
  font-size: 9px;
  font-weight: var(--fw-bold);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}