/* ============================================================
   D-Link Australia Support Platform — Site CSS
   Design tokens match the support-platform-export prototype
   ============================================================ */

/* --- Reset & base -------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #fff;
  color: #374151;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: keep the footer at the bottom so short pages don't leave a gap below it */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; display: flex; flex-direction: column; }
body > .dl-footer { flex-shrink: 0; }

a { text-decoration: none; color: inherit; }

/* --- Design tokens ------------------------------------------*/
:root {
  --teal:        #0083A5;
  --teal-dark:   #006B87;
  --teal-light:  #018DA8;
  --dark:        #111827;
  --gray-50:     #F9FAFB;
  --gray-100:    #F3F4F6;
  --gray-200:    #E5E7EB;
  --gray-400:    #9CA3AF;
  --gray-500:    #6B7280;
  --gray-600:    #4B5563;
  --gray-700:    #374151;
}

/* --- Layout helpers -----------------------------------------*/
.dl-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- Header / Nav -------------------------------------------*/
.dl-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--gray-200);
}

.dl-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}

.dl-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.dl-nav__logo { height: 2rem; }

.dl-nav__brand-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-400);
}

.dl-nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.dl-nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-600);
  transition: color 0.15s;
}
.dl-nav__link:hover { color: var(--teal); }

.dl-nav__link--admin {
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  color: var(--teal);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
}
.dl-nav__link--admin:hover { background: var(--teal); color: #fff; }

.dl-nav__link--ai {
  background: var(--teal);
  color: #fff !important;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
}
.dl-nav__link--ai:hover { background: var(--teal-dark); }

.dl-nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-600);
}

/* --- Hero ---------------------------------------------------*/
.dl-hero {
  position: relative;
  background: var(--teal);
  padding: 3rem 1.5rem 8rem;
  text-align: center;
  overflow: hidden;
}

/* Dot-grid pattern overlay (matches prototype) */
.dl-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.12) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
}

.dl-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 50%, rgba(0,0,0,0.08) 100%);
  pointer-events: none;
}

.dl-hero__content {
  position: relative;
  z-index: 1;
}

.dl-hero__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}

.dl-hero__sub {
  color: rgba(255,255,255,0.65);
  margin-bottom: 2rem;
  font-size: 1rem;
}

/* --- Search bar ---------------------------------------------*/
.dl-search {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

/* Inner row — has overflow:hidden for border-radius clipping */
.dl-search__inner {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 0.875rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  overflow: hidden;
}

.dl-search__icon {
  position: absolute;
  left: 1rem;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--gray-400);
  pointer-events: none;
  flex-shrink: 0;
}

.dl-search__input {
  flex: 1;
  border: none;
  outline: none;
  padding: 1rem 1rem 1rem 3rem;
  font-size: 1rem;
  color: var(--dark);
  background: transparent;
  font-family: inherit;
}

.dl-search__input::placeholder {
  color: var(--gray-400);
}

.dl-search__btn {
  flex-shrink: 0;
  padding: 0.75rem 1.5rem;
  background: var(--teal);
  color: #fff;
  border: none;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  white-space: nowrap;
  margin: 0.25rem;
  border-radius: 0.625rem;
}

/* On small screens trim the button padding/input padding so the bar fits comfortably */
@media (max-width: 480px) {
  .dl-search__btn { padding: 0.75rem 1rem; }
  .dl-search__input { padding-right: 0.5rem; }
}
.dl-search__btn:hover { background: var(--teal-dark); }

/* --- Sections -----------------------------------------------*/
.dl-section {
  padding: 3rem 0;
}

.dl-section--gray {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
}

/* Category cards pulled up to overlap the bottom of the teal hero */
.dl-section--overlap {
  position: relative;
  z-index: 2;
  margin-top: -4.25rem;
  padding-top: 0;
}

/* Last section grows to fill leftover viewport height so the footer sits right below it
   (no empty void between content and footer on tall screens). */
.dl-section--fill { flex: 1 1 auto; }

.dl-section__heading {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 2rem;
}

/* --- Category grid ------------------------------------------*/
.dl-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 640px)  { .dl-category-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .dl-category-grid { grid-template-columns: repeat(4, 1fr); } }

.dl-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
  cursor: pointer;
}

.dl-cat-card:hover {
  border-color: var(--teal);
  background: var(--teal);
  box-shadow: 0 4px 12px rgba(0,131,165,0.2);
  transform: translateY(-2px);
}

.dl-cat-card__icon {
  color: var(--gray-500);
  margin-bottom: 0.75rem;
  transition: color 0.15s;
}
.dl-cat-card__icon svg { width: 2rem; height: 2rem; }
.dl-cat-card:hover .dl-cat-card__icon { color: #fff; }

.dl-cat-card__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--dark);
  transition: color 0.15s;
  line-height: 1.3;
}
.dl-cat-card:hover .dl-cat-card__name { color: #fff; }

.dl-cat-card__count {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--gray-500);
  transition: color 0.15s;
}
.dl-cat-card:hover .dl-cat-card__count { color: rgba(255,255,255,0.75); }

/* --- Quick actions grid -------------------------------------*/
.dl-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
}
@media (max-width: 760px) { .dl-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .dl-quick-grid { grid-template-columns: 1fr; } }

.dl-quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1.9rem 1.1rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dl-quick-card:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 12px rgba(0,131,165,0.12);
}

.dl-quick-card__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  color: var(--teal);
  border-radius: 0.5rem;
  transition: background 0.15s, color 0.15s;
}
.dl-quick-card__icon svg { width: 1.375rem; height: 1.375rem; }
.dl-quick-card:hover .dl-quick-card__icon { background: var(--teal); color: #fff; }

.dl-quick-card__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--dark);
}

.dl-quick-card__desc {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--gray-500);
}

/* --- Footer -------------------------------------------------*/
.dl-footer {
  position: relative;
  background: var(--teal);
  border-top: 1px solid var(--teal-dark);
  padding: 1.6rem 1.5rem;
  overflow: hidden;
}

.dl-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
}

.dl-footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 1280px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .dl-footer__inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

.dl-footer__brand { display: flex; align-items: center; gap: 0.625rem; }
.dl-footer__logo { height: 1.5rem; filter: brightness(0) invert(1); }
.dl-footer__region { font-size: 0.875rem; color: rgba(255,255,255,0.6); }

.dl-footer__links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.dl-footer__link {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  transition: color 0.15s;
}
.dl-footer__link:hover { color: #fff; }

.dl-footer__copy {
  flex: 1;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  margin: 0;
}

/* --- Product list page --------------------------------------*/
.dl-product-page {
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

.dl-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dl-breadcrumb__nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--gray-500);
}

.dl-breadcrumb__link { color: var(--gray-500); transition: color 0.15s; }
.dl-breadcrumb__link:hover { color: var(--teal); }
.dl-breadcrumb__sep { color: var(--gray-400); }
.dl-breadcrumb__current { color: var(--gray-700); }

.dl-breadcrumb__back {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  transition: border-color 0.15s, color 0.15s;
}
.dl-breadcrumb__back:hover { border-color: var(--teal); color: var(--teal); }

.dl-product-page__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.375rem;
}

.dl-product-page__sub {
  font-size: 0.9375rem;
  color: var(--gray-500);
  margin-bottom: 1.5rem;
}

/* Filter tabs */
.dl-filter-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.dl-filter-tab {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  background: var(--gray-100);
  color: var(--gray-600);
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.dl-filter-tab:hover { background: var(--gray-200); }
.dl-filter-tab--active { background: var(--dark); color: #fff; }
.dl-filter-tab--active:hover { background: var(--dark); }

/* Product grid */
.dl-prod-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px)  { .dl-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dl-prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Product card */
.dl-prod-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 0.875rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
  overflow: hidden;
  min-width: 0;
}
.dl-prod-card:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 12px rgba(0,131,165,0.12);
}
.dl-prod-card--legacy { opacity: 0.75; }

/* Thumbnail placeholder */
.dl-prod-card__thumb {
  flex-shrink: 0;
  width: 4.8rem;
  height: 4.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  color: var(--gray-400);
  overflow: hidden;
}
.dl-prod-card__thumb svg { width: 2.4rem; height: 2.4rem; }
.dl-prod-card__thumb img { width: 100%; height: 100%; object-fit: contain; }

.dl-prod-card__body {
  flex: 1;
  min-width: 0;
}

.dl-prod-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dl-prod-card__model {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--dark);
  transition: color 0.15s;
}
.dl-prod-card:hover .dl-prod-card__model { color: var(--teal); }

.dl-prod-card__name {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-prod-card__chevron {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--gray-400);
  transition: color 0.15s;
}
.dl-prod-card:hover .dl-prod-card__chevron { color: var(--teal); }

/* Status badges */
.dl-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.dl-badge--current  { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.dl-badge--eos      { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
.dl-badge--legacy   { background: #fefce8; color: #854d0e; border-color: #fde68a; }

/* Empty state */
.dl-empty {
  padding: 3rem 0;
  text-align: center;
  color: var(--gray-500);
  font-size: 0.9375rem;
}
.dl-empty__link {
  background: none;
  border: none;
  color: var(--teal);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  margin-left: 0.25rem;
}

/* --- Product detail page ------------------------------------*/
.dl-detail-page {
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

/* Status banners */
.dl-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 0.875rem;
  border: 1px solid;
  margin-bottom: 1.5rem;
}
.dl-banner--eos    { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.dl-banner--legacy { background: var(--gray-50); border-color: var(--gray-200); color: var(--gray-700); }
.dl-banner svg { flex-shrink: 0; margin-top: 0.125rem; }
.dl-banner__title { font-size: 0.875rem; font-weight: 600; }
.dl-banner__sub   { font-size: 0.8125rem; margin-top: 0.25rem; opacity: 0.8; }

/* Product header card */
.dl-detail-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--teal);
  border-radius: 0.875rem;
  box-shadow: 0 1px 4px rgba(0,131,165,0.08);
  margin-bottom: 2rem;
}
/* Info column takes the remaining width and wraps its text (model/name) to the right of the
   thumbnail instead of dropping below it when the product name is long. */
.dl-detail-header__info { flex: 1 1 0; min-width: 0; }
.dl-detail-header__thumb {
  flex-shrink: 0;
  width: 9.6rem;
  height: 9.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  color: var(--gray-400);
  overflow: hidden;
}
.dl-detail-header__thumb svg { width: 3.6rem; height: 3.6rem; }
.dl-detail-header__thumb img { width: 100%; height: 100%; object-fit: contain; }
.dl-detail-header__title-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.dl-detail-header__model { font-size: 1.875rem; font-weight: 700; color: var(--dark); }
.dl-detail-header__name { font-size: 1rem; color: var(--gray-600); margin-top: 0.25rem; }
.dl-detail-header__no-files { font-size: 0.875rem; color: var(--gray-400); margin-top: 0.5rem; }

/* Section title */
.dl-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 1rem;
}

/* Latest firmware highlight */
.dl-fw-highlight {
  background: color-mix(in srgb, var(--teal) 5%, white);
  border: 1px solid color-mix(in srgb, var(--teal) 20%, transparent);
  border-radius: 0.875rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.dl-fw-highlight__list { display: flex; flex-direction: column; gap: 0.875rem; }
.dl-fw-highlight__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.dl-fw-highlight__rev { font-size: 0.9rem; font-weight: 600; color: var(--dark); }
.dl-fw-highlight__ver { font-size: 0.9rem; color: var(--gray-600); margin-left: 0.5rem; }
.dl-fw-highlight__actions { display: flex; gap: 0.5rem; align-items: center; }

/* Buttons */
.dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  text-decoration: none;
}
.dl-btn--primary { background: var(--teal); color: #fff; border: 1px solid var(--teal); }
.dl-btn--primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.dl-btn--ghost { background: transparent; color: var(--teal); border: 1px solid var(--teal); }
.dl-btn--ghost:hover { background: var(--teal); color: #fff; }

/* Document grid */
.dl-docs-grid, .dl-extras-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 640px) {
  .dl-docs-grid, .dl-extras-grid { grid-template-columns: repeat(2, 1fr); }
}
.dl-doc-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 0.875rem;
  padding: 1.25rem;
}
.dl-doc-card__title { font-size: 0.9375rem; font-weight: 600; color: var(--dark); margin-bottom: 0.75rem; }
.dl-doc-card__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.8125rem;
  color: var(--gray-600);
  transition: color 0.15s;
  word-break: break-all;
}
.dl-doc-card__item:hover { color: var(--teal); }
.dl-doc-card__file-icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

/* Firmware history */
.dl-fw-history { margin-bottom: 2rem; }
.dl-fw-rev { margin-bottom: 1.5rem; }
.dl-fw-rev__heading { font-size: 0.875rem; font-weight: 600; color: var(--gray-600); margin-bottom: 0.5rem; }
.dl-fw-rev__list { display: flex; flex-direction: column; gap: 0.5rem; }
.dl-fw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 0.625rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dl-fw-row:hover { border-color: var(--teal); box-shadow: 0 2px 8px rgba(0,131,165,0.08); }
.dl-fw-row__info { display: flex; align-items: center; gap: 0.5rem; }
.dl-fw-row__ver  { font-size: 0.875rem; font-weight: 600; color: var(--dark); }
.dl-fw-row__folder { font-size: 0.75rem; color: var(--gray-500); }
.dl-fw-row__actions { display: flex; align-items: center; gap: 0.75rem; }
.dl-fw-row__notes { font-size: 0.75rem; color: var(--teal); text-decoration: underline; }
.dl-fw-row__dl {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--teal);
  font-weight: 500;
  transition: color 0.15s;
}
.dl-fw-row__dl:hover { color: var(--teal-dark); }

/* --- Info pages (EOL Policy / Warranty / Contact) -----------*/
.dl-info-page {
  padding-top: 2.5rem;
  padding-bottom: 4rem;
  max-width: 860px;
}

/* CMS pages use the full site content width (matches category/product pages) */
.dl-info-page--full { max-width: 1280px; }

.dl-info-page__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.dl-info-page__sub {
  font-size: 0.9375rem;
  color: var(--gray-500);
  margin-bottom: 2rem;
}

.dl-info-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.dl-info-card--gray { background: var(--gray-50); }
.dl-info-card--no-pad { padding: 0; overflow: hidden; }

.dl-info-card__header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--gray-200);
}

.dl-info-card__section {
  padding: 1.25rem 1.5rem;
}

.dl-info-card__section--bordered {
  border-top: 1px solid var(--gray-200);
}

.dl-info-card__section-header {
  margin-bottom: 0.75rem;
}

.dl-info-card__title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 0.75rem;
}

.dl-info-card__p2 {
  margin-top: 0.75rem;
  color: var(--gray-600);
  font-size: 0.9375rem;
}

.dl-info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.dl-info-list li {
  padding-left: 1.25rem;
  position: relative;
  font-size: 0.9375rem;
  color: var(--gray-700);
}

.dl-info-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--teal);
}

.dl-info-list--ordered {
  list-style: decimal inside;
  padding-left: 0;
}

.dl-info-list--ordered li {
  padding-left: 0;
}

.dl-info-list--ordered li::before {
  content: none;
}

.dl-info-callout {
  margin-top: 1rem;
  background: color-mix(in srgb, var(--teal) 8%, white);
  border-left: 3px solid var(--teal);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--gray-700);
}

.dl-info-related {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.dl-info-related__link {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--teal);
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s;
}

.dl-info-related__link:hover {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 5%, white);
}

/* Warranty check */
.dl-warranty-check {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* Contact cards */
.dl-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
  .dl-contact-grid { grid-template-columns: repeat(2, 1fr); }
}

.dl-contact-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 0.875rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.dl-contact-card:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 12px rgba(0,131,165,0.10);
}

.dl-contact-card__icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  color: var(--teal);
  border-radius: 0.625rem;
}

.dl-contact-card__icon svg { width: 1.375rem; height: 1.375rem; }
.dl-contact-card__title { font-size: 0.9375rem; font-weight: 600; color: var(--dark); }
.dl-contact-card__detail { font-size: 0.875rem; color: var(--gray-600); margin-top: 0.25rem; }
.dl-contact-card__link { color: var(--teal); transition: color 0.15s; }
.dl-contact-card__link:hover { color: var(--teal-dark); }

/* --- KB article (public) ------------------------------------*/
.dl-kb-page {
  padding-top: 2.5rem;
  padding-bottom: 4rem;
  max-width: 860px;
}

.dl-kb-article {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.dl-kb-article__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.dl-kb-article__model {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--gray-100);
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
}

.dl-kb-article__date {
  font-size: 0.8125rem;
  color: var(--gray-400);
  margin-left: auto;
}

.dl-kb-article__title {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.dl-kb-article__content {
  font-size: 0.9375rem;
  color: var(--gray-700);
  line-height: 1.75;
}

/* --- Admin layout -------------------------------------------*/
.dl-admin-body {
  background: var(--gray-50);
  min-height: 100vh;
}

.dl-admin-header {
  background: var(--dark);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.dl-admin-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.875rem 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.dl-admin-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dl-admin-nav__logo { height: 1.625rem; filter: brightness(0) invert(1); }

.dl-admin-nav__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dl-admin-nav__links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dl-admin-nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  padding: 0.375rem 0.875rem;
  border-radius: 0.5rem;
  transition: background 0.15s, color 0.15s;
}
.dl-admin-nav__link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.dl-admin-nav__link--active { background: rgba(255,255,255,0.12); color: #fff; }

.dl-admin-nav__divider {
  width: 1px;
  height: 1.25rem;
  background: rgba(255,255,255,0.15);
}

.dl-admin-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.375rem 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.dl-admin-nav__btn:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
.dl-admin-nav__btn--danger { color: #fca5a5; border-color: #fca5a5; }
.dl-admin-nav__btn--danger:hover { background: #ef4444; border-color: #ef4444; color: #fff; }

/* Admin content area */
.dl-admin-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.dl-admin-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.25rem;
}

.dl-admin-page-sub {
  font-size: 0.9rem;
  color: var(--gray-500);
  margin-bottom: 2rem;
}

/* Stat cards */
.dl-admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.dl-admin-stat {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 0.875rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.dl-admin-stat__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin-bottom: 0.5rem;
}

.dl-admin-stat__value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1;
}

.dl-admin-stat--teal .dl-admin-stat__value { color: var(--teal); }
.dl-admin-stat--green .dl-admin-stat__value { color: #059669; }
.dl-admin-stat--amber .dl-admin-stat__value { color: #d97706; }

/* Admin table */
.dl-admin-table-wrap {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.dl-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.dl-admin-table thead {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.dl-admin-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
}

.dl-admin-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  vertical-align: middle;
}

.dl-admin-table tr:last-child td { border-bottom: none; }

.dl-admin-table__title { font-weight: 600; color: var(--dark); }
.dl-admin-table__actions { display: flex; align-items: center; gap: 0.5rem; }

.dl-admin-action {
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  background: none;
  color: var(--gray-600);
}
.dl-admin-action:hover { background: var(--gray-100); border-color: var(--gray-200); }
.dl-admin-action--danger { color: #dc2626; }
.dl-admin-action--danger:hover { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.dl-admin-action--view { color: var(--teal); }
.dl-admin-action--view:hover { background: color-mix(in srgb, var(--teal) 8%, white); border-color: color-mix(in srgb, var(--teal) 25%, transparent); }

/* Admin form */
.dl-admin-form {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  padding: 2rem;
  max-width: 800px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.dl-admin-form__group { margin-bottom: 1.25rem; }

.dl-admin-form__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 0.375rem;
}

.dl-admin-form__input,
.dl-admin-form__select,
.dl-admin-form__textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  font-family: inherit;
  border: 1px solid var(--gray-200);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--dark);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.dl-admin-form__input:focus,
.dl-admin-form__select:focus,
.dl-admin-form__textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 15%, transparent);
}

.dl-admin-form__input:disabled { background: var(--gray-100); color: var(--gray-400); cursor: not-allowed; }

.dl-admin-form__textarea {
  resize: vertical;
  min-height: 300px;
  line-height: 1.6;
}

.dl-admin-form__hint {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-top: 0.375rem;
}

.dl-admin-form__error {
  font-size: 0.8125rem;
  color: #dc2626;
  margin-top: 0.375rem;
}

.dl-admin-form__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.75rem;
  flex-wrap: wrap;
}

/* Alert */
.dl-admin-alert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.dl-admin-alert--success {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.dl-admin-alert--error {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}

/* Admin quick actions */
.dl-admin-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.dl-admin-quick-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 0.875rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
}
.dl-admin-quick-card:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 12px rgba(0,131,165,0.10);
}

.dl-admin-quick-card__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  color: var(--teal);
  border-radius: 0.5rem;
}
.dl-admin-quick-card__icon svg { width: 1.25rem; height: 1.25rem; }
.dl-admin-quick-card__title { font-size: 0.9rem; font-weight: 600; color: var(--dark); }
.dl-admin-quick-card__sub { font-size: 0.75rem; color: var(--gray-500); margin-top: 0.125rem; }

/* Login page */
.dl-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-50);
  padding: 2rem 1rem;
}

.dl-login-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 1.25rem;
  padding: 2.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.dl-login-card__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.dl-login-card__logo { height: 2rem; }

.dl-login-card__brand-text {}
.dl-login-card__brand-name { font-size: 0.875rem; font-weight: 700; color: var(--dark); }
.dl-login-card__brand-sub { font-size: 0.75rem; color: var(--gray-500); }

.dl-login-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.25rem;
}

.dl-login-card__sub {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-bottom: 1.75rem;
}

/* --- Mobile nav toggle --------------------------------------*/
@media (max-width: 767px) {
  .dl-nav__toggle { display: flex; }
  .dl-nav__links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--gray-200);
    padding: 1rem 1.5rem;
    gap: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 39;
  }
  .dl-nav__links--open { display: flex; }
  .dl-header { position: relative; }
}

/* --- Search dropdown ----------------------------------------*/
.dl-search { position: relative; }
.dl-search__result--active,
.dl-search__ai-row.dl-search__result--active { background: var(--gray-50); }

.dl-search__dropdown {
  position: fixed;
  z-index: 9999;
  background: #fff;
  border-radius: 0.875rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  overflow: hidden;
  border: 1px solid var(--gray-200);
}

.dl-search__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  text-decoration: none;
  transition: background 0.12s;
  cursor: pointer;
  border: none;
  width: 100%;
  background: none;
  font-family: inherit;
  text-align: left;
}

.dl-search__result:hover { background: var(--gray-50); }

.dl-search__result-model {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--dark);
}

.dl-search__result-name {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-left: 0.5rem;
}

.dl-search__result-chevron {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--gray-400);
}

.dl-search__ai-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.25rem;
  text-decoration: none;
  transition: background 0.12s;
}
.dl-search__ai-row:hover { background: color-mix(in srgb, var(--teal) 5%, white); }

.dl-search__ai-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  color: var(--teal);
  border-radius: 0.5rem;
}
.dl-search__ai-icon svg { width: 1.25rem; height: 1.25rem; }

.dl-search__ai-label { font-size: 0.875rem; font-weight: 600; color: var(--dark); }
.dl-search__ai-sub   { font-size: 0.75rem; color: var(--gray-500); }

.dl-search__dropdown-footer {
  border-top: 1px solid var(--gray-100);
  padding: 0.625rem 1.25rem;
  text-align: center;
}
.dl-search__dropdown-footer a {
  font-size: 0.8125rem;
  color: var(--gray-500);
  transition: color 0.12s;
}
.dl-search__dropdown-footer a:hover { color: var(--teal); }

/* --- AI Chat widget -----------------------------------------*/
.dl-chat {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 18rem);
  min-height: 480px;
  max-height: 700px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  overflow: hidden;
  margin-bottom: 2rem;
}

.dl-chat__header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.dl-chat__avatar {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  color: var(--teal);
  border-radius: 50%;
}

.dl-chat__header-title { font-size: 0.9375rem; font-weight: 600; color: var(--dark); }
.dl-chat__header-sub   { font-size: 0.75rem; color: var(--gray-500); }

.dl-chat__header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.dl-chat__btn-secondary {
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: 0.5rem;
  background: none;
  color: var(--gray-600);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.dl-chat__btn-secondary:hover { border-color: var(--teal); color: var(--teal); }

.dl-chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  scroll-behavior: smooth;
}

/* Empty state */
.dl-chat__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 1rem;
}

.dl-chat__empty-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  color: var(--teal);
  border-radius: 50%;
  margin-bottom: 1rem;
}

.dl-chat__empty-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 0.375rem;
}

.dl-chat__empty-sub {
  font-size: 0.8125rem;
  color: var(--gray-500);
  max-width: 26rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.dl-chat__suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.dl-chat__suggestion {
  font-size: 0.8125rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--gray-200);
  border-radius: 9999px;
  background: none;
  color: var(--gray-600);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.dl-chat__suggestion:hover { border-color: var(--teal); color: var(--teal); }

/* Messages */
.dl-msg {
  display: flex;
  margin-bottom: 1rem;
}

.dl-msg--user     { justify-content: flex-end; }
.dl-msg--assistant { justify-content: flex-start; }

.dl-msg__bubble {
  max-width: 80%;
  padding: 0.75rem 1rem;
  border-radius: 0.875rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.dl-msg--user .dl-msg__bubble {
  background: var(--teal);
  color: #fff;
  border-bottom-right-radius: 0.25rem;
}

.dl-msg--assistant .dl-msg__bubble {
  background: var(--gray-100);
  color: var(--dark);
  border-bottom-left-radius: 0.25rem;
}

/* Markdown rendered inside assistant bubble */
.dl-msg--assistant .dl-msg__bubble p  { margin: 0 0 0.5rem; }
.dl-msg--assistant .dl-msg__bubble ul,
.dl-msg--assistant .dl-msg__bubble ol { padding-left: 1.25rem; margin: 0.25rem 0 0.5rem; }
.dl-msg--assistant .dl-msg__bubble li { margin-bottom: 0.25rem; }
.dl-msg--assistant .dl-msg__bubble li:last-child { margin-bottom: 0; }
.dl-msg--assistant .dl-msg__bubble h3,
.dl-msg--assistant .dl-msg__bubble h4 { font-size: 0.9375rem; margin: 0.5rem 0 0.25rem; }
.dl-msg--assistant .dl-msg__bubble hr { border: none; border-top: 1px solid #E5E7EB; margin: 0.625rem 0; }
.dl-msg--assistant .dl-msg__bubble a { color: var(--teal); text-decoration: underline; }
.dl-msg--assistant .dl-msg__bubble strong { font-weight: 600; }
/* Trim leading/trailing block margins so the bubble has no extra top/bottom gap */
.dl-msg--assistant .dl-msg__bubble > *:first-child { margin-top: 0; }
.dl-msg--assistant .dl-msg__bubble > *:last-child  { margin-bottom: 0; }
.dl-msg--assistant .dl-msg__bubble code {
  background: rgba(0,0,0,0.06);
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
  font-size: 0.85em;
  font-family: 'SF Mono', Consolas, monospace;
}

.dl-chat__thinking {
  color: var(--gray-400);
  font-style: italic;
  animation: dl-pulse 1.5s ease-in-out infinite;
}

@keyframes dl-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Live Chat link shown under contact details in the assistant bubble */
.dl-livechat {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.dl-livechat__label { font-size: 0.8rem; color: var(--gray-600); }
.dl-livechat__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.dl-livechat__btn:hover { background: var(--teal-dark, #006B87); }
.dl-livechat__btn svg { flex-shrink: 0; }

/* Escalation nudge */
.dl-chat__nudge {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.dl-chat__nudge button {
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border: 1px solid var(--teal);
  border-radius: 9999px;
  background: color-mix(in srgb, var(--teal) 5%, white);
  color: var(--teal);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.dl-chat__nudge button:hover { background: color-mix(in srgb, var(--teal) 12%, white); }

/* Input area */
.dl-chat__input-wrap {
  border-top: 1px solid var(--gray-200);
  padding: 0.875rem 1.25rem 0.75rem;
  flex-shrink: 0;
}

.dl-chat__input-row {
  display: flex;
  gap: 0.625rem;
  align-items: flex-end;
}

.dl-chat__input {
  flex: 1;
  resize: none;
  border: 1px solid var(--gray-200);
  border-radius: 0.75rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--dark);
  outline: none;
  line-height: 1.5;
  max-height: 10rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dl-chat__input::placeholder { color: var(--gray-400); }
.dl-chat__input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 12%, transparent);
}
.dl-chat__input:disabled { background: var(--gray-50); }

.dl-chat__send {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 0.625rem;
  cursor: pointer;
  transition: background 0.15s;
}
.dl-chat__send:hover:not(:disabled) { background: var(--teal-dark); }
.dl-chat__send:disabled { background: var(--gray-300); color: var(--gray-500); cursor: not-allowed; }

.dl-chat__disclaimer {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--gray-400);
}

/* Topics grid */
.dl-topics { margin-top: 0.5rem; }

.dl-topics__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 500px) { .dl-topics__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .dl-topics__grid { grid-template-columns: repeat(3, 1fr); } }

.dl-topic-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.dl-topic-card__title { font-size: 0.875rem; font-weight: 600; color: var(--dark); }
.dl-topic-card__desc  { font-size: 0.8125rem; color: var(--gray-500); margin-top: 0.25rem; }

/* --- Main category cards (home page) ------------------------*/
.dl-main-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 460px));
  gap: 1.25rem;
  justify-content: center;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.dl-main-cat-card {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.85rem 2rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  cursor: pointer;
  text-decoration: none;
}
.dl-main-cat-card:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 14px rgba(0,131,165,0.14);
  transform: translateY(-2px);
}

.dl-main-cat-card__icon {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  color: var(--teal);
  border-radius: 0.875rem;
  transition: background 0.15s, color 0.15s;
}
.dl-main-cat-card:hover .dl-main-cat-card__icon { background: var(--teal); color: #fff; }

.dl-main-cat-card__body { flex: 1; min-width: 0; }

.dl-main-cat-card__name {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--dark);
  transition: color 0.15s;
}
.dl-main-cat-card:hover .dl-main-cat-card__name { color: var(--teal); }

.dl-main-cat-card__sub {
  font-size: 0.9375rem;
  color: var(--gray-500);
  margin-top: 0.3rem;
  line-height: 1.45;
}

.dl-main-cat-card__arrow {
  flex-shrink: 0;
  color: var(--gray-400);
  transition: color 0.15s, transform 0.15s;
}
.dl-main-cat-card:hover .dl-main-cat-card__arrow { color: var(--teal); transform: translateX(3px); }

/* --- Browse pages -------------------------------------------*/
.dl-browse-page {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

/* Modifications 2: category & sub-category navigation pages should fit a 1920x1080 viewport
   without vertical scrolling. Tighten the vertical rhythm (product listing pages, which use
   .dl-product-page, are intentionally left alone and may still scroll). */
.dl-browse-page .dl-breadcrumb            { margin-bottom: 1rem; }
.dl-browse-page .dl-product-page__title   { margin-bottom: 0.25rem; }
.dl-browse-page .dl-product-page__sub     { margin-bottom: 1rem; }
.dl-browse-page .dl-search-inline         { margin: 1rem 0 1.5rem; }
.dl-browse-page .dl-cat-btn-grid          { margin-bottom: 1.5rem; }
.dl-browse-page .dl-cat-btn               { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.dl-browse-page .dl-sub-expand            { margin-bottom: 1rem; padding-top: 1rem; }

@media (max-width: 600px) {
  .dl-browse-page                  { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .dl-browse-page .dl-search-inline { margin: 0.75rem 0 1.25rem; }
  .dl-browse-page .dl-cat-btn-grid { gap: 0.75rem; }
  .dl-browse-page .dl-cat-btn      { padding: 1rem 0.75rem; }
}

.dl-browse-section {
  margin-bottom: 2.5rem;
}

.dl-browse-section__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--dark);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 1rem;
}

.dl-browse-sub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 480px)  { .dl-browse-sub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .dl-browse-sub-grid { grid-template-columns: repeat(3, 1fr); } }

.dl-browse-sub-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 0.875rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
}
.dl-browse-sub-card:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 12px rgba(0,131,165,0.12);
}

.dl-browse-sub-card__icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  color: var(--gray-500);
  border-radius: 0.5rem;
  transition: background 0.15s, color 0.15s;
}
.dl-browse-sub-card:hover .dl-browse-sub-card__icon { background: color-mix(in srgb, var(--teal) 10%, transparent); color: var(--teal); }

.dl-browse-sub-card__body { flex: 1; min-width: 0; }

.dl-browse-sub-card__name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark);
  transition: color 0.15s;
  line-height: 1.3;
}
.dl-browse-sub-card:hover .dl-browse-sub-card__name { color: var(--teal); }

.dl-browse-sub-card__count {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-500);
  margin-top: 0.125rem;
}

.dl-browse-sub-card__arrow {
  flex-shrink: 0;
  color: var(--gray-400);
  transition: color 0.15s, transform 0.15s;
}
.dl-browse-sub-card:hover .dl-browse-sub-card__arrow { color: var(--teal); transform: translateX(2px); }

/* --- Version badges (product detail) -----------------------*/
.dl-version-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.dl-version-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.625rem;
  background: color-mix(in srgb, var(--teal) 8%, white);
  border: 1px solid color-mix(in srgb, var(--teal) 20%, transparent);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--teal);
}
.dl-version-badge svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

/* --- Get Help section (product detail) ----------------------*/
.dl-get-help {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.dl-get-help__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.375rem;
}

/* Ask-AI box shown inside the Get Help box, below the topic buttons */
.dl-get-help__ask {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-200);
}

.dl-get-help__sub {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-bottom: 1.25rem;
}

.dl-help-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem;
}
@media (min-width: 640px) { .dl-help-grid { grid-template-columns: repeat(3, 1fr); } }

.dl-help-btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-700);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
  line-height: 1.3;
}
.dl-help-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
  box-shadow: 0 2px 8px rgba(0,131,165,0.10);
}

.dl-help-btn__icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  color: var(--teal);
  border-radius: 0.5rem;
  transition: background 0.15s;
}
.dl-help-btn:hover .dl-help-btn__icon { background: var(--teal); color: #fff; }

/* ── Browse: category card grid — fills one row, cards share width equally ───── */
.dl-cat-btn-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.25rem;
  margin: 0 0 2.5rem;
  justify-content: center;
}

.dl-cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.625rem;
  padding: 1.75rem 1rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  text-decoration: none;
  color: var(--gray-700);
  transition: border-color .15s, box-shadow .15s;
  flex: 1 1 0;
  min-width: 0;
  max-width: 300px;
  overflow: hidden;
}
.dl-cat-btn:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 12px rgba(0,131,165,.12);
  text-decoration: none;
}

.dl-cat-btn__icon {
  width: clamp(4.8rem, 66%, 8.4rem);
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  border-radius: 0.875rem;
  overflow: hidden;
  flex-shrink: 0;
}

.dl-cat-btn__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.dl-cat-btn__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.3;
  transition: color .15s;
  text-align: center;
  text-wrap: pretty;
}
.dl-cat-btn:hover .dl-cat-btn__name { color: var(--teal); }

.dl-cat-btn__sub {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--gray-500);
  line-height: 1.4;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  text-wrap: pretty;
}

/* Chevron hidden — column card layout doesn't use directional arrows */
.dl-cat-btn__chevron {
  display: none;
}

/* button element reset so <button class="dl-cat-btn"> looks identical to <a> */
button.dl-cat-btn {
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0;
  max-width: 300px;
  background: #fff;
  border: 1px solid var(--gray-200);
}

/* Sub-category tiles (inside inline-expand panel) — one row, smaller than top categories */
.dl-sub-expand .dl-cat-btn {
  max-width: 200px;
  padding: 1.25rem 0.875rem;
  border-radius: 0.875rem;
}
.dl-sub-expand button.dl-cat-btn {
  max-width: 200px;
}
.dl-sub-expand .dl-cat-btn__icon {
  width: clamp(3.6rem, 66%, 5.4rem);
  aspect-ratio: 1;
  height: auto;
  border-radius: 0.75rem;
}
.dl-sub-expand .dl-cat-btn__name {
  font-size: 0.875rem;
}

/* Mobile: allow wrapping at small screen sizes */
@media (max-width: 600px) {
  .dl-cat-btn-grid { flex-wrap: wrap; }
  .dl-cat-btn, button.dl-cat-btn { flex: none; width: 140px; max-width: none; }
  .dl-sub-expand .dl-cat-btn, .dl-sub-expand button.dl-cat-btn { width: 130px; max-width: none; }
}
button.dl-cat-btn:focus { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Active state (inline-expand selected category) */
.dl-cat-btn--active {
  border-color: var(--teal) !important;
  box-shadow: 0 4px 12px rgba(0,131,165,.15) !important;
  background: #f0f9ff !important;
}
.dl-cat-btn--active .dl-cat-btn__name { color: var(--teal); }
.dl-cat-btn__chevron--rotate { transition: transform .2s; }

/* ── Inline search bar — top center on browse pages ─────────────────────────── */
.dl-search-inline {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 2.5rem;
}
.dl-search-inline .dl-search--browse {
  width: 100%;
  max-width: 600px;
}

/* Inline sub-category expansion panel */
.dl-sub-expand {
  margin: 0 0 1.5rem;
  padding: 1.5rem 0 0;
  animation: dlExpandIn .18s ease;
}
@keyframes dlExpandIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dl-sub-expand__header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.dl-sub-expand__title {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
  text-align: center;
}
.dl-sub-expand__title::after {
  content: "";
  display: block;
  margin-top: 0.4rem;
  height: 2px;
  background: var(--teal);
  width: 100%;
}
.dl-sub-expand__close { display: none; }

/* Browse page inline search bar */
.dl-browse-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: .6rem;
  padding: .45rem .75rem;
  margin-bottom: 1.5rem;
  max-width: 480px;
}
.dl-browse-search__icon { color: var(--gray-400); flex-shrink: 0; }
.dl-browse-search__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: .875rem;
  color: var(--gray-700);
  outline: none;
}
.dl-browse-search__input::placeholder { color: var(--gray-400); }
.dl-help-btn__icon svg { width: 1rem; height: 1rem; }

/* ── Browse page: left-aligned search with separator ─────────────────────── */
.dl-search--browse {
  margin: 0;
  max-width: 600px;
}
.dl-search--browse .dl-search__inner {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.dl-search-cta {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-200);
}
.dl-search-cta__label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gray-500);
  margin: 0 0 1rem;
}

/* --- Product Registration module ----------------------------*/
.dlreg { width: 100%; max-width: 960px; margin: 2rem auto; padding: 0 1.5rem; box-sizing: border-box; }
.dlreg__head { text-align: center; margin-bottom: 1.5rem; }
.dlreg__head h1 { font-size: 1.5rem; font-weight: 700; color: var(--dark); }
.dlreg__head p { color: var(--gray-500); font-size: 0.9rem; margin-top: 0.25rem; }
.dlreg__nav { display: flex; gap: 0.5rem; justify-content: flex-end; margin-bottom: 1rem; }
.dlreg .card-wrapper { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.dlreg .card-wrapper > .card { flex: 1 1 320px; }
.dlreg .card { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.25rem; }
.dlreg .card h2 { font-size: 1.1rem; font-weight: 700; color: var(--dark); margin-bottom: 1rem; }
.dlreg .field { margin-bottom: 1rem; }
.dlreg .field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--gray-700); margin-bottom: 0.3rem; }
.dlreg .field input, .dlreg .field select { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 0.9rem; box-sizing: border-box; }
.dlreg .field input:focus, .dlreg .field select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,147,178,.15); }
.dlreg .required { color: #dc2626; }
.dlreg .btn-primary { display: inline-block; background: var(--teal); color: #fff; border: none; border-radius: 8px; padding: 0.6rem 1.25rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.dlreg .btn-primary:hover { background: var(--teal-dark); color: #fff; text-decoration: none; }
.dlreg .btn-secondary { display: inline-block; background: #fff; color: var(--dark); border: 1px solid #cbd5e1; border-radius: 8px; padding: 0.6rem 1.25rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.dlreg .btn-secondary:hover { background: var(--gray-50); color: var(--dark); text-decoration: none; }
.dlreg .btn-edit { color: var(--teal); font-weight: 600; text-decoration: none; }
.dlreg .btn-delete { background: none; border: none; color: #dc2626; font-weight: 600; cursor: pointer; padding: 0; }
.dlreg .text-danger, .dlreg .field-validation-error { color: #dc2626; font-size: 0.78rem; display: block; margin-top: 0.25rem; }
.dlreg .validation-summary-errors, .dlreg div[asp-validation-summary] { color: #dc2626; font-size: 0.85rem; margin-bottom: 1rem; }
.dlreg .ok-msg { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; padding: 0.6rem 0.9rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.85rem; }
.dlreg .err-msg { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: 0.6rem 0.9rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.85rem; }
.dlreg .radio-group { display: flex; gap: 1.25rem; margin: 0.25rem 0 0.75rem; }
.dlreg .radio-label { font-weight: 500 !important; display: inline-flex; align-items: center; gap: 0.35rem; }
.dlreg .radio-label input { width: auto; }
.dlreg .product-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; }
.dlreg .product-table th, .dlreg .product-table td { text-align: left; padding: 0.65rem 0.85rem; font-size: 0.85rem; border-bottom: 1px solid var(--gray-200); }
.dlreg .product-table th { background: var(--gray-50); font-weight: 600; color: var(--gray-700); }
.dlreg .reg-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; }
.dlreg .reg-toolbar h2 { font-size: 1.15rem; font-weight: 700; color: var(--dark); }
.dlreg .g-recaptcha { margin: 0.5rem 0 1rem; }