/**
 * KNA Distribution — base : réinitialisation légère, éléments natifs,
 * accessibilité et primitives réutilisables.
 */

/* -----------------------------------------------------------------
 * 1. Réinitialisation légère
 * ----------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	padding: 0;
	background-color: var(--kna-color-dark);
	color: var(--kna-color-text);
	font-family: var(--kna-font-body);
	font-size: var(--kna-font-size-md);
	line-height: var(--kna-leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
}

figure {
	margin: 0;
}

/* -----------------------------------------------------------------
 * 2. Typographie
 * ----------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--kna-space-sm);
	font-family: var(--kna-font-display);
	font-weight: var(--kna-weight-extrabold);
	line-height: var(--kna-leading-tight);
	color: inherit;
}

h1 {
	font-size: var(--kna-font-size-display-sm);
	font-weight: var(--kna-weight-black);
	letter-spacing: var(--kna-tracking-tight);
	text-transform: uppercase;
}

h2 {
	font-size: var(--kna-font-size-xl);
	text-transform: uppercase;
}

h3 {
	font-size: var(--kna-font-size-lg);
}

p {
	margin: 0 0 var(--kna-space-md);
}

a {
	color: var(--kna-color-accent);
	text-decoration: none;
	transition: color var(--kna-transition-fast);
}

a:hover,
a:focus {
	color: var(--kna-color-accent-hover);
}

strong {
	font-weight: var(--kna-weight-bold);
}

/* Classe utilitaire reprise de la maquette (signatures manuscrites). */
.kna-hand {
	font-family: var(--kna-font-hand);
	font-weight: var(--kna-weight-bold);
	line-height: 1.12;
}

/* -----------------------------------------------------------------
 * 3. Mise en page
 * ----------------------------------------------------------------- */

.kna-container {
	width: 100%;
	max-width: var(--kna-container-max);
	margin-inline: auto;
	padding-inline: var(--kna-container-pad);
}

.kna-main {
	display: block;
	min-height: 40vh;
	padding-block: var(--kna-space-xl);
}

.kna-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* -----------------------------------------------------------------
 * 4. Accessibilité
 * ----------------------------------------------------------------- */

.screen-reader-text,
.kna-skip-link {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.kna-skip-link:focus,
.kna-skip-link:focus-visible,
.screen-reader-text:focus {
	position: fixed !important;
	top: var(--kna-space-sm);
	left: var(--kna-space-sm);
	z-index: var(--kna-z-modal);
	display: block;
	width: auto;
	height: auto;
	padding: var(--kna-space-sm) var(--kna-space-md);
	margin: 0;
	clip: auto;
	overflow: visible;
	background-color: var(--kna-color-accent);
	color: var(--kna-color-dark);
	font-weight: var(--kna-weight-bold);
	border-radius: var(--kna-radius-sm);
	box-shadow: var(--kna-shadow-md);
}

:focus-visible {
	outline: 2px solid var(--kna-color-focus);
	outline-offset: 2px;
}

/* Respect des préférences de mouvement réduit. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* -----------------------------------------------------------------
 * 5. Primitives : boutons
 *
 * Deux variantes issues de la maquette. Ce sont des primitives visuelles :
 * elles ne remplacent jamais les boutons natifs WooCommerce, qui sont
 * habillés séparément.
 * ----------------------------------------------------------------- */

.kna-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--kna-space-xs);
	padding: var(--kna-space-sm) var(--kna-space-lg);
	border: 1px solid transparent;
	border-radius: var(--kna-radius-pill);
	font-family: var(--kna-font-body);
	font-size: var(--kna-font-size-xs);
	font-weight: var(--kna-weight-black);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--kna-transition-fast), color var(--kna-transition-fast),
		border-color var(--kna-transition-fast), box-shadow var(--kna-transition-fast);
}

.kna-btn--accent {
	background-color: var(--kna-color-accent);
	color: var(--kna-color-dark);
	box-shadow: var(--kna-shadow-md);
}

.kna-btn--accent:hover,
.kna-btn--accent:focus {
	background-color: var(--kna-color-accent-hover);
	color: var(--kna-color-dark);
	box-shadow: var(--kna-shadow-accent);
}

.kna-btn--ghost {
	background-color: rgba(0, 0, 0, 0.5);
	color: var(--kna-color-text);
	border-color: var(--kna-color-border-dark-strong);
}

.kna-btn--ghost:hover,
.kna-btn--ghost:focus {
	background-color: rgba(0, 0, 0, 0.8);
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--kna-color-text);
}

/* -----------------------------------------------------------------
 * 6. Primitives : badges produit
 * ----------------------------------------------------------------- */

.kna-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--kna-radius-pill);
	font-size: var(--kna-font-size-2xs);
	font-weight: var(--kna-weight-black);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.6;
	color: #fff;
	background-color: var(--kna-color-badge-new);
}

.kna-badge--new {
	background-color: var(--kna-color-badge-new);
}

.kna-badge--best {
	background-color: var(--kna-color-badge-best);
}

.kna-badge--promo {
	background-color: var(--kna-color-badge-promo);
}

/* -----------------------------------------------------------------
 * 7. Surfaces claires : pages éditoriales et résultats de recherche
 *
 * Ces règles ne dépendent pas de WooCommerce : elles restent disponibles même
 * lorsque la feuille WooCommerce n'est pas chargée.
 * ----------------------------------------------------------------- */

.kna-main--page {
	padding-block: var(--kna-space-xl) var(--kna-space-2xl);
	background-color: var(--kna-color-surface-light);
	color: var(--kna-color-text-strong);
}

.kna-main--page a {
	color: var(--kna-color-link);
}

.kna-main--page a:hover,
.kna-main--page a:focus {
	color: var(--kna-color-link-hover);
}

.kna-main--page :focus-visible {
	outline: 2px solid var(--kna-color-brand);
	outline-offset: 2px;
}

.kna-page-content__title {
	margin: 0 0 var(--kna-space-lg);
	font-family: var(--kna-font-display);
	font-size: var(--kna-font-size-2xl);
	font-weight: var(--kna-weight-black);
	line-height: 1.05;
	text-transform: uppercase;
	color: #0b0f0d;
}

.kna-page-content__body {
	max-width: 90ch;
	font-size: var(--kna-font-size-md);
	line-height: 1.6;
}

/* Pagination commune à WordPress et à WooCommerce. */
.navigation.pagination {
	margin-block: var(--kna-space-lg);
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	padding: 0 var(--kna-space-xs);
	border: 1px solid var(--kna-color-card-border);
	border-radius: var(--kna-radius-md);
	background-color: #ffffff;
	color: var(--kna-color-text-strong);
	font-size: var(--kna-font-size-sm);
	font-weight: var(--kna-weight-semibold);
}

.page-numbers.current,
.page-numbers:hover,
.page-numbers:focus {
	border-color: var(--kna-color-brand);
	background-color: var(--kna-color-brand);
	color: #ffffff;
}

/* -----------------------------------------------------------------
 * 8. Gabarit de repli (index.php, search.php)
 * ----------------------------------------------------------------- */

.kna-entry {
	padding-block: var(--kna-space-lg);
	border-bottom: 1px solid var(--kna-color-border-dark);
}

.kna-entry__title {
	margin-bottom: var(--kna-space-xs);
}

.kna-entry__media img {
	border-radius: var(--kna-radius-lg);
}

.kna-empty {
	color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   /* ==========================================================================
   NIVEAU 1 CSS v2 — FORMULAIRE D'INSCRIPTION PROFESSIONNELLE (/inscription-pro/)
   --------------------------------------------------------------------------
   PRÉSENTATION SEULE, page 37 uniquement. Aucun champ ajouté, supprimé, renommé,
   réordonné, masqué, pré-rempli ou rendu obligatoire ; aucun attribut modifié ;
   aucun message masqué.
   SÉLECTEURS ÉTABLIS SUR LE HTML RÉEL du formulaire WholesaleX (relevé public) :
     form.wholesalex-registration-form
       .wsx-reg-form-heading
       .wholesalex-registration-form-subtitle-text
       .wholesalex-fields-wrapper.wsx-reg-fields.wsx-fields-container
         .wsx-reg-form-row                          (une ligne par champ)
           .wholesalex-registration-form-column.left.wsx-field.wsx-field-<nom>
             .wsx-form-field > .wsx-field-heading
               label.wsx-label.wsx-form-label (+ span[aria-label="required"])
               input.wsx-input | select.wsx-select
               span.wsx-form-field-warning-message.<nom>
         .wsx-form-btn-wrapper > button.wsx-register-btn
   En v1, la grille visait `.wholesalex-field` : cette classe n'existe PAS dans ce
   formulaire (elle n'apparaît que dans la fenêtre de devis). D'où l'absence de
   deux colonnes. La v2 cible le conteneur RÉEL `.wsx-fields-container` et les
   lignes RÉELLES `.wsx-reg-form-row`.
   ========================================================================== */

/* Colonne de contenu de la page : élargie et centrée (desktop et tablette). */
body.page-id-37 .kna-page-content__body {
	max-width: 1100px;
	margin-inline: auto;
}

/* Conteneur RÉEL des champs : grille responsive à 2 colonnes. */
body.page-id-37 .wholesalex-registration-form .wsx-fields-container,
body.page-id-37 .wholesalex-registration-form .wholesalex-fields-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kna-space-md) var(--kna-space-lg);
	align-items: start;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Chaque ligne du plugin = une cellule : plus de flottement ni de largeur imposée. */
body.page-id-37 .wholesalex-registration-form .wsx-reg-form-row,
body.page-id-37 .wholesalex-registration-form .wholesalex-registration-form-column {
	float: none;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Titre, sous-titre, bouton d'envoi et messages : pleine largeur. */
body.page-id-37 .wholesalex-registration-form .wsx-reg-form-heading,
body.page-id-37 .wholesalex-registration-form .wholesalex-registration-form-subtitle-text,
body.page-id-37 .wholesalex-registration-form .wsx-form-btn-wrapper,
body.page-id-37 .wholesalex-registration-form .wsx-reg-form-row:has(.wsx-form-btn-wrapper),
body.page-id-37 .wholesalex-registration-form .wsx-reg-form-row:has(.wsx-register-btn),
body.page-id-37 .wholesalex-registration-form .wsx-reg-form-row:has(textarea),
body.page-id-37 .wholesalex-registration-form .wsx-reg-form-row:has(input[type="file"]),
body.page-id-37 .wholesalex-registration-form .wsx-reg-form-row:has(input[type="checkbox"]),
body.page-id-37 .wholesalex-registration-form .wsx-reg-form-row:has(input[type="radio"]),
body.page-id-37 .wholesalex-registration-form .wsx-reg-form-row:has(.wsx-form-checkbox) {
	grid-column: 1 / -1;
}

/* Champs réels : .wsx-input (texte, e-mail, mot de passe, nombre) et .wsx-select. */
body.page-id-37 .wholesalex-registration-form .wsx-input,
body.page-id-37 .wholesalex-registration-form .wsx-select,
body.page-id-37 .wholesalex-registration-form textarea {
	width: 100%;
	max-width: 100%;
	min-height: 46px;
	padding: 0 var(--kna-space-sm);
	border: 1px solid var(--kna-color-card-border);
	border-radius: var(--kna-radius-md);
	background-color: #ffffff;
	color: var(--kna-color-text-strong);
	font-family: var(--kna-font-body);
	font-size: var(--kna-font-size-md);
	box-sizing: border-box;
}

body.page-id-37 .wholesalex-registration-form textarea {
	min-height: 120px;
	padding: var(--kna-space-sm);
	line-height: var(--kna-leading-normal);
}

/* Libellés réels : .wsx-label.wsx-form-label au-dessus du champ. */
body.page-id-37 .wholesalex-registration-form .wsx-label,
body.page-id-37 .wholesalex-registration-form .wsx-form-label,
body.page-id-37 .wholesalex-registration-form .wsx-field-heading label {
	display: block;
	margin-bottom: var(--kna-space-3xs);
	font-size: var(--kna-font-size-sm);
	font-weight: var(--kna-weight-semibold);
	line-height: var(--kna-leading-snug);
	color: var(--kna-color-text-strong);
}

/* Marqueur « obligatoire » fourni par l'extension : visible, couleur d'erreur. */
body.page-id-37 .wholesalex-registration-form .wsx-field-heading span[aria-label="required"],
body.page-id-37 .wholesalex-registration-form .required {
	color: var(--kna-color-error);
	text-decoration: none;
}

/* Messages de validation de l'extension : VISIBLES, jamais masqués. */
body.page-id-37 .wholesalex-registration-form .wsx-form-field-warning-message,
body.page-id-37 .wholesalex-registration-form .wsx-error,
body.page-id-37 .wholesalex-registration-form .wsx-notice {
	display: block;
	margin-top: var(--kna-space-3xs);
	color: var(--kna-color-error);
	font-size: var(--kna-font-size-xs);
	line-height: var(--kna-leading-snug);
}

/* Focus visible sur tous les champs et boutons. */
body.page-id-37 .wholesalex-registration-form .wsx-input:focus-visible,
body.page-id-37 .wholesalex-registration-form .wsx-select:focus-visible,
body.page-id-37 .wholesalex-registration-form textarea:focus-visible,
body.page-id-37 .wholesalex-registration-form button:focus-visible {
	outline: 2px solid var(--kna-color-link);
	outline-offset: 1px;
	border-color: var(--kna-color-link);
}

/* Cases à cocher de l'extension (ligne et texte sur la même ligne). */
body.page-id-37 .wholesalex-registration-form .wsx-form-checkbox,
body.page-id-37 .wholesalex-registration-form .wholesalex-field-wrap {
	display: flex;
	align-items: center;
	gap: var(--kna-space-xs);
}

body.page-id-37 .wholesalex-registration-form .wsx-checkbox {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--kna-color-brand);
}

/* Bouton d'envoi RÉEL : .wsx-form-btn-wrapper > button.wsx-register-btn. */
body.page-id-37 .wholesalex-registration-form .wsx-form-btn-wrapper {
	display: flex;
	width: 100%;
	margin-top: var(--kna-space-xs);
}

body.page-id-37 .wholesalex-registration-form .wsx-register-btn,
body.page-id-37 .wholesalex-registration-form .wsx-login-btn,
body.page-id-37 .wholesalex-registration-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: 0 var(--kna-space-lg);
	border: 0;
	border-radius: var(--kna-radius-md);
	background-color: var(--kna-color-brand);
	color: #ffffff;
	font-family: var(--kna-font-body);
	font-size: var(--kna-font-size-base);
	font-weight: var(--kna-weight-bold);
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

body.page-id-37 .wholesalex-registration-form .wsx-register-btn:hover,
body.page-id-37 .wholesalex-registration-form .wsx-register-btn:focus,
body.page-id-37 .wholesalex-registration-form .wsx-login-btn:hover,
body.page-id-37 .wholesalex-registration-form .wsx-login-btn:focus,
body.page-id-37 .wholesalex-registration-form button[type="submit"]:hover,
body.page-id-37 .wholesalex-registration-form button[type="submit"]:focus {
	background-color: var(--kna-color-brand-hover);
	color: #ffffff;
}

/* Formulaire de connexion B2B présent sur la même page (mêmes conventions). */
body.page-id-37 .wholesalex-login-form .wsx-input,
body.page-id-37 .wholesalex-login-form .wsx-select {
	width: 100%;
	min-height: 46px;
	padding: 0 var(--kna-space-sm);
	border: 1px solid var(--kna-color-card-border);
	border-radius: var(--kna-radius-md);
	background-color: #ffffff;
	color: var(--kna-color-text-strong);
	font-size: var(--kna-font-size-md);
	box-sizing: border-box;
}

body.page-id-37 .wholesalex-login-form .wsx-form-btn-wrapper {
	display: flex;
	width: 100%;
}

body.page-id-37 .wholesalex-login-form .wsx-login-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	padding: 0 var(--kna-space-lg);
	border: 0;
	border-radius: var(--kna-radius-md);
	background-color: var(--kna-color-brand);
	color: #ffffff;
	font-weight: var(--kna-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
}

/* Mobile : UNE seule colonne, champs et bouton pleine largeur, aucun débordement. */
@media (max-width: 767px) {
	body.page-id-37 .wholesalex-registration-form .wsx-fields-container,
	body.page-id-37 .wholesalex-registration-form .wholesalex-fields-wrapper {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--kna-space-md);
	}

	body.page-id-37 .kna-page-content__body {
		max-width: 100%;
	}
}

/* ==========================================================================
   NIVEAU 1 CSS v2.1 — AJUSTEMENTS MESURÉS (/inscription-pro/)
   --------------------------------------------------------------------------
   Mesures sur la page réelle :
     .kna-page-content__body ..................... 1100 px (v2 ✔) ;
     .wholesalex-form-wrapper.wsx-form-wrapper_frontend ... 1100 px, flex ;
     form.wholesalex-registration-form ........... 534 px, max-width 650 px
         (borne posée par l'extension) → grille à 2 colonnes mais formulaire
         étroit, d'où l'impression de formulaire « seulement centré » ;
     .wsx-form-btn-wrapper ....................... max-width 395 px ;
     bouton .wsx-register-btn .................... fond gris, imposé par
         `.wholesalex-form-wrapper button.wsx-register-btn { background-color:
         var(--wsx-form-button-bg) !important }`.
   ========================================================================== */

/* Conteneur et formulaire : pleine largeur de la colonne de contenu.
   `!important` est nécessaire car l'extension borne le conteneur avec
   `max-width: var(--wsx-form-container-width) !important`. */
body.page-id-37 .wholesalex-form-wrapper.wsx-form-wrapper_frontend {
	width: 100% !important;
	max-width: 100% !important;
}

/* Le formulaire est un ELEMENT FLEX de son conteneur : sans `flex` explicite
   il se réduit à la largeur de son contenu (534 px mesurés). */
body.page-id-37 .wholesalex-form-wrapper.wsx-form-wrapper_frontend > form.wholesalex-registration-form,
body.page-id-37 .wholesalex-form-wrapper.wsx-form-wrapper_frontend > form.wholesalex-login-form {
	flex: 1 1 100%;
	width: 100% !important;
	min-width: 0;
}

body.page-id-37 .wholesalex-registration-form,
body.page-id-37 .wholesalex-login-form {
	width: 100%;
	max-width: 100% !important;
}

/* Bouton d'envoi : pleine largeur et vert de marque (l'extension impose ses
   propres couleurs avec `!important` : on rétablit celles de la DA). */
body.page-id-37 .wholesalex-registration-form .wsx-form-btn-wrapper,
body.page-id-37 .wholesalex-login-form .wsx-form-btn-wrapper {
	display: flex;
	width: 100%;
	max-width: 100% !important;
}

body.page-id-37 .wholesalex-registration-form .wsx-register-btn,
body.page-id-37 .wholesalex-login-form .wsx-login-btn {
	width: 100% !important;
	min-height: 48px;
	border: 0 !important;
	border-radius: var(--kna-radius-md);
	background-color: var(--kna-color-brand) !important;
	color: #ffffff !important;
	font-family: var(--kna-font-body);
	font-size: var(--kna-font-size-base);
	font-weight: var(--kna-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

body.page-id-37 .wholesalex-registration-form .wsx-register-btn:hover,
body.page-id-37 .wholesalex-registration-form .wsx-register-btn:focus,
body.page-id-37 .wholesalex-login-form .wsx-login-btn:hover,
body.page-id-37 .wholesalex-login-form .wsx-login-btn:focus {
	background-color: var(--kna-color-brand-hover) !important;
	color: #ffffff !important;
	border-color: var(--kna-color-brand-hover) !important;
}

/* Champs de l'extension : même DA que le reste du site (l'extension impose ses
   propres couleurs sur certains champs avec `!important`). */
body.page-id-37 .wholesalex-registration-form .wsx-input,
body.page-id-37 .wholesalex-registration-form .wsx-select {
	border: 1px solid var(--kna-color-card-border) !important;
	border-radius: var(--kna-radius-md);
	background-color: #ffffff !important;
	color: var(--kna-color-text-strong) !important;
}

body.page-id-37 .wholesalex-registration-form .wsx-input:focus,
body.page-id-37 .wholesalex-registration-form .wsx-select:focus {
	border-color: var(--kna-color-link) !important;
	outline: 2px solid var(--kna-color-link);
	outline-offset: 1px;
}

/* L'extension borne CHAQUE ENFANT DIRECT du formulaire :
   `.wholesalex-form-wrapper .wholesalex-registration-form > * { max-width: var(--wsx-input-width) }`
   (≈ 500 px mesurés) : le conteneur des champs et le bouton étaient donc
   enfermés dans une colonne étroite. On rétablit la pleine largeur. */
body.page-id-37 .wholesalex-registration-form > .wsx-fields-container,
body.page-id-37 .wholesalex-registration-form > .wholesalex-fields-wrapper,
body.page-id-37 .wholesalex-registration-form > .wsx-form-btn-wrapper {
	width: 100% !important;
	max-width: 100% !important;
}

/* Les largeurs de l'extension sont pilotées par ses VARIABLES
   (`--wsx-form-container-width`, `--wsx-form-reg-width`, `--wsx-input-width`),
   consommées par ses propres règles `!important`. Les redéfinir ici est la façon
   la plus propre d'obtenir un formulaire pleine largeur, sans toucher à ses règles. */
body.page-id-37 .wholesalex-form-wrapper.wsx-form-wrapper_frontend {
	/* `!important` est indispensable : l'extension réécrit ces variables avec des
	   valeurs en pixels dans un bloc <style> placé APRÈS nos feuilles (relevé :
	   --wsx-input-width: 395px, --wsx-form-reg-width: 650px,
	   --wsx-form-container-width: 1440px). */
	--wsx-form-container-width: 100% !important;
	--wsx-form-reg-width: 100% !important;
	--wsx-input-width: 100% !important;
}

/* ==========================================================================
   NIVEAU 1 CSS v3 — RAFFINEMENT VISUEL DU FORMULAIRE D'INSCRIPTION PRO
   --------------------------------------------------------------------------
   Portée STRICTE : `body.page-id-37 .wholesalex-registration-form` uniquement.
   Non touchés : la grille à 2 colonnes (bloc v2), le formulaire de connexion
   B2B de la même page, les autres pages et les autres formulaires WholesaleX.
   Aucun champ, label, ordre ni attribut modifié ; aucun message masqué.
   Couleur de fond : #eef8f3 — MÊME valeur que l'encart « Tarif pro » des pages
   produit (source thème : assets/css/single-product.css,
   `body.single-product #kna-main .kna-tarif { background: #eef8f3;
   border: 1px solid #d2ecd9; border-radius: 16px; }`). Le thème n'expose pas
   cette couleur en variable : la valeur est donc reprise à l'identique.
   ========================================================================== */

/* A. CARTE DU FORMULAIRE : fond vert pâle, bordure, rayon et ombre discrets,
   espacement ramené à des valeurs régulières (l'extension applique 54 px). */
body.page-id-37 .wholesalex-registration-form {
	padding: var(--kna-space-xl) var(--kna-space-lg);
	border: 1px solid #d2ecd9;
	border-radius: var(--kna-radius-xl);
	background-color: #eef8f3;
	box-shadow: 0 1px 2px rgba(7, 9, 8, 0.04), 0 10px 30px rgba(7, 9, 8, 0.06);
}

/* Titre et sous-titre du formulaire : texte sombre sur fond vert pâle. */
body.page-id-37 .wholesalex-registration-form .wsx-reg-form-heading-text,
body.page-id-37 .wholesalex-registration-form .wholesalex-registration-form-subtitle-text,
body.page-id-37 .wholesalex-registration-form h1,
body.page-id-37 .wholesalex-registration-form h2,
body.page-id-37 .wholesalex-registration-form h3 {
	color: #0f172a;
}

/* B. CHAMPS : fond blanc, bordure fine et sobre, rayon doux, hauteur confortable,
   texte sombre, placeholder discret, hover discret, focus vert de marque.
   (Aucun dégradé, aucune ombre, bordure de 1 px : pas d'effet « cheap ».) */
body.page-id-37 .wholesalex-registration-form .wsx-input,
body.page-id-37 .wholesalex-registration-form .wsx-select {
	min-height: 48px;
	padding: 0 var(--kna-space-sm);
	border: 1px solid #d2ecd9;
	border-radius: var(--kna-radius-lg);
	background-color: #ffffff;
	color: var(--kna-color-text-strong);
	box-shadow: none;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

body.page-id-37 .wholesalex-registration-form .wsx-input::placeholder,
body.page-id-37 .wholesalex-registration-form .wsx-select::placeholder {
	color: var(--kna-color-text-subtle);
	opacity: 1;
}

body.page-id-37 .wholesalex-registration-form .wsx-input:hover,
body.page-id-37 .wholesalex-registration-form .wsx-select:hover {
	border-color: #b9dcc4;
}

body.page-id-37 .wholesalex-registration-form .wsx-input:focus,
body.page-id-37 .wholesalex-registration-form .wsx-select:focus,
body.page-id-37 .wholesalex-registration-form .wsx-input:focus-visible,
body.page-id-37 .wholesalex-registration-form .wsx-select:focus-visible {
	border-color: var(--kna-color-brand);
	outline: 2px solid var(--kna-color-brand);
	outline-offset: 1px;
	background-color: #ffffff;
}

/* C. LABELS : sombres et lisibles sur fond vert pâle, graisse moyenne,
   espacement régulier, astérisque obligatoire visible mais discret. */
body.page-id-37 .wholesalex-registration-form .wsx-label,
body.page-id-37 .wholesalex-registration-form .wsx-form-label,
body.page-id-37 .wholesalex-registration-form .wsx-field-heading label {
	display: block;
	margin-bottom: 6px;
	color: var(--kna-color-text-strong);
	font-size: var(--kna-font-size-sm);
	font-weight: var(--kna-weight-medium);
	line-height: var(--kna-leading-snug);
}

body.page-id-37 .wholesalex-registration-form .wsx-field-heading span[aria-label="required"],
body.page-id-37 .wholesalex-registration-form .wsx-field-heading .required {
	margin-left: 2px;
	color: var(--kna-color-error);
	font-size: 0.95em;
	font-weight: var(--kna-weight-medium);
	text-decoration: none;
}

/* D. BOUTON D'ENVOI : vert foncé de marque, texte blanc, rayon cohérent,
   pleine largeur, hover et focus propres (plus de gris WholesaleX). */
body.page-id-37 .wholesalex-registration-form .wsx-register-btn {
	width: 100% !important;
	min-height: 48px;
	border: 0 !important;
	border-radius: var(--kna-radius-lg);
	background-color: var(--kna-color-brand) !important;
	color: #ffffff !important;
	font-family: var(--kna-font-body);
	font-size: var(--kna-font-size-base);
	font-weight: var(--kna-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	box-shadow: none;
	transition: background-color 0.18s ease;
}

body.page-id-37 .wholesalex-registration-form .wsx-register-btn:hover,
body.page-id-37 .wholesalex-registration-form .wsx-register-btn:focus {
	background-color: var(--kna-color-brand-hover) !important;
	color: #ffffff !important;
	outline: 2px solid var(--kna-color-brand);
	outline-offset: 2px;
}

/* E. MESSAGES D'ERREUR ET AVERTISSEMENTS : visibles et contrastés sur le fond
   vert pâle (le rouge clair de l'extension #FF6C6C y serait trop faible).
   Aucun message n'est masqué : aucune règle `display:none` ici. */
body.page-id-37 .wholesalex-registration-form .wsx-form-field-warning-message,
body.page-id-37 .wholesalex-registration-form .wsx-error,
body.page-id-37 .wholesalex-registration-form .wsx-notice {
	display: block;
	margin-top: 4px;
	padding: 4px var(--kna-space-xs);
	border-radius: var(--kna-radius-sm);
	background-color: #fdf2f2;
	color: #a5281b;
	font-size: var(--kna-font-size-xs);
	font-weight: var(--kna-weight-medium);
	line-height: var(--kna-leading-snug);
}

/* Le champ en erreur garde une bordure d'erreur visible sur le fond vert pâle. */
body.page-id-37 .wholesalex-registration-form .wsx-field.wsx-field-warning .wsx-input,
body.page-id-37 .wholesalex-registration-form .wsx-field.wsx-field-warning .wsx-select {
	border-color: var(--kna-color-error);
}

/* ==========================================================================
   NIVEAU 1 CSS v3.1 — SPÉCIFICITÉ (l'extension impose ses couleurs de champ,
   de label et de focus avec `!important`, sur des sélecteurs à 4 classes :
   `.wsx_variation_3 .wsx-reg-fields .wsx-form-field>input { color: …!important }`).
   On cible donc le même chemin, avec un cran de spécificité de plus.
   Portée inchangée : `body.page-id-37 .wholesalex-registration-form` seulement.
   ========================================================================== */

body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-form-field > .wsx-input,
body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-form-field > .wsx-select,
body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-form-field > input.wsx-input,
body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-form-field > select.wsx-select {
	min-height: 48px !important;
	padding: 0 var(--kna-space-sm) !important;
	border: 1px solid #d2ecd9 !important;
	border-radius: var(--kna-radius-lg) !important;
	background-color: #ffffff !important;
	color: var(--kna-color-text-strong) !important;
	box-shadow: none !important;
}

body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-form-field > .wsx-input::placeholder,
body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-form-field > .wsx-select::placeholder {
	color: var(--kna-color-text-subtle) !important;
	opacity: 1;
}

body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-form-field > .wsx-input:hover,
body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-form-field > .wsx-select:hover {
	border-color: #b9dcc4 !important;
}

body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-form-field > .wsx-input:focus,
body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-form-field > .wsx-select:focus {
	border-color: var(--kna-color-brand) !important;
	outline: 2px solid var(--kna-color-brand) !important;
	outline-offset: 1px;
}

body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-field-heading > .wsx-label,
body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-field-heading > label.wsx-form-label {
	margin-bottom: 6px !important;
	color: var(--kna-color-text-strong) !important;
	font-size: var(--kna-font-size-sm) !important;
	font-weight: var(--kna-weight-medium) !important;
	text-transform: none !important;
}

body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-field-heading span[aria-label="required"] {
	color: var(--kna-color-error) !important;
	font-weight: var(--kna-weight-medium) !important;
}

/* ==========================================================================
   NIVEAU 1 CSS v4 — RAFFINEMENT PAR LES VARIABLES DE L'EXTENSION
   --------------------------------------------------------------------------
   Les règles de l'extension (champs, labels, focus, bouton) utilisent
   `!important` et SES variables, définies sur :root par le bloc
   `<style id="whx_form_css">`. Les redéfinir ici s'applique donc réellement,
   sans toucher aux réglages ni aux fichiers de l'extension.
   Portée STRICTE : page d'inscription (page 37). Les variables `--wsx-login-*`
   du formulaire de connexion B2B ne sont PAS modifiées.
   Couleur de fond : #eef8f3 / bordure #d2ecd9 / rayon 16 px = valeurs EXACTES de
   l'encart « Tarif pro » des pages produit (assets/css/single-product.css).
   ========================================================================== */

body.page-id-37 .wholesalex-form-wrapper.wsx-form-wrapper_frontend {
	/* Fond, bordure, rayon, espacement du formulaire */
	--wsx-form-reg-bg: #eef8f3 !important;
	--wsx-form-reg-border-color: #d2ecd9 !important;
	--wsx-form-reg-border-width: 1px !important;
	--wsx-form-reg-border-radius: 16px !important;
	--wsx-form-reg-padding: 32px !important;
	--wsx-form-container-bg: #eef8f3 !important;
	--wsx-form-container-border-color: #d2ecd9 !important;

	/* Champs : fond blanc, texte sombre, bordure fine, rayon doux */
	--wsx-input-bg: #ffffff !important;
	--wsx-input-color: #111111 !important;
	--wsx-input-border-color: #d2ecd9 !important;
	--wsx-input-border-width: 1px !important;
	--wsx-input-border-radius: 8px !important;
	--wsx-input-placeholder-color: #9ca3af !important;
	--wsx-input-focus-bg: #ffffff !important;
	--wsx-input-focus-color: #111111 !important;
	--wsx-input-focus-border-color: #0e5b32 !important;
	--wsx-input-padding: 12px !important;

	/* Labels : sombres sur fond vert pâle, graisse moyenne */
	--wsx-form-label-color: #111111 !important;
	--wsx-form-label-color-active: #111111 !important;
	--wsx-form-label-weight: 500 !important;
	--wsx-form-label-font-size: 13px !important;

	/* Messages d'erreur : rouge foncé, lisible sur le vert pâle */
	--wsx-input-warning-color: #a5281b !important;
	--wsx-input-warning-bg: #fdf2f2 !important;
	--wsx-input-warning-border-color: #c0392b !important;
	--wsx-form-label-color-warning: #111111 !important;

	/* Bouton d'envoi : vert foncé de marque, texte blanc, rayon cohérent */
	--wsx-form-button-bg: #0e5b32 !important;
	--wsx-form-button-color: #ffffff !important;
	--wsx-form-button-hover-bg: #094224 !important;
	--wsx-form-button-hover-color: #ffffff !important;
	--wsx-form-button-border-width: 0px !important;
	--wsx-form-button-border-radius: 8px !important;
	--wsx-form-button-width: 100% !important;
	--wsx-form-button-padding: 14px !important;
	--wsx-form-button-case-transform: uppercase !important;
	--wsx-form-button-weight: 700 !important;
}

/* NIVEAU 1 CSS v4.1 — focus : bordure ET contour en vert de marque.
   (la bordure de l'etat normal est en `!important` ; l'etat focus doit donc
   l'etre aussi pour la remplacer pendant le focus.) */
body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-form-field > .wsx-input:focus,
body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-form-field > .wsx-select:focus,
body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-form-field > .wsx-input:focus-visible,
body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-form-field > .wsx-select:focus-visible {
	border-color: var(--kna-color-brand) !important;
	outline: 2px solid var(--kna-color-brand) !important;
	outline-offset: 1px;
}

/* NIVEAU 1 CSS v4.2 — FOCUS : selecteur DESCENDANT.
   Releve réel : l'input est un enfant de .wsx-field-heading (et non de
   .wsx-form-field), donc les regles de l'extension en `>input` ne s'appliquent
   pas au focus ; on cible le champ par descendant, avec `!important`. */
body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-input:focus,
body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form .wsx-select:focus {
	border-color: var(--kna-color-brand) !important;
	outline: 2px solid var(--kna-color-brand) !important;
	outline-offset: 1px;
}

/* ==========================================================================
   LOT 8 — INSCRIPTION PRO (page 37) — NIVEAU 1 : PRESENTATION SEULE
   Aucun champ, label, ordre, attribut ni reglage WholesaleX modifie ; aucun
   message masque (seuls les conteneurs de message VIDES ne reservent plus de
   place). Meme methode que les blocs precedents : variables de l'extension.
   ========================================================================== */

/* 1) Conteneurs d'avertissement VIDES : ils recevaient padding + fond rose et
   dessinaient une bande pale sous chaque champ. Des qu'un message est ecrit
   par l'extension, l'element n'est plus vide et s'affiche normalement. */
body.page-id-37 .wholesalex-form-wrapper .wsx-form-field-warning-message:empty {
	display: none;
}

/* 2) Formulaire de connexion B2B (colonne de gauche) : memes champs blancs,
   labels sombres et bouton de marque que l'inscription. */
body.page-id-37 .wholesalex-form-wrapper.wsx-form-wrapper_frontend {
	--wsx-login-input-color: #111111 !important;
	--wsx-login-input-bg: #ffffff !important;
	--wsx-login-input-border-color: #d2ecd9 !important;
	--wsx-login-input-placeholder-color: #9ca3af !important;
	--wsx-login-form-label-color: #111111 !important;
	--wsx-login-input-focus-color: #111111 !important;
	--wsx-login-input-focus-bg: #ffffff !important;
	--wsx-login-input-focus-border-color: #0e5b32 !important;
	--wsx-login-form-label-color-active: #111111 !important;
	--wsx-login-input-warning-color: #a5281b !important;
	--wsx-login-input-warning-bg: #fdf2f2 !important;
	--wsx-login-input-warning-border-color: #c0392b !important;
	--wsx-login-form-label-color-warning: #111111 !important;
	--wsx-login-form-button-color: #ffffff !important;
	--wsx-login-form-button-bg: #0e5b32 !important;
	--wsx-login-form-button-hover-color: #ffffff !important;
	--wsx-login-form-button-hover-bg: #094224 !important;
	--wsx-login-title-font-weight: 800 !important;
	--wsx-login-title-color: #111111 !important;
	--wsx-login-description-color: #4b5563 !important;
}

/* Carte blanche « Deja client » : distincte de la carte vert pale
   « Inscription » ; la hierarchie des deux parcours devient lisible. */
body.page-id-37 .wholesalex-form-wrapper .wholesalex-login-form {
	padding: 32px !important;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	background-color: #ffffff;
	box-shadow: 0 1px 2px rgba(7, 9, 8, 0.04);
	box-sizing: border-box;
}

body.page-id-37 .wholesalex-form-wrapper .wholesalex-login-form .wsx-input {
	min-height: 48px !important;
	padding: 0 12px !important;
	border: 1px solid #d2ecd9 !important;
	border-radius: 8px !important;
	background-color: #ffffff !important;
	color: #111111 !important;
	box-shadow: none !important;
}

body.page-id-37 .wholesalex-form-wrapper .wholesalex-login-form .wsx-input:hover {
	border-color: #b9dcc4 !important;
}

body.page-id-37 .wholesalex-form-wrapper .wholesalex-login-form .wsx-input:focus,
body.page-id-37 .wholesalex-form-wrapper .wholesalex-login-form .wsx-input:focus-visible {
	border-color: var(--kna-color-brand) !important;
	outline: 2px solid var(--kna-color-brand) !important;
	outline-offset: 1px;
}

body.page-id-37 .wholesalex-form-wrapper .wholesalex-login-form .wsx-form-label {
	margin-bottom: 6px !important;
	color: #111111 !important;
	font-size: var(--kna-font-size-sm) !important;
	font-weight: var(--kna-weight-medium) !important;
}

body.page-id-37 .wholesalex-form-wrapper .wholesalex-login-form .wsx-form-checkbox .wholesalex-field-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

body.page-id-37 .wholesalex-form-wrapper .wholesalex-login-form .wsx-checkbox {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--kna-color-brand);
}

body.page-id-37 .wholesalex-form-wrapper .wholesalex-login-form .wsx-checkbox:focus-visible {
	outline: 2px solid var(--kna-color-brand) !important;
	outline-offset: 2px;
}

body.page-id-37 .wholesalex-form-wrapper .wholesalex-login-form a {
	color: #374151;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.page-id-37 .wholesalex-form-wrapper .wholesalex-login-form a:hover,
body.page-id-37 .wholesalex-form-wrapper .wholesalex-login-form a:focus {
	color: var(--kna-color-brand);
}

body.page-id-37 .wholesalex-form-wrapper .wholesalex-login-form .wsx-form-field-warning-message:not(:empty) {
	display: block;
	margin-top: 4px;
	padding: 4px 8px;
	border-radius: 6px;
	background-color: #fdf2f2;
	color: #a5281b;
	font-size: var(--kna-font-size-xs);
	font-weight: var(--kna-weight-medium);
}

/* 3) Titres : hierarchie claire (titre fort, sous-titre plus discret). */
body.page-id-37 .wholesalex-form-wrapper .wsx-login-form-title-text,
body.page-id-37 .wholesalex-form-wrapper .wsx-reg-form-heading-text {
	font-family: var(--kna-font-body) !important;
	font-size: 24px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em;
	color: #111111 !important;
}

body.page-id-37 .wholesalex-form-wrapper .wholesalex-login-form-subtitle-text,
body.page-id-37 .wholesalex-form-wrapper .wholesalex-registration-form-subtitle-text {
	margin-top: 6px;
	font-size: var(--kna-font-size-sm) !important;
	line-height: 1.5;
	color: #4b5563 !important;
}

@media (max-width: 480px) {
	body.page-id-37 .wholesalex-form-wrapper .wholesalex-login-form {
		padding: 20px !important;
	}

	body.page-id-37 .wholesalex-form-wrapper .wsx-login-form-title-text,
	body.page-id-37 .wholesalex-form-wrapper .wsx-reg-form-heading-text {
		font-size: 21px !important;
	}
}
/* ==========================================================================
   LOT 9 — ACCUEIL, CATEGORIES, PAGES CMS, ETATS SYSTEME (NIVEAU 1)
   Presentation seule : aucun contenu, prix, regle WholesaleX ni gabarit touche.
   Bloc dans base.css car la carte produit sert aussi sur l'accueil, qui ne
   charge pas woocommerce.css.
   ========================================================================== */

/* --- 1) Carte produit : visuel au format 4/3 (au lieu de la hauteur globale
   de 95 px du jeton --kna-product-media-height, qui reduisait les images a
   63 px). Meme format que les cartes du panier vide (lot 2). Le jeton n'est
   pas modifie : seule la carte produit cesse de l'utiliser. */
body .kna-product-card .kna-product-card__media {
	height: auto;
	aspect-ratio: 4 / 3;
	padding: 0;
}

body .kna-product-card .kna-product-card__media-link {
	width: 100%;
	height: 100%;
}

body .kna-product-card .kna-product-card__image,
body ul.products li.product .kna-product-card .kna-product-card__image {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: cover;
	margin: 0;
}

/* Titre : exactement deux lignes (la troisieme ligne d'un titre long
   depassait sous la ligne « CBD »). Dans les grilles WooCommerce, la regle
   .woocommerce ul.products li.product h3 (padding 0.5em) est neutralisee. */
body .kna-product-card .kna-product-card__title,
body ul.products li.product .kna-product-card .kna-product-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	min-height: calc(1.2em * 2);
	max-height: calc(1.2em * 2);
	padding-block: 0;
	margin-block: 7px 13px;
	line-height: 1.2;
	overflow: hidden;
}

/* « Voir les prix » (lien WholesaleX) : vert citron sur fond blanc sur
   l'accueil, contraste insuffisant. Vert de marque partout. */
body .kna-product-card .kna-product-card__price a {
	color: var(--kna-color-brand);
	font-weight: var(--kna-weight-bold);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body .kna-product-card .kna-product-card__price a:hover,
body .kna-product-card .kna-product-card__price a:focus {
	color: var(--kna-color-brand-hover);
}

body .kna-product-card a:focus-visible,
body .kna-product-card button:focus-visible {
	outline: 2px solid var(--kna-color-brand);
	outline-offset: 2px;
}

/* --- 2) Page 404 (gabarit de repli index.php) : fond clair et encart
   vert pale, comme le reste du site (le texte reste celui du gabarit). */
body.error404 .kna-main {
	padding-block: var(--kna-space-2xl);
	background-color: var(--kna-color-surface-light);
	color: var(--kna-color-text-strong);
}

body.error404 .kna-empty {
	max-width: 640px;
	margin: 0 auto;
	padding: 32px;
	border: 1px solid #d2ecd9;
	border-radius: 16px;
	background-color: #eef8f3;
	color: var(--kna-color-text-strong);
	font-size: var(--kna-font-size-md);
	font-weight: var(--kna-weight-semibold);
	text-align: center;
}

/* Colonne centrée des pages éditoriales (CGV, mentions légales,
   confidentialité), marquées kna-editorial côté PHP : le titre et la carte
   de lecture partagent la même largeur, centrée dans le conteneur. */
body.kna-editorial .kna-page-content {
	width: 100%;
	max-width: 90ch;
	margin-inline: auto;
}

body.kna-editorial .kna-page-content__body {
	max-width: 100%;
	margin-inline: auto;
}

/* --- 3) Pages editoriales (CGV, mentions legales, confidentialite...) :
   carte de lecture blanche et typographie. Uniquement quand le contenu est
   du texte simple : les pages WooCommerce, WholesaleX ou composees de blocs
   ne sont jamais concernees. */
body.page .kna-page-content__body:not(:has(> :not(p, ol, ul, h2, h3, h4, h5, h6, table, blockquote, figure, hr, br))) {
	padding: 32px 40px;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	background-color: #ffffff;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
	color: #1f2937;
	line-height: 1.7;
}

body.page .kna-page-content__body:not(:has(> :not(p, ol, ul, h2, h3, h4, h5, h6, table, blockquote, figure, hr, br))) > p {
	margin: 0 0 14px;
}

body.page .kna-page-content__body:not(:has(> :not(p, ol, ul, h2, h3, h4, h5, h6, table, blockquote, figure, hr, br))) > :is(ol, ul) {
	margin: 0 0 18px;
	padding-left: 22px;
}

body.page .kna-page-content__body:not(:has(> :not(p, ol, ul, h2, h3, h4, h5, h6, table, blockquote, figure, hr, br))) li {
	margin: 0 0 6px;
}

body.page .kna-page-content__body:not(:has(> :not(p, ol, ul, h2, h3, h4, h5, h6, table, blockquote, figure, hr, br))) li::marker {
	color: var(--kna-color-brand);
	font-weight: var(--kna-weight-bold);
}

body.page .kna-page-content__body:not(:has(> :not(p, ol, ul, h2, h3, h4, h5, h6, table, blockquote, figure, hr, br))) > :is(h2, h3, h4) {
	margin: 28px 0 10px;
	font-family: var(--kna-font-body);
	font-weight: var(--kna-weight-extrabold);
	line-height: 1.25;
	text-transform: none;
	color: var(--kna-color-text-strong);
}

body.page .kna-page-content__body:not(:has(> :not(p, ol, ul, h2, h3, h4, h5, h6, table, blockquote, figure, hr, br))) > h2 {
	font-size: 20px;
}

body.page .kna-page-content__body:not(:has(> :not(p, ol, ul, h2, h3, h4, h5, h6, table, blockquote, figure, hr, br))) > :is(h3, h4) {
	font-size: 17px;
}

body.page .kna-page-content__body:not(:has(> :not(p, ol, ul, h2, h3, h4, h5, h6, table, blockquote, figure, hr, br))) > :first-child {
	margin-top: 0;
}

body.page .kna-page-content__body:not(:has(> :not(p, ol, ul, h2, h3, h4, h5, h6, table, blockquote, figure, hr, br))) a {
	color: var(--kna-color-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.page .kna-page-content__body:not(:has(> :not(p, ol, ul, h2, h3, h4, h5, h6, table, blockquote, figure, hr, br))) table {
	width: 100%;
	margin: 0 0 18px;
	border-collapse: collapse;
}

body.page .kna-page-content__body:not(:has(> :not(p, ol, ul, h2, h3, h4, h5, h6, table, blockquote, figure, hr, br))) :is(th, td) {
	padding: 10px 12px;
	border: 1px solid #e5e7eb;
	text-align: left;
}

body.page .kna-page-content__body:not(:has(> :not(p, ol, ul, h2, h3, h4, h5, h6, table, blockquote, figure, hr, br))) th {
	background-color: #eef8f3;
	font-weight: var(--kna-weight-bold);
}

@media (max-width: 480px) {
	body.page .kna-page-content__body:not(:has(> :not(p, ol, ul, h2, h3, h4, h5, h6, table, blockquote, figure, hr, br))) {
		padding: 20px;
	}
}