/* =====================================================================
   Sapins.be — Branding sur Hummingbird (thème enfant sapins9)
   Chargé automatiquement par PS9 (theme-custom, priorité 1000).
   Cible visuelle : sapins.be actuel (rouge #AE0011, header rouge, logo blanc).
   ===================================================================== */

:root {
  --sapins-red: #AE0011;
  --sapins-red-dark: #8A000E;
  --sapins-nav-bg: #FFF5F4;       /* bande méga-menu rosé très pâle */
  --sapins-menu-active: #FFFD9E;  /* surbrillance item menu actif */

  /* Couleur primaire Bootstrap 5.3 -> rouge sapin */
  --bs-primary: #AE0011;
  --bs-primary-rgb: 174, 0, 17;
  --bs-primary-text-emphasis: #7A000C;
  --bs-link-color: #AE0011;
  --bs-link-color-rgb: 174, 0, 17;
  --bs-link-hover-color: #8A000E;
  --bs-link-hover-color-rgb: 138, 0, 14;
}

/* ---- Boutons primaires (Ajouter au panier, Contactez-nous, etc.) ---- */
.btn-primary {
  --bs-btn-bg: var(--sapins-red);
  --bs-btn-border-color: var(--sapins-red);
  --bs-btn-hover-bg: var(--sapins-red-dark);
  --bs-btn-hover-border-color: var(--sapins-red-dark);
  --bs-btn-active-bg: var(--sapins-red-dark);
  --bs-btn-active-border-color: var(--sapins-red-dark);
  --bs-btn-disabled-bg: var(--sapins-red);
  --bs-btn-disabled-border-color: var(--sapins-red);
}

/* ---- Boutons secondaires à contour (Continuer mes achats, Voir détails) ---- */
/*
 * Bootstrap peint « outline-primary » en bleu (#0B69F6). Sa variante pleine
 * était déjà passée au rouge juste au-dessus, mais pas celle-ci : d'où des
 * boutons bleus au milieu d'une charte rouge, sur le panier et sous les
 * miniatures produit.
 *
 * On passe par les variables Bootstrap plutôt que par des couleurs en dur :
 * les états survol, focus et actif suivent alors d'eux-mêmes.
 */
.btn-outline-primary {
  --bs-btn-color: var(--sapins-red);
  --bs-btn-border-color: var(--sapins-red);
  --bs-btn-hover-bg: var(--sapins-red);
  --bs-btn-hover-border-color: var(--sapins-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--sapins-red-dark);
  --bs-btn-active-border-color: var(--sapins-red-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: var(--sapins-red);
  --bs-btn-disabled-border-color: var(--sapins-red);
}

/* Le halo de focus reprend la teinte de la charte. */
.btn-outline-primary:focus-visible,
.btn-primary:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(174, 0, 17, .25);
}

/* =====================================================================
   HEADER — bandeau rouge, contenu blanc (comme sapins.be)
   ===================================================================== */
/* Barres rouges : header-top + header-bottom (PAS la zone du méga-menu) */
.header-top,
.header-bottom,
.header .header-bottom__container,
.header .header-bottom__row {
  background-color: var(--sapins-red) !important;
}

/* ⚠️ Texte blanc UNIQUEMENT dans les barres haut/bas + blocs (icônes compte/panier).
   NE PAS cibler ".header a" globalement : le méga-menu est dans .header et deviendrait illisible. */
.header-top,
.header-top a,
.header-bottom,
.header-bottom a,
.header-bottom__logo a,
.header .header-block,
.header .header-block a,
.header .material-icons,
.header .header-block__icon {
  color: #fff !important;
}
.header-top a:hover,
.header-bottom a:hover,
.header .header-block a:hover { color: #ffe9ea !important; }

/* Logo : basculer sur la version blanche (le logo configuré est foncé) */
.header-bottom__logo .logo,
.header-bottom__logo img {
  content: url('/img/cms/Logo/Logosapinsblc-2x.png');
  max-height: 60px;
  width: auto;
}

/* Champ de recherche : fond blanc lisible sur le rouge */
.header .ps-search-bar input,
.header input[type="text"],
.header input[type="search"] {
  background: #fff;
  color: #232323;
  border-color: #fff;
}

/* Grande zone de recherche (façon sapins.be / ancien CE) */
#_desktop_ps_searchbar { flex: 1 1 auto; }
#_desktop_ps_searchbar #ps_searchbar,
#_desktop_ps_searchbar .ps-searchbar { width: 100%; max-width: none; }
.header .ps-searchbar__form { width: 100%; }
.header .ps-searchbar__input {
  height: 46px;
  border-radius: 24px;
  padding: 0 1rem 0 2.75rem;
  font-size: 1rem;
  width: 100%;
}
.header .ps-searchbar__magnifier { left: .9rem; color: var(--sapins-red); }

/* Badge panier : pastille blanche, chiffre rouge */
.header-block__badge {
  background: #fff !important;
  color: var(--sapins-red) !important;
}

/* Panier : icône + badge seuls. Le libellé « Panier » est masqué VISUELLEMENT
   mais conservé pour les lecteurs d'écran (accessibilité). */
.header .blockcart .header-block__title {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* Bloc « Une question ? Besoin d'aide ? » (header-top gauche) */
.header-help-link {
  color: #fff !important;
  text-decoration: none;
  gap: .5rem;
  line-height: 1.15;
}
.header-help-link .material-icons { font-size: 26px; }
.header-help-link__text { font-size: .82rem; }
.header-help-link strong { font-weight: 700; }
.header-help-link:hover { color: #ffe9ea !important; }

/* =====================================================================
   MENU PRINCIPAL — bande rosé pâle sous le header (méga-menu à venir)
   ===================================================================== */
.header .main-menu,
#_desktop_top_menu,
.js-top-menu {
  background: var(--sapins-nav-bg);
}
.header .main-menu a,
#_desktop_top_menu a { color: #232323; }
.header .main-menu .current a,
#_desktop_top_menu .current > a { background: var(--sapins-menu-active); }

/* =====================================================================
   FIL D'ARIANE — caché sur la page d'accueil (comme l'ancien site)
   ===================================================================== */
body#index .breadcrumb__wrapper,
body.page-index .breadcrumb__wrapper,
body.page-index .breadcrumb { display: none !important; }

/* Fond BLANC (Hummingbird mettait --bs-tertiary-bg, un gris qui jurait avec le reste) */
.breadcrumb__wrapper {
  background-color: #fff !important;
  border-bottom: 1px solid #f0eeee;
  margin-bottom: 1.5rem;
}
.breadcrumb { padding: .85rem 0; gap: 0; align-items: center; }

/* Séparateurs : chevrons « › » à la place du slash Bootstrap */
.breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  font-family: 'Material Icons';
  content: '\e5cc';                 /* chevron_right */
  font-size: 18px;
  line-height: 1;
  color: #b9b9b9;
  padding: 0 .35rem;
  float: none;
  display: inline-flex;
  vertical-align: middle;
}

/* Liens cliquables en rouge ; dernier niveau (page courante) en gris */
.breadcrumb .breadcrumb-link,
.breadcrumb .breadcrumb-link span { color: var(--sapins-red); text-decoration: none; font-weight: 600; }
.breadcrumb .breadcrumb-link:hover span { text-decoration: underline; }
.breadcrumb .breadcrumb-item:last-child > span { color: #8a8a8a; font-weight: 400; }

/* Alignement vertical : tous les éléments (icône, textes, chevrons) centrés sur la même ligne.
   Sans ça, l'icône maison — plus haute que la ligne de texte — décalait « Accueil » vers le haut. */
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-link { display: inline-flex; align-items: center; }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before { align-self: center; }

/* Icône maison du premier niveau (16px : plus discrète, et sous la hauteur de ligne du texte,
   donc sans effet sur l'alignement) */
.breadcrumb-home-icon {
  font-size: 16px;
  line-height: 1;
  margin-right: .35rem;
}

/* =====================================================================
   FOOTER — le contenu est rendu par le module sapinsfooter (.smf*).
   Ici : bande newsletter (ps_emailsubscription) sombre + masquage du crédit PS natif.
   ===================================================================== */

/* Bande newsletter (haut du footer) : fond sombre, texte clair */
.footer__before {
  background: #1c1c1c !important;
  color: #fff;
  padding: 1.75rem 0;
}
.footer__before div,
.footer__before section,
.footer__before .block-newsletter,
.footer__before .bg-body-tertiary,
.footer__before .ps-emailsubscription { background-color: transparent !important; background-image: none !important; }
.footer__before,
.footer__before h1, .footer__before h2, .footer__before h3, .footer__before h4,
.footer__before p, .footer__before label, .footer__before a,
.footer__before .h3 { color: #fff !important; }
.footer__before input[type="email"],
.footer__before .form-control { background: #fff !important; color: #232323 !important; }
.footer__before .btn { background: var(--sapins-red) !important; border-color: var(--sapins-red) !important; color: #fff !important; }

/* Masquer le crédit PrestaShop natif (« Logiciel e-commerce par PrestaShop ») — doublon */
.footer .copyright,
.footer__copyright,
.copyright { display: none !important; }

.footer__main { background: #fff; padding: 0; }

/* =====================================================================
   HEADER SUR UNE LIGNE (façon sapins.be) — remplace header-top/bottom
   ===================================================================== */
.header-oneline { background: var(--sapins-red) !important; }
/* Largeur alignée sur le méga-menu (.container-xxl = 1320px, standard Bootstrap 5.3.3) */
.header-oneline__container { max-width: 1320px; margin: 0 auto; padding: 0 1rem; }
.header-oneline__row { display: flex; align-items: center; gap: 1rem; min-height: 84px; flex-wrap: wrap; }

/* Texte/icônes blancs DANS le header une-ligne (le méga-menu est hors de .header-oneline) */
.header-oneline,
.header-oneline a,
.header-oneline .material-icons,
.header-oneline .header-block,
.header-oneline .header-block a,
.header-oneline .header-block__title { color: #fff !important; }
.header-oneline a:hover { color: #ffe9ea !important; }
/* Items du menu déroulant compte (fond blanc) : texte sombre/rouge, pas blanc */
.header-oneline .dropdown-menu .dropdown-item { color: #232323 !important; }
.header-oneline .dropdown-menu .dropdown-item:hover,
.header-oneline .dropdown-menu .dropdown-item.active { color: var(--sapins-red) !important; }
/* Icônes des items du menu compte : suivent la couleur du texte (visibles, rouges au survol/actif) */
.header-oneline .dropdown-menu .dropdown-item .material-icons,
.header-oneline .dropdown-menu .dropdown-item i { color: inherit !important; }
/* Caret (chevron Bootstrap ::after) des toggles du header : blanc comme le texte */
.header-oneline .dropdown-toggle::after { border-top-color: #fff !important; color: #fff !important; }

/* Logo (version blanche) */
.header-oneline__logo { flex: 0 0 auto; }
.header-oneline__logo .logo,
.header-oneline__logo img { content: url('/img/cms/Logo/Logosapinsblc-2x.png'); max-height: 56px; width: auto; }

/* Recherche : grande, remplit l'espace du milieu (pousse le groupe droite au bord du container).
   margin latéral pour ne pas coller au logo (gauche) ni à « Une question ? » (droite). */
.header-oneline__search { flex: 1 1 auto; max-width: none; min-width: 260px; margin: 0 1.75rem; }
.header-oneline__search #_desktop_ps_searchbar,
.header-oneline__search .ps-searchbar { width: 100%; max-width: none; }
.header-oneline .ps-searchbar__form { width: 100%; }
.header-oneline .ps-searchbar__input { height: 46px; border-radius: 8px; width: 100%; padding: 0 1rem 0 2.75rem; background: #fff; color: #232323; }
/* Loupe : grise et visible (sinon forcée blanche par la règle .material-icons du header) */
.header-oneline .ps-searchbar__magnifier,
.header-oneline i.ps-searchbar__magnifier { left: .9rem; color: #666 !important; }

/* « Une question ? » */
.header-help-link { flex: 0 0 auto; gap: .5rem; line-height: 1.15; text-decoration: none; }
.header-help-link .material-icons { font-size: 26px; }
.header-help-link__text { font-size: .82rem; }

/* Séparateur vertical blanc COURT (pas toute la hauteur) — entre « Une question ? » et la langue.
   margin négatif léger : le row a déjà un gap de 1rem ; on compense partiellement pour un écart doux (~12px). */
.header-sep { width: 2px; height: 22px; align-self: center; min-height: 0; background: rgba(255,255,255,.85); border-radius: 1px; margin: 0 -0.25rem; }

/* Langue + connexion + panier */
.header-oneline__nav { flex: 0 0 auto; gap: 1rem; }
/* 2e séparateur court/blanc — entre la langue et la connexion (dans la gouttière du nav) */
.header-oneline__nav .ps-lang { position: relative; }
.header-oneline__nav .ps-lang::after {
  content: ''; position: absolute; right: -.5rem; top: 50%; transform: translateY(-50%);
  width: 2px; height: 22px; background: rgba(255,255,255,.85); border-radius: 1px;
}
.header-oneline #_desktop_ps_currencyselector,
.header-oneline .ps-currencyselector { display: none !important; }

/* Dropdown langue (Bootstrap) */
.ps-lang__toggle { color: #fff !important; font-weight: 600; text-decoration: none; padding: .25rem .4rem; }
/* Langue sélectionnée : fond rouge + texte BLANC (même au survol, pas de rouge sur rouge).
   Sélecteurs préfixés .header-oneline pour battre la règle générale des dropdown-item.active. */
.header-oneline .ps-lang__menu .dropdown-item.active,
.header-oneline .ps-lang__menu .dropdown-item.active:hover,
.header-oneline .ps-lang__menu .dropdown-item:active { background: var(--sapins-red) !important; color: #fff !important; }
/* Langues non sélectionnées au survol : fond clair + texte rouge (lisible) */
.header-oneline .ps-lang__menu .dropdown-item:hover:not(.active) { background: #f6eeee !important; color: var(--sapins-red) !important; }

/* Burger (mobile) */
.header-burger { background: transparent; border: 0; color: #fff; padding: .25rem; cursor: pointer; }
.header-burger .material-icons { font-size: 28px; }

/* Mobile (< lg) : loupe native (ouvre l'offcanvas de recherche), langue + compte + panier ; logo pousse le reste à droite */
@media (max-width: 991.98px) {
  .header-oneline__row { min-height: 64px; gap: .5rem; flex-wrap: wrap; }
  .header-oneline__logo { margin-right: auto; }
  /* Par défaut la recherche = juste la loupe (le champ apparaît au clic) */
  .header-oneline__search { flex: 0 0 auto; max-width: none; min-width: 0; margin: 0; padding: 0; }
  .header-oneline__search .ps-searchbar.js-search-widget { display: none !important; }   /* champ desktop masqué */
  .header-oneline__search .ps-searchbar--mobile { display: flex !important; }             /* loupe visible */
  .header-oneline__search .ps-searchbar--mobile .material-icons,
  .header-oneline__search .ps-searchbar--mobile .ps-searchbar__magnifier { color: #fff !important; font-size: 26px; }
  /* Nav compact (langue · compte · panier) */
  .header-oneline__nav { gap: .5rem; }
  /* Séparateurs un peu plus courts en mobile */
  .header-sep { height: 20px; margin: 0 .15rem; }
}
@media (min-width: 992px) {
  .header-burger { display: none !important; }
}

/* =====================================================================
   FICHE PRODUIT — sections empilées + barre de boutons-ancres
   (remplace les onglets/accordéon repliés). Voir themes/sapins9/templates/catalog/product.tpl
   ===================================================================== */

/* Barre de boutons-ancres au-dessus des sections */
.product-anchors {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1.5rem 0 1.25rem; padding-bottom: .85rem;
  border-bottom: 2px solid #eee;
}
.product-anchors__btn {
  display: inline-block; padding: .5rem 1.1rem;
  border: 1px solid var(--sapins-red); border-radius: 24px;
  color: var(--sapins-red); font-weight: 600; font-size: .9rem;
  text-decoration: none; transition: background .15s ease, color .15s ease;
}
.product-anchors__btn:hover,
.product-anchors__btn.is-active { background: var(--sapins-red); color: #fff; }

/* Toutes les sections OUVERTES et empilées (Bootstrap JS absent + rendu voulu) */
.product__accordion .accordion-collapse {
  display: block !important; height: auto !important; visibility: visible !important;
}
.product__accordion .accordion-button {
  cursor: default; pointer-events: none;
  background: transparent !important; box-shadow: none !important;
  padding-left: 0; padding-right: 0; font-size: 1.25rem; font-weight: 700; color: #232323;
}
.product__accordion .accordion-button::after { display: none !important; }  /* chevron retiré */
.product__accordion .accordion-body { padding-left: 0; padding-right: 0; }
.product__accordion .accordion-item { border: 0; border-top: 1px solid #eee; }
.product__accordion .accordion-item:first-child { border-top: 0; }

/* Décalage des ancres sous le header sticky (~84px) */
.product__accordion .accordion-item[id] { scroll-margin-top: 110px; }
html { scroll-behavior: smooth; }

/* =====================================================================
   FICHE PRODUIT — colonne de droite réorganisée façon prod
   Ordre : nom · étoiles · description courte · caractéristiques · prix ·
           déclinaisons · ajout panier · réassurance · partage · fidélité ·
           paiement + livraison.
   L'ordre du PRIX est obtenu ici en CSS (`order`) et non en déplaçant le DOM :
   le rafraîchissement AJAX au changement de déclinaison reste intact.
   ===================================================================== */
.product__right { display: flex; flex-direction: column; }
.product__right > * { order: 7; }                                  /* défaut (customisation, etc.) */
.product__right > .product__name { order: 1; }
.product__right > .sapins-rating { order: 2; }
.product__right > .product__manufacturer { order: 3; }
.product__right > .product__description-short { order: 4; }
.product__right > .product__features-top { order: 5; }
.product__right > .product__prices { order: 6; }
.product__right > .product__actions { order: 8; }

/* Le prix, mis en avant juste au-dessus des déclinaisons : centré, en rouge sapin,
   avec un peu d'air au-dessus et en dessous pour le détacher des caractéristiques. */
.product__right > .product__prices {
  margin: 1.5rem 0 1.6rem;
  text-align: center;
}
.product__right > .product__prices .product__prices-inline { justify-content: center; }
.product__right > .product__prices .product__price {
  color: var(--sapins-red);
  line-height: 1.1;
}
/* « TTC » rapproché du prix */
.product__right > .product__prices .product__tax-infos {
  margin-top: 0;
  line-height: 1.1;
}

/* ---- Caractéristiques remontées sous la description courte ---- */
.product__features-top { margin: .25rem 0 .5rem; }
.product__features-list { list-style: none; margin: 0; padding: 0; }
.product__features-item {
  display: grid;
  grid-template-columns: 40% minmax(0, 1fr);
  gap: .75rem;
  padding: .22rem 0;      /* sans filets de séparation : lignes simplement aérées */
  font-size: .95rem;
}
.product__features-name { font-weight: 700; color: #232323; }
.product__features-value { color: #4a4a4a; }
/* Au-delà de 10 lignes : masquées tant que « Voir plus » n'a pas été cliqué */
.product__features-top:not(.is-expanded) .product__features-item.is-extra { display: none; }
.product__features-toggle {
  background: none; border: 0; padding: .5rem 0; cursor: pointer;
  color: var(--sapins-red); font-weight: 700; font-size: .9rem;
}
.product__features-toggle:hover { text-decoration: underline; }

/* ---- Référence sous les images (suit la déclinaison) ---- */
.product__ref-under-images {
  margin: 1rem 0 .25rem;
  font-size: .9rem;
  color: #6b6b6b;
}
.product__ref-under-images.is-empty { display: none; }
.product__ref-label { font-weight: 700; color: #232323; margin-right: .4rem; }

/* ---- Réassurance remontée sous le bouton d'ajout au panier ---- */
.product__reassurance-inline { margin-top: 1.35rem; }
/* Icônes en gris : ce sont des SVG multicolores injectés par blockreassurance,
   la désaturation est le moyen le plus simple de les neutraliser. */
.product__reassurance-inline .reassurance__image svg,
.product__reassurance-inline .reassurance__image img { filter: grayscale(100%); }
/* Le bas de page n'a plus de colonne droite : les sections prennent toute la largeur */
.product__bottom { grid-template-columns: 1fr; }
.product__bottom-right { display: none; }

/* ---- Rappel moyens de paiement / méthodes de livraison ---- */
.product__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #eee;
}
.product__trust-col { flex: 1 1 200px; min-width: 0; }
.product__trust-title {
  display: block;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #232323;
  margin-bottom: .45rem;
}
.product__trust-col img { max-width: 100%; height: auto; display: block; }

/* ---- Barre d'ajout au panier collante (colonne de droite dépassée) ---- */
.product-sticky-cart {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1020;                 /* sous le header collant (1021), au-dessus du contenu */
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  box-shadow: 0 3px 16px rgba(0, 0, 0, .14);
}
.product-sticky-cart[hidden] { display: none !important; }
.product-sticky-cart__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: .55rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.product-sticky-cart__img { width: 46px; height: 46px; object-fit: contain; flex: 0 0 auto; }
.product-sticky-cart__name {
  font-weight: 700; color: #232323; flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.product-sticky-cart__price { font-weight: 700; font-size: 1.15rem; color: var(--sapins-red); white-space: nowrap; }
.product-sticky-cart__btn { white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; }

@media (max-width: 767.98px) {
  .product-sticky-cart__img,
  .product-sticky-cart__name { display: none; }
  .product-sticky-cart__inner { gap: .75rem; }
  .product-sticky-cart__btn { flex: 1 1 auto; justify-content: center; }
  .product__features-item { grid-template-columns: 1fr; gap: .1rem; }
}

/* ---- Logos des moyens de paiement -------------------------------------- */
/*
 * Le thème rend <img class="img-fluid" src="{$option.logo}"> sans contrainte :
 * chaque module fournit son image à sa taille native, et elles n'ont aucune
 * raison de se ressembler — 460×230 pour Mollie, 349×186 pour Pluxee. Les
 * options du tunnel faisaient donc 26, 256 et 188 px de haut.
 *
 * La règle vit ici, dans le thème, et non dans un module : elle s'applique à
 * tout moyen de paiement, présent ou futur, et survit à leurs mises à jour.
 * `contain` préserve les proportions — un logo de paiement déformé se
 * remarque.
 */
.payment-option .payment-option__label,
.payment-option label {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 2.5rem;
  margin-bottom: 0;
}

.payment-option .payment-option__label img,
.payment-option label img {
  height: 1.75rem;
  width: auto;
  max-width: 7.5rem;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
}

/* Sans logo, l'intitulé doit s'aligner sur les autres plutôt que de sauter. */
.payment-option .payment-option__form-check,
.payment-option .form-check {
  display: flex;
  align-items: center;
  gap: .625rem;
}

/* Quelques modules glissent leur propre image dans le libellé additionnel. */
.payment-option .payment-option__additional-information img,
.additional-information img {
  max-height: 1.75rem;
  width: auto;
  object-fit: contain;
}

@media (max-width: 575.98px) {
  .payment-option .payment-option__label img,
  .payment-option label img {
    height: 1.5rem;
    max-width: 5.5rem;
  }
}