/* ═══════════════════════════════════════════
   KIT PRO — Design System
   Parent: Hummingbird v2
   ═══════════════════════════════════════════ */

/* ── Tokens : themes/kitpro/assets/css/kp-tokens.css (chargé avant ce fichier,
   cf. _partials/head.tpl), polices auto-hébergées. Mode d'emploi :
   docs/design-system.md ── */

/* Alias temporaires des anciens noms (socle design system, 2026-10) : à retirer
   dès que plus aucune feuille ne les lit. */
:root {
  --kp-emerald: var(--kp-success);
  --kp-emerald-light: var(--kp-success-light);
  --kp-amber: var(--kp-warning);
  --kp-amber-light: var(--kp-warning-light);
  --kp-red: var(--kp-danger);
  --kp-red-light: var(--kp-danger-light);
  --kp-blue-glow: var(--kp-blue-light);
  --kp-shadow-blue: none;
  --kp-radius-xl: var(--kp-radius-lg);
}

/* ── Base Overrides ── */
body {
  font-family: var(--kp-font-sans);
  background: var(--kp-ink-02);
  color: var(--kp-ink-80);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--kp-font-sans);
  color: var(--kp-ink);
}
h1 { font-weight: 800; letter-spacing: -0.04em; }
h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
h3 { font-size: 18px; font-weight: 700; }

/* Conteneur du design system : 1320px hors tout, marge latérale 16px puis 24px. */
.container { max-width: var(--kp-container); padding-left: var(--kp-space-4); padding-right: var(--kp-space-4); }
@media (min-width: 992px) {
  .kp-cms { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 32px; }

/* ── Focus clavier unifié (kp-focus-ring : 2px blanc puis 2px bleu) ──
   kp-components.css le pose sur tout élément interactif via :where(), de
   spécificité nulle : les composants Bootstrap du parent, plus spécifiques,
   gardaient leur halo bleu translucide. Les champs gardent le focus du
   composant FormField (bordure bleue + liseré kp-blue-light). */
.btn { --bs-btn-focus-box-shadow: var(--kp-focus-ring); }
.accordion { --bs-accordion-btn-focus-box-shadow: var(--kp-focus-ring); }
.pagination { --bs-pagination-focus-box-shadow: var(--kp-focus-ring); }
.btn-close { --bs-btn-close-focus-shadow: var(--kp-focus-ring); }
.nav-link:focus-visible,
.form-check-input:focus-visible,
.focus-ring:focus-visible { outline: none; box-shadow: var(--kp-focus-ring); }
.form-control:focus,
.form-select:focus { border-color: var(--kp-blue); box-shadow: 0 0 0 3px var(--kp-blue-light); }

/* ── Fil d'Ariane (maquettes Rayon et Produit) : 13/18, liens kp-ink-60,
   page courante kp-ink 600. Balisage du parent (_partials/breadcrumb.tpl). ── */
.breadcrumb {
  --bs-breadcrumb-font-size: 13px;
  --bs-breadcrumb-divider-color: var(--kp-ink-60);
  --bs-breadcrumb-item-active-color: var(--kp-ink);
  line-height: 18px; color: var(--kp-ink-60);
}
.breadcrumb-link { color: var(--kp-ink-60); }
.breadcrumb-link:hover { color: var(--kp-ink); }
.breadcrumb-item:last-child > span { color: var(--kp-ink); font-weight: 600; }

/* ── Serif accent ── */
.kp-serif {
  font-family: var(--kp-font-serif);
  font-style: italic;
  font-weight: 400;
}

/* ── Buttons ── */
.btn-primary, .kp-btn-primary {
  background: var(--kp-blue); color: var(--kp-white); border: none;
  padding: 12px 28px; border-radius: var(--kp-radius-sm); font-weight: 700; font-size: 14px;
  font-family: var(--kp-font-sans);
  transition: background var(--kp-transition); cursor: pointer;
}
.btn-primary:hover, .kp-btn-primary:hover { background: var(--kp-blue-dark); }
.kp-btn-outline {
  background: var(--kp-white); color: var(--kp-ink);
  border: 1px solid var(--kp-ink-30); padding: 12px 28px; border-radius: var(--kp-radius-sm);
  font-weight: 700; font-size: 14px; font-family: var(--kp-font-sans);
  transition: border-color var(--kp-transition); cursor: pointer;
}
.kp-btn-outline:hover { border-color: var(--kp-ink); background: var(--kp-ink-05); }
.kp-btn-ghost {
  background: none; border: none; color: var(--kp-blue); font-weight: 600;
  font-size: 14px; font-family: var(--kp-font-sans); cursor: pointer;
  padding: 0; display: inline-flex; align-items: center; gap: 6px;
}

/* .kp-card et .kp-badge : composants du design system (kp-components.css). */

/* ── Pills (sous-catégories) ── */
.kp-pill {
  display: inline-block; padding: 6px 18px; border-radius: var(--kp-radius-full);
  font-size: 12px; font-weight: 500; border: 1.5px solid var(--kp-ink-10);
  color: var(--kp-ink-60); background: var(--kp-white); text-decoration: none;
  transition: all var(--kp-transition);
}
.kp-pill:hover { border-color: var(--kp-blue); color: var(--kp-blue); }
.kp-pill--active {
  background: var(--kp-blue); border-color: var(--kp-blue);
  color: var(--kp-white); font-weight: 600;
}

/* ── Trust badges ── */
.kp-trust {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--kp-ink-05); padding: 8px 14px; border-radius: var(--kp-radius-sm);
  font-size: 12px; color: var(--kp-ink-60); font-weight: 500;
}
.kp-trust svg { color: var(--kp-blue); flex-shrink: 0; }

/* ── Section spacing ── */
.kp-section { padding: 64px 0; }
.kp-section-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px;
}
.kp-section-title {
  font-size: 28px; font-weight: 800; color: var(--kp-ink); letter-spacing: -0.03em;
}

/* ── Animations ── */
@keyframes kp-fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes kp-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Reduced motion: honor user OS preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════
   Category / Product / Manufacturer Pages
   ═══════════════════════════════════════════ */

/* ── Product Page ── */
/* #254 — la règle `#product_features { display: none !important }` a été
   retirée : masquer en CSS laissait le bloc dans le HTML servi, donc la fiche
   technique était lue deux fois par les crawlers. catalog/product.tpl ne
   rend plus du tout le repli natif quand le module fournit sa fiche groupée.
   Styles de la fiche produit : kp-product.css (couloir ds-product). */
/* Hide empty comments section */
.product-comments-list:empty + .product-comments-additional-info,
.product-comment-list-none { display: none; }

/* Hide panier in "similar products" carousel */
.product-accessories .product-miniature__form { display: none; }

/* #166 — bouton "wishlist" natif du thème parent (Hummingbird) masqué. Le
   module blockwishlist EST installé et actif (greffé sur
   displayProductActions, constaté en préprod le 2026-10-07) : la liste
   d'envies n'est simplement pas une fonction proposée par la boutique.
   L'icône du bouton s'afficherait en texte brut "favorite_border", faute
   de police material-icons chargée dans ce thème (SVG inline partout).
   Présent sur toutes les vignettes produit (accueil, listing, quickview)
   et sur la fiche produit. Voir aussi le lien "Favoris" du header,
   retiré côté template (_partials/header.tpl). */
.wishlist-button-add { display: none !important; }

/* ── Garantie (kitpro_ingramsync, hook displayProductAdditionalInfo) ── */
/* #164 — style possédé par le thème (le module ne fournit que le HTML et
   le JS d'interaction, cf. modules/kitpro_ingramsync/views/css/promo-badge.css) :
   remplace le badge gris plat à bordure gauche + emoji, qui détonnait
   visuellement du reste de kitpro, par un pill cohérent avec .kp-stock. */
.kp-warranty-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--kp-radius-full);
  color: var(--kp-success);
  background: var(--kp-success-light);
  margin: 8px 0;
  /* #208 : ce badge n'a pas de texte long aujourd'hui, mais il partage
     la carte (.product-miniature) avec .kitpro-badges — quand celui-ci
     forçait la carte à s'élargir (débordement du badge Processeur), ce
     badge suivait la même largeur. Même garde qu'en face pour ne jamais
     dépendre de la carte, même si le libellé de garantie s'allonge un jour. */
  max-width: 100%;
  min-width: 0;
}
.kp-warranty-badge--card {
  font-size: 11px;
  padding: 2px 8px;
  margin: 4px 0 0;
}
.kp-warranty-icon { flex-shrink: 0; }
.kp-warranty-text {
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Garantie : grille d'offres en lecture seule (#164) ── */
/* Sélection visuelle uniquement (JS : warranty-offers-display.js) — pas de
   lien avec le formulaire add-to-cart, cf. product-warranty-offers-display.tpl. */
.kp-warranty-info {
  margin: 16px 0;
  padding-top: 16px;
  border-top: 1px solid var(--kp-ink-10);
}
.kp-warranty-info__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--kp-ink);
  margin: 0 0 10px;
}
.kp-warranty-info__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.kp-winfo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--kp-ink-10);
  border-radius: var(--kp-radius-md);
  background: var(--kp-white);
  padding: 12px 14px;
  cursor: pointer;
  transition: var(--kp-transition);
}
.kp-winfo-card:hover { border-color: var(--kp-blue); }
.kp-winfo-card.is-selected {
  border-color: var(--kp-blue);
  box-shadow: 0 0 0 2px var(--kp-blue-light);
}
.kp-winfo-card__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.kp-winfo-card--reco { border-color: var(--kp-blue); }
.kp-winfo-card__badge {
  position: absolute;
  top: -9px;
  left: 12px;
  background: var(--kp-blue);
  color: var(--kp-white);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: var(--kp-radius-full);
}
.kp-winfo-card__years {
  font-size: 15px;
  font-weight: 700;
  color: var(--kp-ink);
}
.kp-winfo-card__level {
  font-size: 12px;
  color: var(--kp-ink-40);
}
.kp-winfo-card__price {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 600;
  color: var(--kp-ink);
}
.kp-winfo-card__price-ht {
  font-size: 14px;
  font-weight: 700;
  color: var(--kp-blue);
}
.kp-winfo-card__price-ttc {
  font-size: 11px;
  font-weight: 400;
  color: var(--kp-ink-40);
}
.kp-warranty-info__cta {
  width: 100%;
  text-align: center;
}
@media (max-width: 480px) {
  .kp-winfo-card { padding: 10px 12px; }
}

/* ── Blockreassurance (product page) ── */
.blockreassurance_product {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.blockreassurance_product > div {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--kp-ink-10);
}
.blockreassurance_product > div:last-of-type {
  border-bottom: none;
}
.blockreassurance_product .item-product {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blockreassurance_product .item-product img {
  width: 20px;
  height: 20px;
  opacity: 0.6;
}
.blockreassurance_product .item-product img.invisible {
  visibility: visible !important;
  opacity: 0.6;
}
.blockreassurance_product .block-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--kp-ink) !important;
  margin: 0;
}
.blockreassurance_product p {
  font-size: 12px;
  color: var(--kp-ink-60) !important;
  margin: 2px 0 0;
  line-height: 1.4;
}

/* ── Newsletter (override ps_emailsubscription) ── */
.kp-newsletter {
  background: linear-gradient(135deg, var(--kp-blue) 0%, var(--kp-blue-dark) 100%);
  color: var(--kp-white);
  text-align: center;
  padding: 48px 0;
}
.kp-newsletter-icon {
  margin-bottom: 12px;
}
.kp-newsletter-icon svg {
  color: rgba(255, 255, 255, 0.9);
}
.kp-newsletter-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--kp-white);
  margin-bottom: 8px;
}
.kp-newsletter-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 24px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.kp-newsletter-form {
  display: flex;
  max-width: 480px;
  margin: 0 auto;
  border-radius: var(--kp-radius-sm);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.kp-newsletter-input {
  flex: 1;
  border: none;
  padding: 14px 20px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  color: var(--kp-ink-80);
}
.kp-newsletter-input:focus-visible { box-shadow: inset 0 0 0 2px var(--kp-blue); }
.kp-newsletter-input::placeholder {
  color: var(--kp-ink-40);
}
.kp-newsletter-submit {
  background: var(--kp-ink);
  color: var(--kp-white);
  padding: 14px 28px;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.kp-newsletter-submit:hover {
  background: var(--kp-ink-80);
}
.kp-newsletter-legal {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 12px;
}
.kp-newsletter-msg {
  margin-top: 12px;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: var(--kp-radius-sm);
}
.kp-newsletter-success {
  background: rgba(5, 150, 105, 0.2);
  color: #6ee7b7;
}
.kp-newsletter-error {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
}

/* --- Page Connexion / Inscription --- */
.page-authentication .login {
  max-width: 480px;
  margin: 40px auto;
  padding: 32px;
  background: var(--kp-white);
  border-radius: var(--kp-radius-md);
  border: 1px solid var(--kp-ink-10);
  box-shadow: 0 4px 16px rgba(11,14,20,0.06);
}
.page-authentication h1 {
  font-size: 28px;
  font-weight: 800;
  color: var(--kp-ink);
  text-align: center;
  margin-bottom: 24px;
}
.page-authentication .form-control,
.page-authentication input[type="text"],
.page-authentication input[type="email"],
.page-authentication input[type="password"] {
  border: 1.5px solid var(--kp-ink-10);
  border-radius: var(--kp-radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  font-family: 'DM Sans', system-ui, sans-serif;
  transition: border-color 0.2s;
}
.page-authentication .form-control:focus,
.page-authentication input:focus {
  border-color: var(--kp-blue);
  box-shadow: 0 0 0 3px var(--kp-blue-light);
  outline: none;
}
.page-authentication .input-group .btn,
.page-authentication [data-action="show-password"] {
  border: 1.5px solid var(--kp-ink-10);
  border-left: none;
  border-radius: 0 var(--kp-radius-sm) var(--kp-radius-sm) 0;
  background: var(--kp-ink-02);
  color: var(--kp-ink-60);
}
.page-authentication .input-group .btn i,
.page-authentication [data-action="show-password"] i {
  color: var(--kp-ink-60);
}
.page-authentication .btn-primary,
.page-authentication button[type="submit"] {
  background: var(--kp-blue);
  border: none;
  border-radius: var(--kp-radius-sm);
  padding: 12px 28px;
  font-weight: 700;
  font-size: 14px;
}
.page-authentication .btn-primary:hover {
  background: var(--kp-blue-dark);
}
.page-authentication a[href*="recuperation"] {
  color: var(--kp-blue);
  font-size: 13px;
}
.page-authentication hr {
  margin: 24px 0;
  border-color: var(--kp-ink-10);
}
.page-authentication .login__register-prompt h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}
.page-authentication .login__register-prompt a {
  display: block;
  text-align: center;
  border: 1.5px solid var(--kp-blue);
  color: var(--kp-blue);
  border-radius: var(--kp-radius-sm);
  padding: 12px;
  font-weight: 600;
  transition: all 0.2s;
}
.page-authentication .login__register-prompt a:hover {
  background: var(--kp-blue);
  color: var(--kp-white);
}

/* ── Prix HT par ligne de panier/checkout (kitpro_ingramsync, hook
   displayProductPriceBlock type="unit_price") — #151 ── */
/* Style possédé par le thème (le module ne fournit que le HTML, cf.
   modules/kitpro_ingramsync/classes/Presentation/CartLineHtPriceRenderer.php) :
   même traitement visuel que .product-line__item-unit-price natif
   (var(--bs-secondary-color), 0.875rem) pour rester cohérent avec le reste
   de la ligne, sans dupliquer le poids visuel du prix TTC affiché au-dessus. */
.kp-cart-line-price-ht {
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}

/* ── Page Contact (/nous-contacter) — refonte esthétique ──
   Contexte : themes/kitpro/templates/contact.tpl + surcharges des
   templates de ps_contactinfo et contactform (voir ces fichiers pour le
   détail des root causes — titre "Informations" invisible car le core
   réutilisait .footer-block__title, dont la couleur blanche n'est
   lisible que sur le fond sombre du footer). */
.kp-contact-hero__subtitle {
  margin: 0 0 8px;
  color: var(--kp-ink-60);
  font-size: 15px;
}

.kp-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-bottom: 16px;
}
@media (min-width: 992px) {
  .kp-cms { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 32px; }
    align-items: start;
  }
}

.kp-contact-card {
  background: var(--kp-white);
  border: 1px solid var(--kp-ink-10);
  border-radius: var(--kp-radius-md);
  box-shadow: var(--kp-shadow-sm);
  padding: 24px;
}
.kp-contact-card__title {
  margin: 0 0 16px;
}
.kp-contact-card__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--kp-ink-05);
  min-height: 44px;
}
.kp-contact-card__row:first-of-type {
  border-top: none;
  padding-top: 0;
}
.kp-contact-card__icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--kp-blue);
}
.kp-contact-card__value {
  color: var(--kp-ink-80);
  overflow-wrap: anywhere;
  align-self: center;
}
.kp-contact-card__link {
  color: var(--kp-ink-80);
  text-decoration: none;
}
.kp-contact-card__link:hover,
.kp-contact-card__link:focus-visible {
  color: var(--kp-blue);
}
.kp-contact-card__optional {
  font-weight: 400;
  color: var(--kp-ink-40);
  font-size: 13px;
}
.kp-contact-card--form .btn.btn-primary {
  min-height: 44px;
  padding-inline: 24px;
}

/* ── GEO E4/E7 (#252) — bloc réassurance + fraîcheur (_partials/kp-facts.tpl) ── */
.kp-facts {
  display: block;
  margin-top: 24px;
  padding: 16px 20px;
  border: 1px solid var(--kp-ink-10);
  border-radius: var(--kp-radius-md);
  background: var(--kp-ink-02);
}
.kp-facts__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
@media (min-width: 768px) {
  .kp-facts__list { grid-template-columns: 1fr 1fr; column-gap: 24px; }
}
.kp-facts__item {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--kp-ink-80);
}
.kp-facts__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--kp-success);
  border-bottom: 2px solid var(--kp-success);
  transform: rotate(-45deg);
}
.kp-facts__meta {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--kp-ink-10);
  font-size: 13px;
  color: var(--kp-ink-40);
}

/* ── GEO C3/E5/S3 (#252) — FAQ de gabarit (_partials/kp-page-faq.tpl) ── */
.kp-page-faq {
  margin: 32px 0 8px;
  padding: 20px 24px;
  border: 1px solid var(--kp-ink-10);
  border-radius: var(--kp-radius-md);
  background: var(--kp-white);
}
.kp-page-faq__title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: var(--kp-ink);
}
.kp-page-faq__item + .kp-page-faq__item {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--kp-ink-05);
}
.kp-page-faq__q {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--kp-ink-80);
}
.kp-page-faq__a {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--kp-ink-60);
  max-width: 68ch;
}

/* ---- Pages d'information CMS (cms/page.tpl, maquette CatInfo) ---- */
.kp-cms-head { padding: 12px 0 8px; }
.kp-cms-head__title { margin: 0; }
.kp-cms-head__lead { margin: 10px 0 0; max-width: 760px; }
.kp-cms { display: block; padding: 24px 0 48px; }
.kp-cms__body { max-width: 760px; min-width: 0; }
.kp-cms__body h2 { margin: 0 0 12px; font: 800 26px/32px var(--kp-font-sans); letter-spacing: -.02em; color: var(--kp-ink); scroll-margin-top: 16px; }
.kp-cms__body h2:not(:first-child) { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--kp-ink-10); }
.kp-cms__body h3 { margin: 24px 0 8px; font: 700 18px/24px var(--kp-font-sans); color: var(--kp-ink); }
.kp-cms__body p, .kp-cms__body li { font-size: 17px; line-height: 28px; color: var(--kp-ink-80); }
.kp-cms__body p { margin: 0 0 14px; }
.kp-cms__body a { color: var(--kp-blue); text-underline-offset: 3px; }
.kp-cms__side { display: grid; gap: 16px; margin-bottom: 24px; }
.kp-cms__toc { padding: 16px 8px 12px; background: var(--kp-white); border: 1px solid var(--kp-ink-10); border-radius: 16px; box-shadow: var(--kp-shadow-sm); }
.kp-cms__toc-title { margin: 0 0 6px 12px; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--kp-ink-60); }
.kp-cms__toc ul { margin: 0; padding: 0; list-style: none; }
.kp-cms__toc a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--kp-ink-80); text-decoration: none; box-shadow: inset 3px 0 0 transparent; }
.kp-cms__toc a:hover { background: var(--kp-ink-05); color: var(--kp-ink); box-shadow: inset 3px 0 0 var(--kp-blue); }
.kp-cms__help { display: grid; gap: 8px; padding: 18px; background: var(--kp-ink); border-radius: 16px; color: var(--kp-ink-20); box-shadow: var(--kp-shadow-md); }
.kp-cms__help p { margin: 0; font-size: 14px; line-height: 20px; }
.kp-cms__help-title { font-size: 16px !important; line-height: 22px !important; font-weight: 700; color: var(--kp-white); }
.kp-cms__phone { display: flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 700; color: var(--kp-white); text-decoration: none; }
@media (min-width: 992px) {
  .kp-cms { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 32px; }
  .kp-cms__side { position: sticky; top: 16px; margin-bottom: 0; }
}
@media (max-width: 991.98px) {
  .kp-cms__body h2 { font-size: 22px; line-height: 28px; }
  .kp-cms__body p, .kp-cms__body li { font-size: 16px; line-height: 26px; }
  .kp-cms__side { order: -1; }
}