/* * Encarts de sélection — habillage front. * * PROVENANCE. Ce design est celui perdu avec les versions 0.22–0.25, retrouvé * le 2026-08-19 dans le cache de Penci PageSpeed Optimizer (il avait mis en * ligne le handle `mbp-sel-styles` le 18/08 à 17:29, trois heures avant * l'effacement des sources). Remis en forme, commenté, et complété du système * de couleurs par catégorie qui, lui, venait de l'ancienne feuille. * * PONT DE JETONS. Chaque couleur s'écrit `var(--mbp-color-x, )` : le * repli EST la charte, donc l'encart est juste sous le thème ACTUEL (qui ne * définit aucun jeton) ; et quand le thème enfant v2 posera ses `--mbp-color-*` * sur :root, l'encart les adoptera sans republier le plugin. * * AUCUNE police n'est chargée ici : `--mbp-sel-font-serif` retombe sur Georgia. * Charger Google Fonts depuis une extension coûterait une requête bloquante et * poserait une question de consentement (Complianz) pour un titre. * * CONTRAT `--mbp-sel-primary` — NE PAS CASSER. Posé par ordre croissant de * priorité : ici, par classe de catégorie du body, en style inline par * BoxRenderer (méta `post_accent_color` ou `color=` du shortcode), et sondé par * front.js sur le titre précédent. */ :root { --mbp-sel-bg: var(--mbp-color-surface-card, #faf8f5); --mbp-sel-border-color: var(--mbp-color-border, #eae6e0); --mbp-sel-card-bg: var(--mbp-color-surface, #fff); --mbp-sel-text-color: var(--mbp-color-text, #2c3038); --mbp-sel-heading-color: var(--mbp-color-heading, #121824); --mbp-sel-text-muted: var(--mbp-color-text-muted, #5e6b7c); --mbp-sel-on-accent: var(--mbp-color-on-accent, #fff); --mbp-sel-terracotta: var(--mbp-color-terracotta, #b44f25); --mbp-sel-terracotta-subtle: var(--mbp-color-terracotta-subtle, #fcf1eb); --mbp-sel-font-serif: var(--mbp-font-serif, "Playfair Display", Georgia, serif); --mbp-sel-font-sans: var(--mbp-font-sans, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); --mbp-sel-radius-sm: var(--mbp-radius-sm, 8px); --mbp-sel-radius-md: var(--mbp-radius-md, 14px); --mbp-sel-radius-pill: var(--mbp-radius-pill, 9999px); --mbp-sel-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); --mbp-sel-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.08); } /* * `--mbp-sel-primary` est calculé SUR .mbp-sel-box, pas sur :root — et c'est * indispensable : une propriété personnalisée résout ses `var()` à l'endroit où * elle est déclarée. Calculée sur :root, elle ne verrait jamais le * `--mbp-sel-accent` qu'une classe de catégorie pose plus bas. */ .mbp-sel-box { --mbp-sel-primary: var(--mbp-sel-accent, var(--mbp-color-accent, #1e6b45)); --mbp-sel-primary-hover: var(--mbp-sel-accent-hover, var(--mbp-color-accent-hover, #144d31)); /* * Le filet vertical du design retrouvé. Il était en terracotta figée ; il * suit désormais l'accent, donc la couleur du titre de section — comme les * liens. Déclaré ICI et pas sur :root, sinon il ne verrait pas la couleur * posée en ligne par BoxRenderer (une propriété personnalisée résout ses * var() là où elle est déclarée). */ --mbp-sel-border-accent: var(--mbp-sel-primary); background: var(--mbp-sel-bg); border: 1px solid var(--mbp-sel-border-color); border-left: 4px solid var(--mbp-sel-border-accent); border-radius: var(--mbp-sel-radius-md); padding: 26px 28px; margin: 2.5em 0; box-shadow: var(--mbp-sel-shadow); font-family: var(--mbp-sel-font-sans); box-sizing: border-box; } /* * ⚠️ INERTES SUR UN ARTICLE, ET C'EST MESURÉ (2026-08-19). WordPress n'ajoute * `category-*` au que sur les ARCHIVES ; un article ne porte que * `single`, `postid-N`… Or l'encart ne sort QUE sur un article. Ces règles ne * se sont donc jamais déclenchées, ni dans la feuille d'origine ni ici. * Elles sont conservées telles quelles en attendant une décision : soit les * supprimer, soit faire émettre une classe de catégorie à BoxRenderer. Depuis * la 0.27.0 le besoin est de toute façon couvert autrement — l'accent est lu * sur l'aplat du titre de section, côté serveur. * * Accent par catégorie — DEUX teintes par famille, une par mode. * * Les teintes claires précédentes (#3498db, #2ecc71, #1abc9c…) portaient du * texte blanc entre 2,1:1 et 3,2:1 : sous le seuil AA de 4,5, et illisible pour * la gastronomie. Reprises ici dans le registre sombre de la charte, toutes * ≥ 6,4:1 sur blanc. * * La variante `-dark` n'est pas un luxe : en mode sombre le texte posé sur * l'accent devient #04231a (quasi noir), et une teinte sombre y serait illisible. * Chaque variante claire est mesurée ≥ 6,2:1 sur ce fond. */ body.category-voyage .mbp-sel-box, body.category-voyages .mbp-sel-box, body.category-escapades .mbp-sel-box { --mbp-sel-accent: #1f5d7a; /* 7,23:1 sur blanc */ --mbp-sel-accent-hover: #18485f; --mbp-sel-accent-dark: #84a6b6; /* 6,43:1 sur #04231a */ --mbp-sel-accent-dark-hover: #a3bdc8; } body.category-lifestyle .mbp-sel-box, body.category-mode .mbp-sel-box { --mbp-sel-accent: #9d3560; /* 6,75:1 */ --mbp-sel-accent-hover: #7a294a; --mbp-sel-accent-dark: #c990a8; /* 6,38:1 */ --mbp-sel-accent-dark-hover: #d7acbe; } body.category-gastronomie .mbp-sel-box, body.category-restaurants .mbp-sel-box, body.category-recettes .mbp-sel-box, body.category-food .mbp-sel-box { --mbp-sel-accent: #2f6b34; /* 6,42:1 */ --mbp-sel-accent-hover: #245328; --mbp-sel-accent-dark: #8dae8f; /* 6,81:1 */ --mbp-sel-accent-dark-hover: #aac2ac; } body.category-culture .mbp-sel-box, body.category-expos .mbp-sel-box, body.category-sorties .mbp-sel-box { --mbp-sel-accent: #6b3f8e; /* 7,70:1 */ --mbp-sel-accent-hover: #53316e; --mbp-sel-accent-dark: #ae95c1; /* 6,24:1 */ --mbp-sel-accent-dark-hover: #c2b0d1; } body.category-hotel .mbp-sel-box, body.category-hotels .mbp-sel-box, body.category-hebergement .mbp-sel-box { --mbp-sel-accent: #1e6b45; /* 6,47:1 */ --mbp-sel-accent-hover: #175335; --mbp-sel-accent-dark: #83ae99; /* 6,73:1 */ --mbp-sel-accent-dark-hover: #a3c2b3; } /* ── En-tête de l'encart ─────────────────────────────────────────────────── */ .mbp-sel-header { margin-bottom: 22px; } .mbp-sel-badge-top { display: inline-flex !important; align-items: center; gap: 6px; width: fit-content; margin-bottom: 10px; padding: 4px 10px; border-radius: var(--mbp-sel-radius-pill); background: var(--mbp-sel-terracotta-subtle); color: var(--mbp-sel-terracotta); font-size: 11px; font-weight: 700; letter-spacing: 0.7px; line-height: 1.2; text-transform: uppercase; } /* Étoile en masque CSS : elle hérite de `currentColor`, donc elle suit la terracotta en clair comme en sombre sans qu'on redéclare l'icône. */ .mbp-sel-badge-top::before { content: ""; display: inline-block; width: 12px; height: 12px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E") no-repeat center/contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E") no-repeat center/contain; } /* Soledad remet `padding: 0` et une bordure sur les titres du contenu : sans !important le titre reprend l'habillage du thème. */ .mbp-sel-title { margin: 0 0 8px 0 !important; padding: 0 !important; border: none !important; font-family: var(--mbp-sel-font-serif) !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--mbp-sel-heading-color) !important; } .mbp-sel-subtitle { margin: 0 !important; font-size: 14.5px !important; line-height: 1.55 !important; color: var(--mbp-sel-text-muted) !important; } /* ── La grille ───────────────────────────────────────────────────────────── */ .mbp-sel-grid { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; margin: 0 !important; padding: 0 !important; } .mbp-sel-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 calc(33.333% - 16px); min-width: 230px; box-sizing: border-box; margin: 0 !important; padding: 16px 16px !important; background: var(--mbp-sel-card-bg); border: 1px solid var(--mbp-sel-border-color); border-radius: var(--mbp-sel-radius-sm); box-shadow: var(--mbp-sel-shadow); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .mbp-sel-card:hover { transform: translateY(-3px); box-shadow: var(--mbp-sel-shadow-hover); border-color: var(--mbp-sel-primary); } .mbp-sel-content { flex-grow: 1; margin-bottom: 10px; } .mbp-sel-name { margin: 0 0 4px 0 !important; font-family: var(--mbp-sel-font-sans) !important; font-size: 15.5px !important; font-weight: 700 !important; line-height: 1.35 !important; } .mbp-sel-name a { color: var(--mbp-sel-heading-color); text-decoration: none !important; transition: color 0.2s ease; } .mbp-sel-name a:hover { color: var(--mbp-sel-primary); } .mbp-sel-partner { display: inline-block; margin-bottom: 10px; font-size: 11.5px; font-style: italic; line-height: 1.2; color: var(--mbp-sel-text-muted); } /* * Pastille et argument par carte — ABSENTS du design retrouvé, réhabillés ici. * Les entités peuvent porter un `badge` et un `usp` par langue * (entity.labels_by_lang) : les laisser sans style ferait disparaître du texte * que l'éditeur a saisi. Rien ne s'affiche tant qu'ils ne sont pas renseignés. */ .mbp-sel-badge { align-self: flex-start; display: inline-block; margin-bottom: 8px; padding: 3px 9px; border-radius: var(--mbp-sel-radius-pill); background: var(--mbp-sel-terracotta-subtle); color: var(--mbp-sel-terracotta); font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; line-height: 1.2; text-transform: uppercase; } /* Familles de pastilles : mêmes teintes que les accents de catégorie, toutes mesurées ≥ 5,1:1 avec du blanc. */ .mbp-badge-coup-de-coeur, .mbp-badge-coup-de-c-ur, .mbp-badge-favori { background: #b44f25; color: #fff; } .mbp-badge-budget, .mbp-badge-bon-plan, .mbp-badge-pas-cher { background: #2f6b34; color: #fff; } .mbp-badge-luxe, .mbp-badge-prestige, .mbp-badge-charme { background: #6b3f8e; color: #fff; } .mbp-badge-famille, .mbp-badge-insolite { background: #1f5d7a; color: #fff; } .mbp-sel-usp { margin: 0 !important; font-size: 12.5px !important; line-height: 1.5 !important; color: var(--mbp-sel-text-muted) !important; } /* ── Actions ─────────────────────────────────────────────────────────────── */ .mbp-sel-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--mbp-sel-border-color); } .mbp-sel-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; padding: 10px 18px; border-radius: var(--mbp-sel-radius-pill); background: var(--mbp-sel-primary); color: var(--mbp-sel-on-accent) !important; font-size: 13.5px; font-weight: 700; text-align: center; text-decoration: none !important; transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; /* L'ombre colorée était figée en vert de charte : elle jurait dès qu'une catégorie changeait l'accent. Dérivée, avec un repli neutre. */ box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 12px color-mix(in srgb, var(--mbp-sel-primary) 32%, transparent); } .mbp-sel-cta:hover, .mbp-sel-cta:focus-visible { background: var(--mbp-sel-primary-hover) !important; color: var(--mbp-sel-on-accent) !important; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24); box-shadow: 0 6px 18px color-mix(in srgb, var(--mbp-sel-primary) 45%, transparent); } .mbp-sel-arrow { flex-shrink: 0; transition: transform 0.2s ease; } .mbp-sel-cta:hover .mbp-sel-arrow { transform: translateX(3px); } .mbp-sel-micro-note { margin-top: 1px; font-size: 11.5px; font-style: italic; line-height: 1.3; text-align: center; color: var(--mbp-sel-text-muted); } /* ── Variante dense : une ligne par adresse ────────────────────────────────── * Posée par BoxRenderer au-delà du seuil (6 par défaut, filtrable via * `mbp_affil_recap_dense_threshold`). Mesuré sur le corpus : 57 encarts sur 65 * portent 2 à 4 adresses et gardent la carte ; seuls les longs basculent ici. * Rien n'est masqué — chaque adresse garde son lien, la hauteur est divisée. */ /* Deux colonnes, comme les cartes : passer la liste en UNE colonne annulerait le gain (mesuré — 11 lignes de 76 px valent 6 rangées de cartes à 161 px). */ .mbp-sel-box--dense .mbp-sel-grid { flex-wrap: wrap !important; gap: 0 24px !important; } .mbp-sel-box--dense .mbp-sel-card { flex: 1 1 calc(50% - 24px); min-width: 280px; flex-direction: row; align-items: center; gap: 16px; min-width: 0; padding: 12px 4px !important; background: transparent; border: 0; border-bottom: 1px solid var(--mbp-sel-border-color); border-radius: 0; box-shadow: none; } /* Pas de translation au survol dans une liste : la ligne sauterait par-dessus sa voisine. On souligne l'accent, c'est tout. */ .mbp-sel-box--dense .mbp-sel-card:hover { transform: none; box-shadow: none; border-color: var(--mbp-sel-border-color); background: rgba(0, 0, 0, 0.015); } .mbp-sel-box--dense .mbp-sel-content { flex: 1 1 auto; min-width: 0; margin: 0; } .mbp-sel-box--dense .mbp-sel-name { margin: 0 !important; font-size: 14.5px !important; } .mbp-sel-box--dense .mbp-sel-partner { margin: 2px 0 0 0; } .mbp-sel-box--dense .mbp-sel-badge { margin: 0 0 0 8px; vertical-align: middle; } .mbp-sel-box--dense .mbp-sel-usp { display: none; /* la ligne doit rester une ligne */ } .mbp-sel-box--dense .mbp-sel-actions { flex: 0 0 auto; margin: 0; padding: 0; border-top: 0; } .mbp-sel-box--dense .mbp-sel-cta { padding: 8px 16px; font-size: 12.5px; white-space: nowrap; } @media (max-width: 600px) { .mbp-sel-box--dense .mbp-sel-card { flex-direction: column; align-items: stretch; gap: 10px; } .mbp-sel-box--dense .mbp-sel-cta { width: 100%; } } /* ── Mobile : la grille devient un carrousel ─────────────────────────────── */ @media (max-width: 768px) { .mbp-sel-box { padding: 20px 16px; margin: 24px 0 28px 0; } .mbp-sel-title { font-size: 19px !important; } .mbp-sel-grid { flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; gap: 12px !important; padding: 4px 2px 14px 2px !important; margin: 0 -2px !important; } .mbp-sel-grid::-webkit-scrollbar { height: 5px; } .mbp-sel-grid::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 10px; } .mbp-sel-grid::-webkit-scrollbar-thumb { background: var(--mbp-sel-primary); border-radius: 10px; } .mbp-sel-card { flex: 0 0 265px !important; scroll-snap-align: start !important; padding: 16px 14px !important; } } /* ── Mode sombre ───────────────────────────────────────────────────────────── * Cinq sélecteurs : Soledad bascule par une classe sur (trois variantes * selon la version et le réglage), et le thème enfant v2 posera l'attribut sur * . On ne redéfinit QUE les jetons. * * `--mbp-sel-on-accent` passe au quasi-noir : l'accent s'éclaircit en mode * sombre, et le blanc y tomberait très en dessous du seuil AA. */ body.penci-dark-mode .mbp-sel-box, body.dark-mode .mbp-sel-box, body.pcdark-mode .mbp-sel-box, body.pcdm-enable .mbp-sel-box, html[data-theme="dark"] .mbp-sel-box { --mbp-sel-primary: var(--mbp-sel-accent-dark, #34d399); --mbp-sel-primary-hover: var(--mbp-sel-accent-dark-hover, #10b981); --mbp-sel-bg: #151d2a; --mbp-sel-border-color: #243144; --mbp-sel-card-bg: #1c2738; --mbp-sel-heading-color: #f1f5f9; --mbp-sel-text-color: #e2e8f0; --mbp-sel-text-muted: #94a3b8; --mbp-sel-on-accent: #04231a; --mbp-sel-terracotta: #fca5a5; --mbp-sel-terracotta-subtle: rgba(239, 68, 68, 0.15); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } /* ── Mouvement réduit ────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .mbp-sel-grid { scroll-behavior: auto; } .mbp-sel-card, .mbp-sel-cta, .mbp-sel-name a, .mbp-sel-arrow { transition: none; } .mbp-sel-card:hover, .mbp-sel-cta:hover { transform: none; } } /* Editorial comparison: visible on every screen, scoped to this variant. */ .mbp-sel-box.mbp-sel-box--editorial{--mbp-sel-primary:#38536b;--mbp-sel-surface:#fbfcfc;--mbp-sel-rule:#c5cfd6;--mbp-sel-link:#38536b;border:1px solid var(--mbp-sel-rule);border-top:3px solid var(--mbp-sel-primary);border-radius:3px;background:var(--mbp-sel-surface);padding:20px;box-shadow:none;color:#292724;container-type:inline-size;container-name:mbp-selection} .mbp-sel-box--editorial .mbp-sel-header{text-align:left;margin-bottom:10px} .mbp-sel-box--editorial .mbp-sel-title{font-family:inherit;text-transform:none;letter-spacing:normal;color:#292724!important;font-size:22px!important;line-height:1.3!important;margin:0 0 6px!important} .mbp-sel-box--editorial .mbp-sel-subtitle{color:#514d47!important;font-size:14px!important;line-height:1.5!important;margin:0} .mbp-sel-box--editorial .mbp-sel-grid{display:block!important;overflow:visible!important;scroll-snap-type:none!important;padding:0!important;margin:0!important} .mbp-sel-box--editorial .mbp-sel-group{font-weight:700;font-size:12px!important;line-height:1.5!important;color:#514d47;margin:14px 0 0!important} .mbp-sel-box--editorial .mbp-sel-card{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:14px;align-items:center;border:0;border-bottom:1px solid var(--mbp-sel-rule);border-radius:0;padding:12px 0!important;background:transparent;box-shadow:none;transform:none;min-width:0;flex:none!important;justify-content:normal;transition:none} .mbp-sel-box--editorial .mbp-sel-content{min-width:0;margin:0} .mbp-sel-box--editorial .mbp-sel-name{font-size:16px!important;line-height:1.35!important;margin:0 0 3px!important;color:#292724!important} .mbp-sel-box--editorial .mbp-sel-name a{color:var(--mbp-sel-link);text-decoration:none} .mbp-sel-box--editorial .mbp-sel-name a:hover{text-decoration:underline} .mbp-sel-box--editorial .mbp-sel-usp{color:#38342f!important;font-size:13px!important;line-height:1.5!important;margin:3px 0!important} .mbp-sel-box--editorial .mbp-sel-caveat{color:#514d47!important;font-size:12px!important;line-height:1.5!important;font-style:italic;margin:3px 0 0!important} .mbp-sel-box--editorial .mbp-sel-partner{font-size:11px!important;line-height:1.5!important;color:#615950;margin:0!important;white-space:nowrap} .mbp-sel-box--editorial .mbp-sel-actions{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0;border:0;padding:0} .mbp-sel-box--editorial .mbp-sel-story,.mbp-sel-box--editorial .mbp-sel-cta{display:inline-flex;align-items:center;gap:4px;min-height:32px;font-size:13px!important;line-height:1.4!important;text-align:left;white-space:normal;color:var(--mbp-sel-link)!important;text-decoration:underline;text-underline-offset:3px;padding:2px 0!important;margin:0!important;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;transform:none!important} .mbp-sel-box--editorial .mbp-sel-cta{font-weight:600} .mbp-sel-box--editorial .mbp-sel-story:hover,.mbp-sel-box--editorial .mbp-sel-cta:hover{color:var(--mbp-sel-link)!important;text-decoration-thickness:2px} .mbp-sel-box--editorial .mbp-sel-micro-note{font-size:11px!important;line-height:1.5!important;text-align:left;color:#595149;margin:12px 0 0!important} .mbp-sel-box--editorial a:focus-visible{outline:2px solid var(--mbp-sel-link);outline-offset:3px} .mbp-sel-box--editorial .mbp-sel-card:hover{transform:none;box-shadow:none;border-color:var(--mbp-sel-rule)} @container mbp-selection (max-width:600px){ .mbp-sel-box--editorial .mbp-sel-card{grid-template-columns:minmax(0,1fr);gap:3px} .mbp-sel-box--editorial .mbp-sel-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 14px} .mbp-sel-box--editorial .mbp-sel-partner{margin-left:auto!important} } @media(max-width:600px){ .mbp-sel-box.mbp-sel-box--editorial{padding:16px} .mbp-sel-box--editorial .mbp-sel-title{font-size:20px!important} .mbp-sel-box--editorial .mbp-sel-card{grid-template-columns:minmax(0,1fr);gap:3px;padding:10px 0!important} .mbp-sel-box--editorial .mbp-sel-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 14px} .mbp-sel-box--editorial .mbp-sel-partner{margin-left:auto!important} } [id^="mbp-story-"]{scroll-margin-top:120px} /* Untested alternatives remain one native, keyboard-operable group. */ .mbp-sel-box--editorial .mbp-sel-selected{margin:8px 0 0;padding:0;border:0;background:transparent} .mbp-sel-box--editorial .mbp-sel-selected-toggle{cursor:pointer;font-size:13px!important;font-weight:600;line-height:1.5!important;min-height:44px;padding:12px 0;color:var(--mbp-sel-link);text-decoration:underline;text-underline-offset:3px} .mbp-sel-box--editorial .mbp-sel-selected-toggle:focus-visible{outline:2px solid var(--mbp-sel-link);outline-offset:3px} .mbp-sel-box--editorial .mbp-sel-selected-items{margin:0;padding:0}