/* ==========================================================================
   Comparatif produit — academiedubricoleur.com
   Ne contient que ce que Bootstrap 5 ne couvre pas : tokens, typographie
   du gabarit, étoiles superposées, barres de score, pastilles marchands,
   bandes de section, colonne photo des fiches, sticky mobile du tableau.
   Chargé uniquement sur single-comparatif.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — branchés sur les variables réelles du thème (style.css :root)
   -------------------------------------------------------------------------- */
.cmp {
  --cmp-cream:        var(--cc-bg, #FDF6EC);      /* fond de page            */
  --cmp-cream-2:      var(--adb-paper, #F7F1E6);  /* en-têtes, encadrés      */
  --cmp-ink:          var(--cc-ink, #141414);     /* titres, bandeau sombre  */
  --cmp-orange:       var(--cc-accent, #E8873A);  /* boutons, badges         */
  --cmp-orange-dark:  #D97426;                    /* eyebrows, liens         */
  --cmp-orange-light: #F3B87A;                    /* eyebrows sur fond sombre*/
  --cmp-green:        var(--cc-primary, #1B6B54); /* bande, coches, barres   */
  --cmp-text:         var(--adb-slate, #7A7268);  /* paragraphes             */
  --cmp-text-2:       #8B8377;                    /* métadonnées, libellés   */
  --cmp-line:         var(--adb-line, #EFE4D2);   /* bordures                */
  --cmp-ph-bg:        #F1EADD;                    /* placeholder photo       */
  --cmp-ph-text:      #B0A695;
  --cmp-pros-bg:      #F0F6F3;
  --cmp-pros-text:    #2F4A40;
  --cmp-cons-bg:      #FBF0E8;
  --cmp-cons-text:    #5A4436;
  --cmp-cons-icon:    #C0621F;
  --cmp-track:        #F0E8DA;                    /* piste barres de score   */
  --cmp-star-track:   #E3D9C7;                    /* piste étoiles           */
  --cmp-radius:       8px;
  --cmp-shadow:       0 2px 12px rgba(26, 26, 26, .05);
  --cmp-font-head:    "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  color: var(--cmp-text);
  font-size: 14.5px;
  line-height: 1.6;
  background: var(--cmp-cream);
}

/* Fond crème sur toute la page (le thème force #fff sur .wp-singular) */
body.single-comparatif { background: var(--cmp-cream) !important; }

/* --------------------------------------------------------------------------
   2. Typographie du gabarit
   -------------------------------------------------------------------------- */
.cmp-h1 {
  font-family: var(--cmp-font-head);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--cmp-ink);
}
.cmp-h2 {
  font-family: var(--cmp-font-head);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
  color: var(--cmp-ink);
}
.cmp-h2--light { color: #fff; }

.cmp-eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--cmp-orange-dark);
}
.cmp-eyebrow--light { color: var(--cmp-orange-light); }

.cmp-chapo { font-size: 16.5px; line-height: 1.65; max-width: 62ch; }

.cmp-muted { color: var(--cmp-text-2); }

.cmp-affiliation { font-size: 12.5px; line-height: 1.5; color: var(--cmp-text-2); max-width: 70ch; }
.cmp-verif       { font-size: 12.5px; color: var(--cmp-text-2); }

/* Le thème impose « article h3 { color: vert !important } » : on reprend la main. */
.cmp article h2,
.cmp article h3,
.cmp h3 {
  font-family: var(--cmp-font-head);
  color: var(--cmp-ink) !important;
  font-weight: 700;
  margin-bottom: .5rem;
}

/* Liens : le thème colore tous les <a> en orange + souligné au survol */
.cmp a { text-decoration: none; }
.cmp a:hover { text-decoration: none; }
.cmp-prose a { text-decoration: underline; }

/* --------------------------------------------------------------------------
   3. Composants Bootstrap surchargés
   -------------------------------------------------------------------------- */
.cmp .card.cmp-card {
  --bs-card-border-color: var(--cmp-line);
  --bs-card-border-radius: var(--cmp-radius);
  --bs-card-inner-border-radius: calc(var(--cmp-radius) - 1px);
  --bs-card-bg: #fff;
  border: 1px solid var(--cmp-line);
  border-radius: var(--cmp-radius);
  box-shadow: var(--cmp-shadow);
  overflow: hidden;
}

.cmp .btn.cmp-btn {
  --bs-btn-font-weight: 700;
  --bs-btn-padding-x: 1.1rem;
  --bs-btn-padding-y: .55rem;
  --bs-btn-font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.cmp .btn-primary {
  --bs-btn-bg: var(--cmp-orange);
  --bs-btn-border-color: var(--cmp-orange);
  --bs-btn-hover-bg: var(--cmp-orange-dark);
  --bs-btn-hover-border-color: var(--cmp-orange-dark);
  --bs-btn-active-bg: var(--cmp-orange-dark);
  --bs-btn-active-border-color: var(--cmp-orange-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 232, 135, 58;
}
.cmp .btn-outline-dark {
  --bs-btn-border-width: 1.5px;
  --bs-btn-color: var(--cmp-ink);
  --bs-btn-border-color: var(--cmp-ink);
  --bs-btn-bg: #fff;
  --bs-btn-hover-bg: var(--cmp-ink);
  --bs-btn-hover-color: #fff;
}
.cmp .btn.cmp-btn--sm {
  --bs-btn-padding-x: .9rem;
  --bs-btn-padding-y: .35rem;
  --bs-btn-font-size: 13px;
  min-height: 36px;
}

.cmp .breadcrumb {
  --bs-breadcrumb-divider: '›';
  --bs-breadcrumb-divider-color: var(--cmp-text-2);
  --bs-breadcrumb-item-active-color: var(--cmp-ink);
  font-size: 13px;
}
.cmp .breadcrumb a { color: var(--cmp-text-2); }
.cmp .breadcrumb a:hover { color: var(--cmp-orange-dark); }

/* --------------------------------------------------------------------------
   4. Badges, étoiles, barres de score
   -------------------------------------------------------------------------- */
.cmp-badge {
  display: inline-block;
  background: var(--cmp-orange);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1;
  padding: .45em .8em;
  border-radius: 999px;
  white-space: nowrap;
}

.cmp-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  background: var(--cmp-ink);
  color: #fff;
  font-family: var(--cmp-font-head);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

/* Étoiles : piste + calque orange superposé (demi-étoiles par largeur en %) */
.cmp-stars {
  position: relative;
  display: inline-block;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--cmp-star-track);
  white-space: nowrap;
  vertical-align: middle;
}
.cmp-stars__track { display: inline-block; }
.cmp-stars__fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--cmp-orange);
}
.cmp-stars--sm { font-size: 14px; }

.cmp-rating__value { font-family: var(--cmp-font-head); font-weight: 700; color: var(--cmp-ink); font-size: 15px; }
.cmp-rating__max   { font-weight: 400; color: var(--cmp-text-2); font-size: 12.5px; }

/* Barres de score */
.cmp-score + .cmp-score { margin-top: .65rem; }
.cmp-score__head  { font-size: 12.5px; margin-bottom: .3rem; }
.cmp-score__label { color: var(--cmp-text-2); }
.cmp-score__value { font-weight: 700; color: var(--cmp-ink); font-variant-numeric: tabular-nums; }
.cmp-score__track {
  height: 5px;
  border-radius: 999px;
  background: var(--cmp-track);
  overflow: hidden;
}
.cmp-score__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--cmp-green);
}

/* Placeholder photo */
.cmp-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cmp-ph-bg);
  color: var(--cmp-ph-text);
  font-size: 13px;
  letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.cmp-meta { font-size: 13.5px; color: var(--cmp-text-2); }
.cmp-meta__author { color: var(--cmp-ink); font-weight: 600; }
.cmp-meta__author:hover { color: var(--cmp-orange-dark); }
.cmp-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cmp-green);
  flex: 0 0 auto;
}
.cmp-avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.cmp-pick {
  width: 290px;
  max-width: 100%;
  background: var(--cmp-ink);
  color: #fff;
  border-radius: var(--cmp-radius);
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(20, 20, 20, .18);
}
.cmp-pick__photo {
  border-radius: 6px;
  overflow: hidden;
  background: var(--cmp-ph-bg);
}
.cmp-pick__photo { background: #fff; }
.cmp-pick__photo img { object-fit: contain; padding: 8px; }
.cmp-pick__name {
  font-family: var(--cmp-font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  color: #fff;
}
.cmp-pick__desc  { font-size: 13.5px; color: rgba(255, 255, 255, .72); line-height: 1.5; }
.cmp-pick__price { font-family: var(--cmp-font-head); font-weight: 700; font-size: 19px; color: #fff; white-space: nowrap; }
.cmp-pick__price small { font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, .65); margin-right: .15em; }

@media (max-width: 767.98px) {
  .cmp-pick { width: 100%; }
}

/* --------------------------------------------------------------------------
   6. Raccourcis
   -------------------------------------------------------------------------- */
.cmp .cmp-shortcut {
  border-top: 3px solid var(--cmp-orange);
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cmp .cmp-shortcut:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(26, 26, 26, .08);
}
.cmp-shortcut__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cmp-text-2);
}
.cmp-shortcut__name {
  font-family: var(--cmp-font-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cmp-ink);
}
.cmp-shortcut__why { font-size: 13.5px; line-height: 1.5; }

/* --------------------------------------------------------------------------
   7. Tableau comparatif
   -------------------------------------------------------------------------- */
.cmp .cmp-table {
  --bs-table-bg: #fff;
  --bs-table-border-color: var(--cmp-line);
  --bs-table-color: var(--cmp-text);
  font-size: 14px;
  margin-bottom: 0;
}
.cmp .cmp-table thead th {
  background: var(--cmp-ink);
  color: var(--cmp-orange-light);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  border: 0;
  padding: .85rem 1rem;
  white-space: nowrap;
}
.cmp .cmp-table tbody th,
.cmp .cmp-table tbody td {
  padding: .9rem 1rem;
  border-color: var(--cmp-line);
  vertical-align: middle;
}
.cmp .cmp-table tbody tr:last-child th,
.cmp .cmp-table tbody tr:last-child td { border-bottom: 0; }

.cmp .cmp-table__model { font-weight: 400; min-width: 220px; }
.cmp .cmp-table__model a { color: var(--cmp-ink); }
.cmp .cmp-table__model a:hover .cmp-table__name { color: var(--cmp-orange-dark); }
.cmp-table__name  { font-family: var(--cmp-font-head); font-weight: 700; font-size: 14.5px; line-height: 1.25; color: var(--cmp-ink); }
.cmp-table__sub   { font-size: 12px; color: var(--cmp-text-2); line-height: 1.3; }
.cmp-table__note  { font-weight: 700; color: var(--cmp-ink); font-variant-numeric: tabular-nums; }
.cmp-table__price { font-family: var(--cmp-font-head); font-weight: 700; font-size: 15px; color: var(--cmp-ink); white-space: nowrap; }
a.cmp-table__price:hover { color: var(--cmp-orange-dark); }

/* Mobile : défilement horizontal, colonne Modèle sticky sur fond blanc */
@media (max-width: 767.98px) {
  .cmp .cmp-table thead th:first-child,
  .cmp .cmp-table tbody th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 1px 0 0 var(--cmp-line);
  }
  .cmp .cmp-table tbody th:first-child { background: #fff; }
  .cmp .cmp-table thead th:first-child { background: var(--cmp-ink); }
  .cmp .cmp-table__model { min-width: 180px; max-width: 220px; }
}

/* --------------------------------------------------------------------------
   8. Fiche produit
   -------------------------------------------------------------------------- */
.cmp-fiche__media {
  flex: 0 0 320px;
  max-width: 320px;
  padding: 1rem;
  background: var(--cmp-cream-2);
  border-right: 1px solid var(--cmp-line);
}
/* Vignette 4:3, image entière (contain) sur fond blanc */
.cmp-fiche__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--cmp-line);
  border-radius: 6px;
  overflow: hidden;
}
.cmp-fiche__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  display: block;
}
.cmp-fiche__rank  { position: absolute; top: 12px; left: 12px; width: 34px; height: 34px; font-size: 15px; z-index: 1; }
.cmp-fiche__scores  { border-top: 1px solid var(--cmp-line); background: var(--cmp-cream-2); }
.cmp-fiche__details { border-top: 1px solid var(--cmp-line); }

.cmp-fiche__body { min-width: 0; }

.cmp-fiche__title {
  font-size: 19px;
  line-height: 1.2;
  margin-bottom: 0 !important;
}
.cmp-fiche__avis { font-size: 14.5px; line-height: 1.65; }

/* Specs */
.cmp-specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.cmp-specs th,
.cmp-specs td {
  padding: .5rem 0;
  border-bottom: 1px solid var(--cmp-line);
  vertical-align: top;
  text-align: left;
}
.cmp-specs th {
  font-weight: 400;
  font-size: 12.5px;
  color: var(--cmp-text-2);
  width: 42%;
  padding-right: 1rem;
}
.cmp-specs td { color: var(--cmp-ink); font-weight: 600; }
.cmp-specs tr:first-child th,
.cmp-specs tr:first-child td { padding-top: 0; }

/* On aime / on aime moins */
.cmp-proscons {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  font-size: 13.5px;
}
@media (min-width: 576px) {
  .cmp-proscons { grid-template-columns: 1fr 1fr; }
}
.cmp-proscons__col {
  border-radius: 6px;
  padding: .9rem 1rem;
}
.cmp-proscons__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .5rem;
}
.cmp-proscons li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  line-height: 1.45;
}
.cmp-proscons li + li { margin-top: .4rem; }
.cmp-proscons__icon { flex: 0 0 16px; margin-top: .15em; }

.cmp-pros { background: var(--cmp-pros-bg); color: var(--cmp-pros-text); }
.cmp-pros .cmp-proscons__icon { color: var(--cmp-green); }
.cmp-cons { background: var(--cmp-cons-bg); color: var(--cmp-cons-text); }
.cmp-cons .cmp-proscons__icon { color: var(--cmp-cons-icon); }

/* Offres marchands */
.cmp-offers__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--cmp-text-2);
  margin-bottom: .5rem;
}
.cmp-offer {
  border: 1px solid var(--cmp-line);
  border-radius: 6px;
  padding: .55rem .75rem;
  font-size: 13.5px;
}
.cmp-offer + .cmp-offer { margin-top: .5rem; }
.cmp-offer__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cmp-dot, var(--cmp-text-2));
  flex: 0 0 auto;
}
.cmp-offer__logo { width: 24px; height: 24px; object-fit: contain; flex: 0 0 auto; }
.cmp-offer__merchant { color: var(--cmp-ink); font-weight: 600; }
.cmp-offer__price { font-family: var(--cmp-font-head); font-weight: 700; color: var(--cmp-ink); white-space: nowrap; }

/* Tablette : sous-colonnes empilées (col-lg-6 → 100 %), photo réduite à 200 px */
@media (max-width: 991.98px) {
  .cmp-fiche__media { flex-basis: 260px; max-width: 260px; }
}

/* Mobile : pile verticale, photo 16:9 pleine largeur, cibles tactiles 44 px */
@media (max-width: 767.98px) {
  .cmp-fiche__media {
    flex-basis: auto;
    max-width: none;
    border-right: 0;
    border-bottom: 1px solid var(--cmp-line);
  }
  .cmp-fiche__photo { aspect-ratio: 16 / 9; }
  .cmp .cmp-offer .btn,
  .cmp .cmp-pick .btn { min-height: 44px; min-width: 44px; }
}

/* --------------------------------------------------------------------------
   9. Bandes de section
   -------------------------------------------------------------------------- */
.cmp-band--vert { background: var(--cmp-green); color: #fff; }
.cmp-band--noir { background: var(--cmp-ink); color: #fff; }

.cmp-criterion {
  background: #fff;
  border-radius: var(--cmp-radius);
  padding: 1.25rem;
  color: var(--cmp-text);
}
.cmp-criterion__num {
  display: block;
  font-family: var(--cmp-font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--cmp-orange);
  margin-bottom: .5rem;
}
.cmp-criterion__title { font-size: 16px; line-height: 1.25; }
.cmp-criterion__text  { font-size: 13.5px; line-height: 1.55; }

/* --------------------------------------------------------------------------
   10. Guide + FAQ
   -------------------------------------------------------------------------- */
.cmp-guide__block { border-left: 3px solid var(--cmp-orange); padding-left: 1rem; }
.cmp-guide__title { font-size: 17px; line-height: 1.25; }
.cmp-guide__text  { font-size: 14.5px; line-height: 1.65; }
.cmp-guide__text p:last-child { margin-bottom: 0; }
.cmp-guide__text a { color: var(--cmp-orange-dark); text-decoration: underline; }

.cmp-faq__item {
  background: #fff;
  border: 1px solid var(--cmp-line);
  border-radius: var(--cmp-radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--cmp-shadow);
}
.cmp-faq__q { font-size: 15px; line-height: 1.3; }
.cmp-faq__a { font-size: 13.5px; line-height: 1.6; }

/* Contenu libre (éditeur), si renseigné */
.cmp-prose { max-width: 780px; }

/* --------------------------------------------------------------------------
   11. Liens d'affiliation obfusqués (span[role=link], voir adb_obf_link)
   -------------------------------------------------------------------------- */
.cmp-obf { cursor: pointer; user-select: none; }
.cmp-obf:focus-visible { outline: 2px solid var(--cmp-orange); outline-offset: 2px; border-radius: 999px; }
.cmp-table__price.cmp-obf:hover { color: var(--cmp-orange-dark); }

/* --------------------------------------------------------------------------
   12. Home — bande « Nos comparatifs » (template-parts/home/comparatifs.php)
   -------------------------------------------------------------------------- */
/* Fond SVG (motif damier vert, tuile 61 px) fourni par le propriétaire */
.cmp-home {
  background-color: #134639;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='61' height='61' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='100' y1='33' x2='100' y2='-3'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='100' y1='135' x2='100' y2='97'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23073d30' %3E%3Crect x='100' width='100' height='100'/%3E%3Crect y='100' width='100' height='100'/%3E%3C/g%3E%3Cg fill-opacity='1'%3E%3Cpolygon fill='url(%23a)' points='100 30 0 0 200 0'/%3E%3Cpolygon fill='url(%23b)' points='100 100 0 130 0 100 200 100 200 130'/%3E%3C/g%3E%3C/svg%3E");
}

.cmp-home__intro {
  color: #D6E4DD;
  font-size: 15px;
  line-height: 1.55;
  max-width: 56ch;
}

.cmp-home__card { border-radius: var(--cmp-radius); }

/* Zone photo : fond crème, cadre blanc 4:3, image entière */
.cmp-home__media {
  position: relative;
  background: var(--cmp-cream);
  padding: 18px;
  border-bottom: 1px solid var(--cmp-line);
}
.cmp-home__frame {
  background: #fff;
  border: 1px solid var(--cmp-line);
  border-radius: 6px;
  overflow: hidden;
}
.cmp-home__frame img { object-fit: contain; padding: 8px; }

.cmp-home__count {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--cmp-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: .45em .7em;
  border-radius: 5px;
  white-space: nowrap;
}

.cmp-home__title { font-family: var(--cmp-font-head); font-size: 18px; line-height: 1.25; }
.cmp-home__title a { color: var(--cmp-ink) !important; }
.cmp-home__title a:hover { color: var(--cmp-orange-dark) !important; text-decoration: none; }

/* Encadré Notre n°1 / Budget */
.cmp-home__facts {
  background: var(--cmp-cream-2);
  border: 1px solid var(--cmp-line);
  border-radius: 6px;
  padding: .75rem .9rem;
}
.cmp-home__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--cmp-text-2);
}
.cmp-home__value { font-weight: 700; font-size: 13.5px; color: var(--cmp-ink); line-height: 1.3; }
.cmp-home__value--prix { white-space: nowrap; }
.cmp-home__sep { border: 0; border-top: 1px solid var(--cmp-line); opacity: 1; margin: .6rem 0; }

/* Bouton : cible tactile 44 px à toutes les tailles */
.cmp-home .btn.cmp-btn { min-height: 44px; --bs-btn-font-size: 13.5px; }

@media (max-width: 767.98px) {
  .cmp-home { padding-top: 36px !important; padding-bottom: 36px !important; }
}