/*
Theme Name: CYT Hydraulic
Description: B2B hydraulic fittings manufacturer site. Tokens and components follow Design System.md (V1.0).
Author: CYT Hydraulic
*/

/* ==========================================================================
   1. Design tokens — Design System.md, section 3 & 4 & 5 & 9
   ========================================================================== */
:root {
  --cyth-brand: #17324D;
  --cyth-brand-hover: #10263B;
  --cyth-accent: #B54720;
  --cyth-accent-hover: #943918;
  --cyth-accent-soft: #FFF0E9;

  --cyth-surface: #FFFFFF;
  --cyth-surface-subtle: #F4F6F8;
  --cyth-surface-muted: #E9EEF2;

  --cyth-text: #202B36;
  --cyth-text-2: #526170;
  --cyth-border: #D9E0E6;
  --cyth-border-control: #8191A1;

  --cyth-ok: #186548;
  --cyth-ok-bg: #EAF5EE;
  --cyth-warn: #8A4B08;
  --cyth-warn-bg: #FFF4DF;
  --cyth-err: #B42318;
  --cyth-err-bg: #FDEDEA;

  --cyth-font: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

  --cyth-wrap: 1248px;
  --cyth-gutter: 32px;
  --cyth-radius-sm: 4px;
  --cyth-radius-md: 8px;
  --cyth-shadow: 0 8px 24px rgba(23, 50, 77, 0.10);
  --cyth-transition: 160ms ease;
}

@media (max-width: 1023px) {
  :root { --cyth-gutter: 24px; }
}
@media (max-width: 639px) {
  :root { --cyth-gutter: 20px; }
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cyth-surface);
  color: var(--cyth-text);
  font-family: var(--cyth-font);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--cyth-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--cyth-transition), border-color var(--cyth-transition);
}
a:hover { color: var(--cyth-accent); }

:focus-visible {
  outline: 2px solid var(--cyth-brand);
  outline-offset: 2px;
}

h1, h2, h3, h4 { margin: 0 0 16px; font-weight: 600; color: var(--cyth-brand); }
h1 { font-size: 48px; line-height: 58px; }
h2 { font-size: 32px; line-height: 42px; }
h3 { font-size: 24px; line-height: 33px; }
p { margin: 0 0 16px; max-width: 68ch; }
ul, ol { margin: 0 0 16px; padding-left: 24px; }

@media (max-width: 639px) {
  h1 { font-size: 34px; line-height: 43px; }
  h2 { font-size: 26px; line-height: 35px; }
  h3 { font-size: 21px; line-height: 30px; }
}

.cyth-wrap {
  width: 100%;
  max-width: calc(var(--cyth-wrap) + var(--cyth-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--cyth-gutter);
}

.cyth-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cyth-brand);
  color: #fff;
  padding: 12px 24px;
  z-index: 100;
}
.cyth-skip:focus { left: 0; color: #fff; }

/* ==========================================================================
   3. Buttons
   ========================================================================== */
.cyth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--cyth-radius-sm);
  border: 1px solid transparent;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--cyth-transition), border-color var(--cyth-transition), color var(--cyth-transition);
}

.cyth-btn--primary {
  background: var(--cyth-accent);
  color: #fff;
}
.cyth-btn--primary:hover {
  background: var(--cyth-accent-hover);
  color: #fff;
}

.cyth-btn--secondary {
  background: var(--cyth-surface);
  color: var(--cyth-brand);
  border-color: var(--cyth-brand);
}
.cyth-btn--secondary:hover {
  background: var(--cyth-surface-muted);
  color: var(--cyth-brand);
}

/* ==========================================================================
   4. Site header & navigation
   ========================================================================== */
.cyth-sitehead {
  background: var(--cyth-surface);
  border-bottom: 1px solid var(--cyth-border);
}

.cyth-sitehead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 88px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.cyth-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--cyth-brand);
}
.cyth-brand__name {
  font-size: 24px;
  line-height: 33px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.cyth-brand__tag {
  font-size: 14px;
  line-height: 22px;
  color: var(--cyth-text-2);
}
.cyth-brand:hover { color: var(--cyth-brand-hover); }

.cyth-nav__toggle {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  background: var(--cyth-surface);
  color: var(--cyth-brand);
  border: 1px solid var(--cyth-brand);
  border-radius: var(--cyth-radius-sm);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.cyth-nav__primary,
.cyth-nav__secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
}

.cyth-nav__secondary {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--cyth-border);
}

.cyth-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  line-height: 24px;
  color: var(--cyth-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.cyth-nav__link:hover {
  color: var(--cyth-brand);
  border-bottom-color: var(--cyth-accent);
}
.cyth-nav__link--sub {
  color: var(--cyth-text-2);
  font-size: 14px;
}

@media (max-width: 1023px) {
  .cyth-sitehead__bar { flex-wrap: wrap; }
  .cyth-nav { width: 100%; }
  .cyth-nav__toggle { display: inline-flex; }
  .cyth-nav__panel[data-state="closed"] { display: none; }
  .cyth-nav__primary { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 8px; }
  .cyth-nav__secondary { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* ==========================================================================
   5. Hero & page body
   ========================================================================== */
.cyth-hero {
  background: var(--cyth-surface-subtle);
  border-bottom: 1px solid var(--cyth-border);
}

.cyth-hero--home {
  background: var(--cyth-brand);
  border-bottom: 0;
}
.cyth-hero--home .cyth-hero__title { color: #fff; }
.cyth-hero--home .cyth-hero__lede { color: #E9EEF2; }

.cyth-hero > .cyth-wrap { padding-top: 64px; padding-bottom: 64px; }

.cyth-hero__title {
  margin: 0 0 16px;
  max-width: 20ch;
}
.cyth-hero__lede {
  margin: 0 0 24px;
  max-width: 62ch;
  font-size: 18px;
  line-height: 30px;
  color: var(--cyth-text-2);
}

.cyth-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 639px) {
  .cyth-hero > .cyth-wrap { padding-top: 40px; padding-bottom: 40px; }
  .cyth-hero__lede { font-size: 16px; line-height: 26px; }
}

.cyth-page__body { padding: 64px 0; }
@media (max-width: 639px) {
  .cyth-page__body { padding: 40px 0; }
}

.cyth-section { margin: 0 0 48px; }
.cyth-section:last-child { margin-bottom: 0; }
.cyth-section__title { margin-bottom: 24px; }

@media (max-width: 639px) {
  .cyth-section { margin-bottom: 40px; }
}

/* ==========================================================================
   6. Planning placeholder
   ========================================================================== */
.cyth-planning {
  display: inline-block;
  margin: 0 0 24px;
  padding: 8px 12px;
  background: var(--cyth-warn-bg);
  color: var(--cyth-warn);
  border-radius: var(--cyth-radius-sm);
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}

/* ==========================================================================
   7. Image slots
   ========================================================================== */
.cyth-ph {
  margin: 0 0 24px;
  background: var(--cyth-surface-subtle);
  border: 1px solid var(--cyth-border);
  border-radius: var(--cyth-radius-md);
  overflow: hidden;
}

.cyth-ph__img {
  width: 100%;
  height: auto;
  background: var(--cyth-surface-muted);
}

.cyth-ph__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--cyth-border);
  background: var(--cyth-surface);
  font-size: 14px;
  line-height: 22px;
  color: var(--cyth-text-2);
}

.cyth-ph__size {
  color: var(--cyth-brand);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cyth-ph-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.cyth-ph-grid > .cyth-ph { margin: 0; }

.cyth-ph-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cyth-ph-grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1023px) {
  .cyth-ph-grid,
  .cyth-ph-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .cyth-ph-grid,
  .cyth-ph-grid--3,
  .cyth-ph-grid--2 { grid-template-columns: 1fr; gap: 20px; }
}

/* ==========================================================================
   8. Related links
   ========================================================================== */
.cyth-linkrow {
  margin: 32px 0 0;
  padding: 24px;
  background: var(--cyth-surface-subtle);
  border: 1px solid var(--cyth-border);
  border-radius: var(--cyth-radius-md);
}
.cyth-linkrow__title {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--cyth-text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cyth-linkrow__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cyth-linkrow__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}

/* ==========================================================================
   9. Site footer
   ========================================================================== */
.cyth-sitefoot {
  margin-top: 80px;
  background: var(--cyth-brand);
  color: #E9EEF2;
}
.cyth-sitefoot a { color: #fff; text-decoration: none; }
.cyth-sitefoot a:hover { color: var(--cyth-accent-soft); text-decoration: underline; }

.cyth-sitefoot__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px 24px;
  padding-top: 64px;
  padding-bottom: 48px;
}

.cyth-sitefoot__name {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: #fff;
}
.cyth-sitefoot__tag { margin: 0 0 24px; max-width: 34ch; color: #E9EEF2; }
.cyth-sitefoot__cta { margin: 0; }

.cyth-sitefoot__heading {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.cyth-sitefoot__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cyth-sitefoot__list li { margin-bottom: 8px; }

.cyth-sitefoot__legal {
  padding-top: 24px;
  padding-bottom: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 14px;
  line-height: 22px;
}
.cyth-sitefoot__legal p { margin: 0; }

@media (max-width: 1023px) {
  .cyth-sitefoot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
  .cyth-sitefoot { margin-top: 48px; }
  .cyth-sitefoot__grid { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; padding-bottom: 32px; }
}

/* ==========================================================================
   10. Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Data components — the blocks that render engine record fields.
   Prose, notes, term chips, galleries, spec tables and product cards.
   ========================================================================== */

.cyth-prose {
    max-width: 68ch;
    font-size: 16px;
    line-height: 26px;
    color: #2b3a48;
}
.cyth-prose > * + * { margin-top: 14px; }
.cyth-prose h3 {
    font-size: 18px;
    line-height: 27px;
    font-weight: 600;
    color: #17324d;
    margin-top: 22px;
}

.cyth-note {
    max-width: 68ch;
    margin-top: 20px;
    padding: 10px 14px;
    border-left: 3px solid #b54720;
    background: #f6f7f9;
    font-size: 14px;
    line-height: 22px;
    color: #526170;
}

.cyth-empty {
    margin-top: 12px;
    font-size: 16px;
    line-height: 26px;
    color: #526170;
}

.cyth-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    list-style: none;
    padding: 0;
}
.cyth-chip a,
.cyth-chip {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #c9d3dc;
    border-radius: 2px;
    background: #fff;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    color: #17324d;
    text-decoration: none;
}
.cyth-chip a:hover,
.cyth-chip a:focus {
    border-color: #17324d;
    background: #17324d;
    color: #fff;
}

.cyth-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 12px;
    list-style: none;
    padding: 0;
}
.cyth-gallery__item { margin: 0; }
.cyth-gallery__item img,
.cyth-gallery__item .cyth-ph {
    display: block;
    width: 100%;
    height: auto;
}

.cyth-spec {
    display: grid;
    grid-template-columns: minmax(120px, 200px) 1fr;
    gap: 8px 20px;
    margin-top: 12px;
    font-size: 15px;
    line-height: 24px;
}
.cyth-spec__key {
    font-weight: 600;
    color: #17324d;
    font-variant-numeric: tabular-nums;
}
.cyth-spec__val {
    margin: 0;
    color: #2b3a48;
    font-variant-numeric: tabular-nums;
}

.cyth-table__wrap {
    margin-top: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.cyth-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 24px;
    font-variant-numeric: tabular-nums;
}
.cyth-table th,
.cyth-table td {
    padding: 10px 14px;
    border: 1px solid #dde3e9;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}
.cyth-table thead th {
    background: #eef1f4;
    font-size: 14px;
    font-weight: 600;
    color: #17324d;
}
.cyth-table tbody tr:nth-child(even) { background: #f8f9fb; }

.cyth-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    margin-top: 16px;
    list-style: none;
    padding: 0;
}
.cyth-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid #e2e8ee;
    border-radius: 2px;
    background: #fff;
}
.cyth-card__img { margin: 0 0 4px; }
.cyth-card__img img,
.cyth-card__img .cyth-ph {
    display: block;
    width: 100%;
    height: auto;
}
.cyth-card__title {
    margin: 0;
    font-size: 18px;
    line-height: 27px;
    font-weight: 600;
}
.cyth-card__link {
    color: #17324d;
    text-decoration: none;
}
.cyth-card__link:hover,
.cyth-card__link:focus { color: #b54720; }
.cyth-card__meta {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    color: #526170;
    font-variant-numeric: tabular-nums;
}
.cyth-card__text {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    color: #2b3a48;
}

/* ==========================================================================
   Navigation — desktop flyouts & mega menus, mobile accordion
   Panels are shown and hidden by the behaviour with the `hidden` attribute,
   so any [hidden] rule below must win over the panel's own display.
   ========================================================================== */

.cyth-nav--desktop { display: none; }
.cyth-nav--mobile { display: flex; align-items: center; }

.cyth-nav__group { position: relative; display: inline-flex; }

.cyth-nav__group:hover > .cyth-nav__link,
.cyth-nav__group:focus-within > .cyth-nav__link {
  color: var(--cyth-brand);
  border-bottom-color: var(--cyth-accent);
}

.cyth-nav__chevbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  min-height: 44px;
  margin-left: -8px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--cyth-text);
}
.cyth-nav__chevbtn:hover,
.cyth-nav__chevbtn:focus,
.cyth-nav__group[data-state="open"] .cyth-nav__chevbtn {
  color: var(--cyth-brand);
}

.cyth-nav__chev {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.cyth-nav__link--cta {
  padding: 0 16px;
  border: 1px solid var(--cyth-brand);
  border-radius: var(--cyth-radius-sm);
  color: var(--cyth-brand);
  font-weight: 600;
}
.cyth-nav__link--cta:hover {
  background: var(--cyth-brand);
  color: var(--cyth-surface);
  border-bottom-color: var(--cyth-brand);
}

.cyth-nav__flyout {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  min-width: 260px;
  padding: 22px;
  background: var(--cyth-surface);
  border: 1px solid var(--cyth-border);
  box-shadow: 0 14px 32px rgba(23, 50, 77, 0.14);
}
.cyth-nav__flyout[hidden] { display: none; }
.cyth-nav__flyout--mega { width: min(920px, 92vw); }

.cyth-mega {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 24px 28px;
}
.cyth-mega__title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cyth-border);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyth-text-2);
}
.cyth-mega__links {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cyth-mega__links a {
  font-size: 15px;
  line-height: 22px;
  color: var(--cyth-text);
  text-decoration: none;
}
.cyth-mega__links a:hover,
.cyth-mega__links a:focus { color: var(--cyth-accent); }

@media (min-width: 1024px) {
  .cyth-nav--desktop {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
  }
  .cyth-nav--mobile { display: none; }
  .cyth-nav--desktop .cyth-nav__link {
    white-space: nowrap;
    padding: 0 9px;
    font-size: 15px;
  }
  .cyth-nav--desktop .cyth-nav__link--cta { padding: 0 14px; }
}

.cyth-nav__group[data-state="open"] .cyth-nav__chev {
  transform: translateY(2px) rotate(225deg);
}

/* --- Mobile: the menu panel and its accordion --- */
.cyth-nav--mobile { width: 100%; flex-wrap: wrap; justify-content: flex-end; }

.cyth-nav__mpanel {
  width: 100%;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--cyth-border);
}
.cyth-nav__mpanel[hidden] { display: none; }

.cyth-nav__macc { display: grid; }

.cyth-nav__mlink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--cyth-text);
  text-decoration: none;
  border-bottom: 1px solid var(--cyth-border);
}
.cyth-nav__mlink:hover,
.cyth-nav__mlink:focus { color: var(--cyth-brand); }
.cyth-nav__mlink--all { font-weight: 600; color: var(--cyth-brand); }
.cyth-nav__mlink--cta { color: var(--cyth-accent); font-weight: 600; }

.cyth-nav__mtrigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 6px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--cyth-border);
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--cyth-text);
  text-align: left;
  cursor: pointer;
}
.cyth-nav__mtrigger:hover,
.cyth-nav__mtrigger:focus { color: var(--cyth-brand); }

.cyth-nav__msub {
  padding: 4px 0 14px 16px;
  border-bottom: 1px solid var(--cyth-border);
}
.cyth-nav__msub[hidden] { display: none; }

.cyth-nav__mheading {
  margin: 14px 0 2px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyth-text-2);
}
.cyth-nav__mlist { margin: 0; padding: 0; list-style: none; }
.cyth-nav__mlist .cyth-nav__mlink {
  min-height: 40px;
  font-size: 15px;
  border-bottom: 0;
}

/* --------------------------------------------------------------
   Product category navigation bar (parts/product-catnav.php)
   Three rows: Product Categories · Fitting Standards · More.

   The current item is Design System.md 186 "已选项" — copper-orange soft
   background, copper-orange border, dark text — and keeps the check mark
   that row requires beside it, so position never depends on colour alone.
   -------------------------------------------------------------- */
.cyth-catnav {
  margin: 0 0 40px;
  background: var(--cyth-surface);
  border: 1px solid var(--cyth-border);
  border-radius: var(--cyth-radius-md);
}

.cyth-catnav__heading {
  margin: 0;
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--cyth-border);
}

.cyth-catnav__row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 18px 24px;
}

.cyth-catnav__row + .cyth-catnav__row { border-top: 1px solid var(--cyth-border); }

.cyth-catnav__title {
  flex: 0 0 176px;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cyth-border);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyth-text-2);
}

.cyth-catnav__title--current {
  color: var(--cyth-text);
  border-bottom-color: var(--cyth-accent);
}

.cyth-catnav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cyth-catnav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--cyth-border);
  border-radius: var(--cyth-radius-sm);
  color: var(--cyth-text);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.3;
  transition: background-color var(--cyth-transition), border-color var(--cyth-transition), color var(--cyth-transition);
}

.cyth-catnav__link:hover,
.cyth-catnav__link:focus {
  border-color: var(--cyth-accent);
  color: var(--cyth-accent);
}

/* Design System.md 186 "已选项". */
.cyth-catnav__link--current,
.cyth-catnav__link--current:hover,
.cyth-catnav__link--current:focus {
  background: var(--cyth-accent-soft);
  border-color: var(--cyth-accent);
  color: var(--cyth-text);
  font-weight: 600;
}

.cyth-catnav__mark {
  font-size: 12px;
  line-height: 1;
  color: var(--cyth-accent);
}

@media (max-width: 1023px) {
  .cyth-catnav__row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .cyth-catnav__title { flex: none; width: 100%; }
}

@media (max-width: 639px) {
  .cyth-catnav { margin-bottom: 32px; }
  .cyth-catnav__heading { padding: 20px 16px 14px; }
  .cyth-catnav__row { padding: 16px; }
}