/* =====================================================================
 * DP – Fiche produit
 * =====================================================================
 * Le dessin est celui de `ProductSpotlight` du design system : une carte
 * unique, coupée en deux, dont la moitié gauche est un panneau de couleur
 * portant le packshot et la moitié droite une colonne de lecture.
 *
 * Ce qui change par rapport au dessin précédent, et pourquoi :
 *
 * — La carte ne flotte plus dans une seconde surface teintée. Il y avait un
 *   bloc pâle, arrondi et ombré, et une carte blanche arrondie et ombrée
 *   dedans : deux cadres pour une seule fiche. Le fil d'ariane sort du cadre,
 *   la carte porte seule la surface.
 *
 * — Le panneau du visuel va bord à bord. Le design system ne laisse aucune
 *   gouttière entre la couleur et l'arête de la carte ; c'est ce qui donne à
 *   la fiche sa lecture en deux temps. La carte est donc en `overflow: hidden`
 *   et le panneau n'a pas d'arrondi propre.
 *
 * — Les informations clés deviennent une liste de définitions. Une phrase à
 *   puce ne se compare pas d'une fiche à l'autre ; « Forme · Solution » se
 *   compare d'un coup d'œil. Les entrées sans libellé restent des phrases et
 *   prennent toute la largeur — c'est ce qui permet aux fiches déjà écrites de
 *   continuer à s'afficher telles qu'elles ont été saisies.
 *
 * — Les substances actives deviennent des pastilles grises, et les espèces des
 *   pictogrammes posés en ligne. Les espèces étaient des vignettes carrées de
 *   82 px : trois d'entre elles pesaient plus lourd que le nom du produit.
 *
 * La chaîne des couleurs reste celle de la charte : variable locale du bloc,
 * puis jeton de charte, puis valeur du design system en dernier rempart.
 * Voir .agents/skills/dp-charte/SKILL.md.
 * ===================================================================== */

.dp-ps {
	/* Le filet des séparateurs : `--dp-border-hairline` est un jeton du design
	   system que la charte ne publie pas. On le recompose ici à partir du
	   jeton de bordure, qui, lui, suit le réglage. */
	--dp-ps-rule: 1px solid var(--dp-ps-separator, var(--dp-color-border, #dedede));

	width: 100%;
	padding: var(--dp-ps-pad, 0);
	background: var(--dp-ps-bg, transparent);
	color: var(--dp-ps-text, var(--dp-color-text, #303030));
	font-family: var(--dp-font-base, inherit);
	font-weight: var(--dp-font-base-weight, 400);
}

/* ── Le fil d'ariane ────────────────────────────────────────────────────
   Hors de la carte : c'est un repère de navigation, pas un contenu de fiche. */

.dp-ps__breadcrumbs {
	margin: 0 0 16px;
	font-size: var(--dp-text-caption, 13px);
	color: var(--dp-ps-breadcrumb, var(--dp-color-text-muted, #5b5b5b));
}

.dp-ps__breadcrumbs ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.dp-ps__breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
}

.dp-ps__breadcrumbs li:not(:last-child)::after {
	content: '\203A';
	color: var(--dp-ps-separator, var(--dp-color-border, #dedede));
	font-size: 12px;
}

.dp-ps__breadcrumbs a {
	color: var(--dp-ps-link, var(--dp-color-primary-strong, #1f7f91));
	text-decoration: none;
	font-weight: 600;
}

.dp-ps__breadcrumbs a:hover {
	text-decoration: underline;
}

.dp-ps__breadcrumbs .is-current span {
	font-weight: 700;
	color: var(--dp-ps-current, var(--dp-color-text, #303030));
}

/* ── La carte ───────────────────────────────────────────────────────────
   Deux colonnes inégales : le visuel légèrement plus étroit que la lecture,
   comme au design system. Les `minmax(0, …)` empêchent une longue substance
   active d'élargir sa colonne au-delà de la carte. */

.dp-ps__card {
	display: grid;
	grid-template-columns:
		minmax(0, var(--dp-ps-media-fr, 0.9fr))
		minmax(0, var(--dp-ps-content-fr, 1.1fr));
	align-items: stretch;
	background: var(--dp-ps-card-bg, var(--dp-color-surface, #ffffff));
	border-radius: var(--dp-ps-card-radius, var(--dp-radius-lg, 20px));
	overflow: hidden;

	/* Une ombre, pas un filet : le design system n'en pose qu'une, et empiler
	   les deux épaissit l'arête. Le contour reste atteignable — il est le
	   second calque de l'ombre, transparent tant que personne ne le règle. */
	box-shadow:
		var(--dp-ps-card-shadow, var(--dp-shadow-md, 0 10px 28px rgba(16, 51, 96, .1))),
		var(--dp-ps-card-outline, 0 0 0 0 transparent);
}

/* ── Le panneau du visuel ───────────────────────────────────────────────
   L'aplat de la gamme. Sans gamme, ou sans couleur réglée, il retombe sur le
   fond clair de la charte — jamais sur du blanc, sinon la carte n'a plus de
   moitié gauche. */

.dp-ps__media-col {
	position: relative;
	display: grid;
	place-items: center;
	padding: var(--dp-ps-media-pad, 32px);
	background: var(--dp-ps-media-bg, var(--dp-color-primary-soft, #ecf8f9));
	min-height: var(--dp-ps-media-min, 280px);
}

.dp-ps__media {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	border-radius: var(--dp-ps-media-radius, var(--dp-radius-md, 16px));
	overflow: hidden;
}

.dp-ps__image {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
}

/* `img` en tête du sélecteur : Elementor pose `.elementor img { height: auto;
   border-radius: 0 }` en (0,1,1), plus fort qu'une classe seule. Sans le nom
   d'élément, le packshot perd sa hauteur et son arrondi (cf. SKILL §4g). */
.dp-ps__image img {
	width: 100%;
	height: 100%;
	max-height: var(--dp-ps-image-max, none);
	object-fit: var(--dp-ps-image-fit, contain);
	border-radius: inherit;
	display: block;
}

/* Le logo secondaire se pose dans l'angle du panneau, pas dans le flux : il
   décale sinon le packshot vers le bas d'une hauteur de logo. */
.dp-ps__secondary-logo {
	position: absolute;
	top: var(--dp-ps-media-pad, 32px);
	left: var(--dp-ps-media-pad, 32px);
	display: inline-flex;
	max-width: min(60%, 160px);
	pointer-events: none;
}

.dp-ps__secondary-logo:empty {
	display: none;
}

.dp-ps__secondary-logo img {
	display: block;
	max-width: 100%;
	width: auto;
	max-height: var(--dp-ps-secondary-logo-h, 48px);
	height: auto;
	object-fit: contain;
}

/* ── La colonne de lecture ──────────────────────────────────────────────── */

.dp-ps__content {
	display: flex;
	flex-direction: column;
	gap: var(--dp-ps-content-gap, 16px);
	padding: var(--dp-ps-content-pad, clamp(24px, 3vw, 40px));
	min-width: 0;
}

.dp-ps__content-top {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}

.dp-ps__range-logo {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	max-width: min(100%, 180px);
}

.dp-ps__range-logo:empty {
	display: none;
}

.dp-ps__range-logo img {
	display: block;
	max-width: 100%;
	width: auto;
	max-height: var(--dp-ps-range-logo-h, 56px);
	height: auto;
	object-fit: contain;
}

/* Le sur-titre : capitales suivies, sans aplat. La pastille bleutée qu'il
   portait a disparu du design system — elle doublait l'étiquette de gamme
   posée juste au-dessus. Elle reste atteignable : poser une couleur de fond
   dans les réglages remet le rembourrage et l'arrondi (classe `--filled`). */
.dp-ps__eyebrow {
	font-family: var(--dp-font-display, var(--dp-font-heading, inherit));
	font-weight: 700;
	font-size: var(--dp-text-micro, 11px);
	line-height: 1.4;
	letter-spacing: var(--dp-tracking-caps, .12em);
	text-transform: uppercase;
	color: var(--dp-ps-eyebrow-text, var(--dp-color-primary-strong, #1f7f91));
	width: fit-content;
}

.dp-ps__eyebrow--filled {
	background: var(--dp-ps-eyebrow-bg, transparent);
	border-radius: var(--dp-ps-eyebrow-radius, var(--dp-radius-pill, 999px));
	padding: 6px 12px;
}

.dp-ps__title {
	margin: 0;
	font-family: var(--dp-font-display, var(--dp-font-heading, inherit));
	font-weight: var(--dp-font-heading-weight, 700);
	font-size: var(--dp-text-h2, clamp(28px, 3.4vw, 46px));
	line-height: 1.1;
	color: var(--dp-ps-title, var(--dp-color-text, #303030));
}

.dp-ps__description {
	margin: 0;
	font-size: var(--dp-text-body, 16px);
	line-height: var(--dp-leading-relaxed, 1.65);
	color: var(--dp-ps-muted, var(--dp-color-text-muted, #5b5b5b));
}

/* Le libellé d'un groupe : « Substances actives », « Espèces ». Encre estompée
   et capitales suivies — il nomme, il ne se lit pas. */
.dp-ps__group-label {
	font-family: var(--dp-font-display, var(--dp-font-heading, inherit));
	font-weight: 700;
	font-size: var(--dp-text-micro, 11px);
	line-height: 1.4;
	letter-spacing: var(--dp-tracking-caps, .12em);
	text-transform: uppercase;
	color: var(--dp-ps-label, var(--dp-color-text-faint, #8a8a8a));
}

/* ── Les substances actives ─────────────────────────────────────────────── */

.dp-ps__active-label {
	display: block;
	margin: 0 0 8px;
}

.dp-ps__active-values {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dp-ps__active-item {
	padding: 6px 12px;
	border-radius: var(--dp-ps-pill-radius, var(--dp-radius-pill, 999px));
	background: var(--dp-ps-pill-bg, var(--dp-color-surface-grey, #f4f6f6));
	color: var(--dp-ps-pill-text, var(--dp-color-text, #303030));
	font-size: var(--dp-text-caption, 13px);
	line-height: 1.35;
	overflow-wrap: anywhere;
}

/* ── Les informations clés ──────────────────────────────────────────────
   Une liste de définitions cadrée de deux filets. Les colonnes se comptent
   toutes seules : trois faits courts tiennent sur une ligne, un seul occupe
   la largeur sans s'étirer au-delà du lisible. */

.dp-ps__facts {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--dp-ps-fact-min, 120px), 1fr));
	gap: var(--dp-ps-fact-gap, 14px);
	padding: 16px 0;
	border-top: var(--dp-ps-rule);
	border-bottom: var(--dp-ps-rule);
}

.dp-ps__fact-label {
	margin: 0;
	font-family: var(--dp-font-display, var(--dp-font-heading, inherit));
	font-weight: 700;
	font-size: var(--dp-text-micro, 11px);
	line-height: 1.4;
	letter-spacing: var(--dp-tracking-caps, .12em);
	text-transform: uppercase;
	color: var(--dp-ps-label, var(--dp-color-text-faint, #8a8a8a));
}

.dp-ps__fact-value {
	margin: 4px 0 0;
	font-size: var(--dp-text-body-sm, 15px);
	line-height: 1.45;
	color: var(--dp-ps-text, var(--dp-color-text, #303030));
	overflow-wrap: anywhere;
}

/* Une information saisie sans libellé est une phrase, pas une valeur : elle
   prend la largeur entière plutôt que de se faire comprimer dans une colonne
   de 120 px. C'est ce qui laisse les fiches déjà écrites intactes. */
.dp-ps__fact--plain {
	grid-column: 1 / -1;
}

.dp-ps__fact--plain .dp-ps__fact-value {
	margin: 0;
}

/* ── Les espèces ────────────────────────────────────────────────────────
   Des pictogrammes en ligne, à hauteur de texte. Ils étaient encadrés dans des
   vignettes de 82 px : trois d'entre elles pesaient plus que le nom du
   produit. */

.dp-ps__species {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--dp-ps-species-gap, 14px);
}

.dp-ps__species-logos {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--dp-ps-species-gap, 14px);
}

.dp-ps__animal-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--dp-ps-species-bg, transparent);
	border-radius: var(--dp-ps-badge-radius, 0);
}

.dp-ps__animal-badge img.dp-ps__animal-logo {
	height: var(--dp-ps-species-size, 26px);
	width: auto;
	max-width: none;
	object-fit: contain;
	opacity: var(--dp-ps-species-opacity, .85);
	display: block;
}

/* ── Le conditionnement ─────────────────────────────────────────────────── */

.dp-ps__pack-info {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	align-items: baseline;
	font-size: var(--dp-text-caption, 14px);
	color: var(--dp-ps-muted, var(--dp-color-text-muted, #5b5b5b));
}

.dp-ps__pack-label {
	font-weight: 700;
	color: var(--dp-ps-label, var(--dp-color-text-faint, #8a8a8a));
	text-transform: uppercase;
	letter-spacing: var(--dp-tracking-caps, .12em);
	font-size: var(--dp-text-micro, 11px);
	font-family: var(--dp-font-display, var(--dp-font-heading, inherit));
}

.dp-ps__pack-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ── « Existe aussi en » ────────────────────────────────────────────────
   Le bandeau des autres volumes, emprunté au bloc « Order Now ». Il garde son
   balisage — donc ses réglages de couleur et d'arrondi — mais se pose ici à la
   ligne du conditionnement plutôt qu'au-dessus d'un bouton : c'est la même
   question, quelle boîte pour quel volume. */

.dp-ps__formats .dp-on__formats {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	margin: 0;
}

.dp-ps__formats .dp-on__formats-title {
	font-family: var(--dp-font-display, var(--dp-font-heading, inherit));
	font-weight: 700;
	font-size: var(--dp-text-micro, 11px);
	letter-spacing: var(--dp-tracking-caps, .12em);
	text-transform: uppercase;
	color: var(--dp-ps-label, var(--dp-color-text-faint, #8a8a8a));
}

.dp-ps__formats .dp-on__formats-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Les formats prennent la pastille des substances actives : ce sont les mêmes
   petites étiquettes grises, et leur donner un second dessin ferait deux
   familles de pastilles dans une carte qui n'en a qu'une. */
.dp-ps__formats .dp-on__formats-list a {
	display: inline-block;
	padding: 6px 12px;
	border-radius: var(--dp-ps-pill-radius, var(--dp-radius-pill, 999px));
	background: var(--dp-ps-pill-bg, var(--dp-color-surface-grey, #f4f6f6));
	color: var(--dp-ps-pill-text, var(--dp-color-text, #303030));
	font-size: var(--dp-text-caption, 13px);
	line-height: 1.35;
	text-decoration: none;
	transition: var(--dp-transition-base, all .2s cubic-bezier(.4, 0, .2, 1));
}

.dp-ps__formats .dp-on__formats-list a:hover {
	color: var(--dp-ps-link, var(--dp-color-primary-strong, #1f7f91));
	text-decoration: underline;
}

/* ── Le bouton d'achat ──────────────────────────────────────────────────
   Le trait rend le conteneur du bloc « Order Now » : on lui retire seulement
   ce qui n'a de sens que posé seul dans une page — sa largeur pleine et ses
   marges de bloc. Le bouton, la modale et leurs réglages restent les siens. */

.dp-ps__actions {
	margin-top: auto;
	padding-top: 4px;
}

/* La rangée d'actions prend le relais du rattachement de gamme pour coller au
   bas de la colonne ; les deux ne peuvent pas le faire à la fois. */
.dp-ps__actions + .dp-ps__brand {
	margin-top: 0;
}

.dp-ps__actions .dp-on {
	margin: 0;
}

/* ── La rangée d'actions ────────────────────────────────────────────────
   Le design system y place les boutons ; la fiche y place son rattachement de
   gamme. `margin-top: auto` la colle au bas de la colonne, ce qui aligne les
   fiches entre elles quand deux se suivent. */

.dp-ps__brand {
	margin-top: auto;
	padding-top: 4px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	font-size: var(--dp-text-caption, 13px);
	color: var(--dp-ps-muted, var(--dp-color-text-muted, #5b5b5b));
}

.dp-ps__brand-prefix {
	overflow-wrap: anywhere;
}

.dp-ps__brand-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.dp-ps__brand-name {
	display: inline-block;
	padding: 8px 14px;
	border-radius: var(--dp-ps-brand-radius, var(--dp-radius-pill, 999px));
	background: var(--dp-ps-brand-bg, var(--dp-color-primary-fill, #61c2d0));
	/* `on-primary`, pas du blanc : une gamme pastel ne porte pas de libellé
	   blanc. Quand la gamme a sa propre couleur, le rendu émet en plus un
	   style inline calculé par `\DP\Theme::on_color()`. */
	color: var(--dp-ps-brand-text, var(--dp-color-on-primary, #303030));
	font-family: var(--dp-font-display, var(--dp-font-heading, inherit));
	font-size: var(--dp-text-micro, 11px);
	letter-spacing: var(--dp-tracking-caps, .12em);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: var(--dp-transition-base, all .2s cubic-bezier(.4, 0, .2, 1));
}

.dp-ps__brand-name:hover {
	filter: brightness(.94);
}

/* ── Le fond accordé à la gamme ─────────────────────────────────────────
   Le panneau du visuel porte le dôme de sa gamme : la géométrie du dégradé du
   Ô — un radial ancré en bas à gauche, aux mêmes proportions que
   `--dp-gradient-dome` — mais dont les stops sont tirés de la seule couleur de
   la gamme, du plus dense en bas à gauche au presque blanc en haut à droite.

   ── Pourquoi le taux vient du rendu et non d'ici ──
   Une gamme est libre de sa teinte, et la palette change : le catalogue est
   parti de couleurs saturées — violet, bleu, orange, le noir de Carbodote — et
   le design system la fait passer à des pastels, un par domaine thérapeutique.
   Un taux écrit en dur serait juste pour l'une et faux pour l'autre : trop pâle
   pour un pastel, qui ne se lirait plus ; trop dense pour un noir, qui donnerait
   un aplat de deuil derrière un packshot.

   `\DP\Theme::range_tint_strength()` le déduit donc de la clarté de la couleur :
   un pastel est posé presque pur, une couleur sombre est fortement diluée. Le
   100 % ci-dessous n'est qu'un repli — sans gamme, il n'y a pas de teinte du
   tout, et la règle ne s'applique pas.

   Le texte posé dessus reste l'encre de la charte tant que le mélange est un
   fond clair, ce que le rendu vérifie sur la couleur RÉSULTANTE et non sur la
   couleur de gamme : c'est le mélange qu'on lit, pas la teinte d'origine. */

.dp-ps--range-tint {
	--dp-ps-range-strength: 100%;
	--dp-ps-range-base: var(--dp-ps-range, var(--dp-color-primary, #61c2d0));
	--dp-ps-range-surface: var(--dp-color-surface, #ffffff);

	--dp-ps-range-dense: color-mix(
		in srgb,
		var(--dp-ps-range-base) var(--dp-ps-range-strength),
		var(--dp-ps-range-surface)
	);
	--dp-ps-range-mid: color-mix(
		in srgb,
		var(--dp-ps-range-base) calc(var(--dp-ps-range-strength) * 0.52),
		var(--dp-ps-range-surface)
	);
	--dp-ps-range-faint: color-mix(
		in srgb,
		var(--dp-ps-range-base) calc(var(--dp-ps-range-strength) * 0.14),
		var(--dp-ps-range-surface)
	);

	/* L'aplat, pour le fond uni. */
	--dp-ps-range-tint: var(--dp-ps-range-dense);

	/* Le dôme de la gamme. Les proportions sont celles de la marque :
	   `radial-gradient(120% 140% at 30% 100%)`, cf. `Theme::gradient-dome`. */
	--dp-ps-range-dome: radial-gradient(
		120% 140% at 30% 100%,
		var(--dp-ps-range-dense) 0%,
		var(--dp-ps-range-mid) 42%,
		var(--dp-ps-range-faint) 100%
	);

	--dp-ps-range-fill: var(--dp-ps-range-dome);
}

/* Le fond uni bascule la variable, pas la règle : une seule chaîne de cascade
   à suivre, et le réglage du panneau n'a pas à connaître les sélecteurs. */
.dp-ps--tint-flat {
	--dp-ps-range-fill: var(--dp-ps-range-tint);
}

.dp-ps--range-tint.dp-ps--tint-media .dp-ps__media-col {
	background: var(--dp-ps-media-bg, var(--dp-ps-range-fill));
}

.dp-ps--range-tint.dp-ps--tint-card .dp-ps__card {
	background: var(--dp-ps-range-fill);
}

/* Le panneau reste transparent quand c'est la carte qui porte le fond : lui
   donner le sien peindrait un second dôme dans le premier, avec sa propre
   ancre en bas à gauche — on lirait deux dégradés qui se coupent. */
.dp-ps--range-tint.dp-ps--tint-card .dp-ps__media-col {
	background: transparent;
}

.dp-ps--tint-strong.dp-ps--tint-card .dp-ps__card,
.dp-ps--tint-strong.dp-ps--tint-media .dp-ps__media-col {
	color: var(--dp-ps-range-on, var(--dp-color-text, #303030));
}

/* Repli sans `color-mix()` : le dégradé ne se calcule pas et le panneau garde
   le fond clair de la charte. Moins riche, jamais illisible. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
	.dp-ps--range-tint.dp-ps--tint-media .dp-ps__media-col,
	.dp-ps--range-tint.dp-ps--tint-card .dp-ps__card {
		background: var(--dp-color-primary-soft, #ecf8f9);
	}
}

/* ── Responsive ─────────────────────────────────────────────────────────
   Un seul effondrement, au seuil de 860 px de la charte : sous cette largeur
   deux colonnes de moins de 400 px ne tiennent plus une ligne de texte. */

@media (max-width: 860px) {
	.dp-ps__card {
		grid-template-columns: 1fr;
	}

	/* Les mêmes variables, un repli plus court.
	   Pas de jumelles `…-mobile` : les curseurs de la section Mise en page sont
	   responsives, et Elementor réécrit LA variable dans sa propre requête de
	   média. Une seconde variable ici rendrait le réglage mobile inopérant —
	   l'auteur choisirait une hauteur sur téléphone et ne verrait rien bouger. */
	.dp-ps__media-col {
		min-height: var(--dp-ps-media-min, 240px);
		padding: var(--dp-ps-media-pad, 24px);
	}

	.dp-ps__secondary-logo {
		top: var(--dp-ps-media-pad, 24px);
		left: var(--dp-ps-media-pad, 24px);
	}

	.dp-ps__image img {
		max-height: var(--dp-ps-image-max, 280px);
	}

	.dp-ps__content {
		padding: var(--dp-ps-content-pad, 24px);
	}
}

@media (max-width: 620px) {
	.dp-ps__media-col {
		min-height: var(--dp-ps-media-min, 200px);
	}

	.dp-ps__facts {
		grid-template-columns: 1fr;
	}

	.dp-ps__brand {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}
}

/* Une fiche produit s'imprime : l'aplat de gamme coûte de l'encre et n'apporte
   rien sur papier, le packshot reste. */
@media print {
	.dp-ps__card {
		box-shadow: none;
		border: 1px solid var(--dp-color-border, #dedede);
	}

	.dp-ps__media-col {
		background: none;
	}
}