/*
 * Custom CSS — Thème enfant PrestaShop 9 / Hummingbird
 * Identité principale : #09A956
 *
 * Dépôt conseillé :
 * /themes/NOM_DU_THEME_ENFANT/assets/css/custom.css
 *
 * Cette feuille reste volontairement légère :
 * - aucune modification de structure ;
 * - très peu de !important ;
 * - effets discrets ;
 * - responsive et accessibilité conservés.
 */

/* ========================================================================== 
   1. Variables de marque
   ========================================================================== */

:root,
[data-bs-theme="light"] {
  --brand-primary: #09a956;
  --brand-primary-rgb: 9, 169, 86;

  --brand-primary-dark: #06723c;
  --brand-primary-darker: #055b31;
  --brand-primary-light: #dff6e9;
  --brand-primary-subtle: #eefbf4;
  --brand-primary-contrast: #052e16;

  --brand-text: #202723;
  --brand-muted: #6c746f;
  --brand-border: #e1e7e3;
  --brand-surface: #ffffff;
  --brand-background: #f6f8f7;
  --brand-footer: #18221d;

  --brand-radius-sm: 6px;
  --brand-radius: 10px;
  --brand-radius-lg: 14px;

  --brand-shadow-sm: 0 3px 12px rgba(24, 16, 15, 0.05);
  --brand-shadow: 0 10px 26px rgba(22, 42, 31, 0.09);
  --brand-shadow-green: 0 7px 18px rgba(9, 169, 86, 0.22);

  --brand-transition: 180ms ease;

  /* Bootstrap */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-body-color: var(--brand-text);
  --bs-body-bg: var(--brand-background);
  --bs-border-color: var(--brand-border);
  --bs-link-color: var(--brand-primary-dark);
  --bs-link-hover-color: var(--brand-primary-darker);
  --bs-focus-ring-color: rgba(var(--brand-primary-rgb), 0.25);
}

/* ========================================================================== 
   2. Base générale
   ========================================================================== */

html {
  accent-color: var(--brand-primary);
  scroll-behavior: smooth;
}

body {
  color: var(--brand-text);
  background-color: var(--brand-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--brand-primary-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition:
    color var(--brand-transition),
    opacity var(--brand-transition);
}

a:hover,
a:focus {
  color: var(--brand-primary-darker);
}

::selection {
  color: var(--brand-primary-contrast);
  background-color: rgba(var(--brand-primary-rgb), 0.3);
}

h1,
h2,
h3,
h4,
h5,
h6 {

  letter-spacing: -0.015em;
}

#wrapper,
main {
  background: transparent;
}

/* ========================================================================== 
   3. Header
   ========================================================================== */

#header,
header {
  position: relative;
  z-index: 20;
  background-color: var(--brand-surface);
  border-bottom: 1px solid var(--brand-border);
  box-shadow: var(--brand-shadow-sm);
}

#header .header-nav,
#header .header-top,
header .header-nav,
header .header-top {
  background-color: var(--brand-surface);
}

#header .logo,
header .logo {
  transition:
    transform var(--brand-transition),
    opacity var(--brand-transition);
}

#header .logo:hover,
header .logo:hover {
  opacity: 0.94;
  transform: scale(1.015);
}

/* Compteurs panier / compte / favoris */
.cart-products-count,
.wishlist-count,
.user-info .badge,
#header .badge {
  min-width: 1.35rem;
  min-height: 1.35rem;
  color: var(--brand-primary-contrast);
  font-weight: 700;
  background-color: var(--brand-primary);
  border-radius: 999px;
}

/* ========================================================================== 
   4. Navigation principale
   ========================================================================== */

.top-menu > li > a,
.main-menu > li > a,
#header .menu a {
  position: relative;
  font-weight: 600;
  color: var(--brand-text);
  transition:
    color var(--brand-transition),
    background-color var(--brand-transition);
}

.top-menu > li > a::after,
.main-menu > li > a::after {
  position: absolute;
  right: 0.6rem;
  bottom: 0.2rem;
  left: 0.6rem;
  height: 2px;
  content: "";
  background-color: var(--brand-primary);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--brand-transition);
}

.top-menu > li > a:hover,
.top-menu > li > a:focus,
.main-menu > li > a:hover,
.main-menu > li > a:focus,
#header .menu a:hover,
#header .menu a:focus {
  color: var(--brand-primary-dark);
}

.top-menu > li > a:hover::after,
.top-menu > li > a:focus::after,
.main-menu > li > a:hover::after,
.main-menu > li > a:focus::after {
  transform: scaleX(1);
}

.dropdown-menu,
.popover {
  border-color: var(--brand-border);
  border-radius: var(--brand-radius);
  box-shadow: var(--brand-shadow);
}

.dropdown-item {
  border-radius: var(--brand-radius-sm);
  transition:
    color var(--brand-transition),
    background-color var(--brand-transition);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--brand-primary-dark);
  background-color: var(--brand-primary-subtle);
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--brand-primary-contrast);
  background-color: var(--brand-primary);
}

/* ========================================================================== 
   5. Boutons
   ========================================================================== */

.btn {
  min-height: 42px;
  padding-inline: 1rem;
  font-weight: 650;
  border-radius: var(--brand-radius-sm);
  transition:
    color var(--brand-transition),
    background-color var(--brand-transition),
    border-color var(--brand-transition),
    box-shadow var(--brand-transition),
    transform var(--brand-transition);
}

/* Animation des boutons, sauf Aperçu rapide Hummingbird */
.btn:not(.js-quickview):hover {
  transform: translateY(-1px);
}

.btn:not(.js-quickview):active {
  transform: translateY(0);
}

/* Boutons principaux : texte blanc dans tous les états */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary-dark);
  --bs-btn-hover-border-color: var(--brand-primary-dark);

  --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-primary-darker);
  --bs-btn-active-border-color: var(--brand-primary-darker);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);

  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  box-shadow: var(--brand-shadow-green);
}

/* Boutons outline : verts au repos, texte blanc au survol et au clic */
.btn-outline-primary {
  --bs-btn-color: var(--brand-primary-dark);
  --bs-btn-border-color: var(--brand-primary);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);

  --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-primary-dark);
  --bs-btn-active-border-color: var(--brand-primary-dark);

  color: var(--brand-primary-dark);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
}

.add-to-cart,
.product-add-to-cart .btn,
.cart-grid .btn-primary,
.checkout .btn-primary {
  border-radius: var(--brand-radius-sm);
}

/* ========================================================================== 
   6. Formulaires
   ========================================================================== */

.form-control,
.form-select,
.input-group-text,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"] {
  border-color: var(--brand-border);
  border-radius: var(--brand-radius-sm);
  transition:
    border-color var(--brand-transition),
    box-shadow var(--brand-transition),
    background-color var(--brand-transition);
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"] {
  min-height: 44px;
}

.form-control:hover,
.form-select:hover,
textarea:hover,
input:hover {
  border-color: #c9d3cd;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.22rem rgba(var(--brand-primary-rgb), 0.18);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* ========================================================================== 
   7. Titres et sections
   ========================================================================== */

.products-section-title,
.featured-products .products-section-title,
.product-accessories .products-section-title,
.block-category h1,
.page-header h1 {
  position: relative;
  margin-bottom: 1.5rem;
  padding-bottom: 0.7rem;
}

.products-section-title::after,
.featured-products .products-section-title::after,
.product-accessories .products-section-title::after,
.block-category h1::after,
.page-header h1::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 3px;
  content: "";
  background-color: var(--brand-primary);
  border-radius: 999px;
}

/* ========================================================================== 
   8. Cartes produits
   ========================================================================== */

.product-miniature,
.product-miniature .thumbnail-container,
.product-card {
  border-radius: var(--brand-radius-lg);
}

.product-miniature {
  height: 100%;
  overflow: hidden;
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
  box-shadow: 0 2px 8px rgba(22, 42, 31, 0.035);
  transition:
    transform var(--brand-transition),
    border-color var(--brand-transition),
    box-shadow var(--brand-transition);
}

.product-miniature:hover {
  border-color: rgba(var(--brand-primary-rgb), 0.34);
  box-shadow: var(--brand-shadow);
}

.product-miniature .thumbnail-container {
  overflow: hidden;
  background-color: var(--brand-surface);
}

.product-miniature img,
.product-cover img {
  transition:
    transform 260ms ease,
    opacity var(--brand-transition);
}

.product-miniature:hover img {
  transform: scale(1.025);
}

.product-miniature .product-description,
.product-miniature .product-description-short,
.product-card .card-body {
  padding: 1rem;
}

.product-miniature .product-title,
.product-miniature .product-title a,
.product-card .card-title {
  color: var(--brand-text);
  font-weight: 650;
  line-height: 1.35;
}

.product-miniature .product-title a:hover,
.product-card .card-title a:hover {
  color: var(--brand-primary-dark);
}

/* ========================================================================== 
   9. Prix et promotions
   ========================================================================== */

.product-price,
.current-price,
.product-price-and-shipping .price,
.product-prices .current-price {
  color: var(--brand-primary-dark);
  font-weight: 750;
}

.product-miniature .product-price-and-shipping {
  margin-top: 0.55rem;
}

.current-price,
.product-price-and-shipping .price {
  font-size: 1.18rem;
}

.regular-price,
.product-prices .regular-price {
  color: var(--brand-muted);
  font-weight: 500;
}

.discount,
.discount-percentage,
.discount-amount,
.product-flag.discount,
.product-flag.on-sale,
.product-flag.new,
.product-flags .product-flag {
  color: var(--brand-primary-contrast);
  font-weight: 750;
  background-color: var(--brand-primary);
  border-radius: var(--brand-radius-sm);
  box-shadow: none;
}

/* ========================================================================== 
   10. Fiche produit
   ========================================================================== */

.product-cover,
.product-images > li.thumb-container,
.product-information,
.product-actions {
  border-radius: var(--brand-radius);
}

.product-cover {
  overflow: hidden;
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
}

.product-images > li.thumb-container .thumb {
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-sm);
  transition:
    border-color var(--brand-transition),
    box-shadow var(--brand-transition);
}

.product-images > li.thumb-container .thumb.selected,
.product-images > li.thumb-container .thumb:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px rgba(var(--brand-primary-rgb), 0.12);
}

.product-quantity .qty,
.product-quantity .add {
  margin-bottom: 0.5rem;
}

.product-actions {
  padding: 1rem;
  background-color: var(--brand-primary-subtle);
  border: 1px solid rgba(var(--brand-primary-rgb), 0.15);
}

/* ========================================================================== 
   11. Blocs, cartes, panier et compte client
   ========================================================================== */

.card,
.block,
.cart-grid-body,
.cart-grid-right,
.checkout-step,
.page-customer-account #content,
.page-addresses .address,
.page-order-detail .box {
  background-color: var(--brand-surface);
  border-color: var(--brand-border);
  border-radius: var(--brand-radius);
  box-shadow: var(--brand-shadow-sm);
}


/* Espace intérieur des formulaires du compte client */
.page-customer-account #content {
  padding: clamp(1.25rem, 3vw, 2rem);
}

.page-customer-account #content hr {
  margin-block: 1.5rem;
}

.card-header,
.card-footer {
  border-color: var(--brand-border);
}

.list-group-item {
  border-color: var(--brand-border);
}

.list-group-item.active {
  color: var(--brand-primary-contrast);
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.alert-primary {
  --bs-alert-color: var(--brand-primary-contrast);
  --bs-alert-bg: var(--brand-primary-subtle);
  --bs-alert-border-color: rgba(var(--brand-primary-rgb), 0.25);
  --bs-alert-link-color: var(--brand-primary-dark);
}

.progress {
  --bs-progress-bar-bg: var(--brand-primary);
  border-radius: 999px;
}

/* ========================================================================== 
   12. Pagination, onglets et accordéons
   ========================================================================== */

.pagination {
  --bs-pagination-color: var(--brand-primary-dark);
  --bs-pagination-hover-color: var(--brand-primary-darker);
  --bs-pagination-hover-bg: var(--brand-primary-subtle);
  --bs-pagination-focus-color: var(--brand-primary-darker);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.18);

  --bs-pagination-active-color: var(--brand-primary-contrast);
  --bs-pagination-active-bg: var(--brand-primary);
  --bs-pagination-active-border-color: var(--brand-primary);
}

.page-link {
  border-color: var(--brand-border);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--brand-primary-contrast);
  background-color: var(--brand-primary);
}

.nav-tabs {
  border-color: var(--brand-border);
}

.nav-tabs .nav-link {
  color: var(--brand-muted);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: var(--brand-primary-dark);
  border-color: transparent transparent var(--brand-primary);
}

.nav-tabs .nav-link.active {
  color: var(--brand-primary-dark);
  font-weight: 700;
  border-color: transparent transparent var(--brand-primary);
  border-bottom-width: 2px;
}

.accordion {
  --bs-accordion-active-color: var(--brand-primary-dark);
  --bs-accordion-active-bg: var(--brand-primary-subtle);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.16);
}

/* ========================================================================== 
   13. Footer Hummingbird
   ========================================================================== */

/*
 * Important : ne pas cibler la balise HTML "footer" toute seule.
 * PrestaShop l'utilise aussi à l'intérieur de certains formulaires.
 */
#footer {
  border-top: 4px solid var(--brand-primary);
}

#footer .footer__main {
  color: #dce5df;
  background: var(--brand-footer) !important;
}

/* Les conteneurs internes restent transparents. */
#footer .footer__main .container {
  background: transparent;
}

#footer .footer__main h1,
#footer .footer__main h2,
#footer .footer__main h3,
#footer .footer__main h4,
#footer .footer__main h5,
#footer .footer__main h6 {
  color: #fff;
}

#footer .footer__main a {
  color: #dce5df;
}

#footer .footer__main a:hover,
#footer .footer__main a:focus {
  color: #69d99f;
}

#footer .footer__main .block-contact,
#footer .footer__main .block_newsletter {
  border-color: rgba(255, 255, 255, 0.12);
}

/* Partie basse du footer, lorsqu'elle est présente. */
#footer .footer__bottom {
  color: #dce5df;
  background: var(--brand-footer);
}

#footer .footer__bottom a {
  color: #dce5df;
}

#footer .footer__bottom a:hover,
#footer .footer__bottom a:focus {
  color: #69d99f;
}

/* ========================================================================== 
   14. Utilitaires de couleur
   ========================================================================== */

.text-primary {
  color: var(--brand-primary-dark) !important;
}

.bg-primary {
  color: var(--brand-primary-contrast) !important;
  background-color: var(--brand-primary) !important;
}

.border-primary {
  border-color: var(--brand-primary) !important;
}

.text-bg-primary,
.badge.bg-primary {
  color: var(--brand-primary-contrast) !important;
  background-color: var(--brand-primary) !important;
}

/* ========================================================================== 
   15. Responsive
   ========================================================================== */

@media (max-width: 991.98px) {
  .top-menu > li > a::after,
  .main-menu > li > a::after {
    display: none;
  }

  .product-miniature:hover {
    transform: none;
  }

  #header,
  header {
    box-shadow: 0 2px 9px rgba(22, 42, 31, 0.05);
  }
}

@media (max-width: 575.98px) {
  .page-customer-account #content {
    padding: 1rem;
  }

  .btn {
    min-height: 44px;
  }

  .product-miniature .product-description,
  .product-card .card-body {
    padding: 0.85rem;
  }

  .current-price,
  .product-price-and-shipping .price {
    font-size: 1.08rem;
  }

  .products-section-title::after,
  .block-category h1::after,
  .page-header h1::after {
    width: 38px;
  }
}

/* ========================================================================== 
   16. Accessibilité : limiter les animations
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .product-miniature:hover,
  .btn:hover,
  #header .logo:hover,
  header .logo:hover {
    transform: none;
  }
}
/* =========================================================
   Logo desktop Hummingbird
   Le conteneur et l'image grandissent ensemble
   ========================================================= */

@media (min-width: 992px) {
  :root {
    --header-logo-size: 100px;
  }

  /* Conteneur officiel du logo Hummingbird */
  #header .header-bottom .navbar-brand {
    display: block;
    flex: 0 0 var(--header-logo-size);

    width: var(--header-logo-size);
    max-width: var(--header-logo-size);
    max-height: none;

    padding: 0;
    margin-right: 2rem;
    line-height: 0;
  }

  /* Image réelle du logo */
  #header .header-bottom .navbar-brand .logo {
    display: block;

    width: auto;
    height: auto;

    max-width: var(--header-logo-size);
    max-height: var(--header-logo-size);

    margin: 0 auto;
    object-fit: contain;
  }

  /* Un peu d'air autour du logo */
  #header .header-bottom {
    padding-block: 0.75rem;
  }
}

/* =========================================================
   Centrage du menu principal Hummingbird sur ordinateur
   ========================================================= */

@media (min-width: 1200px) {
  /* Colonne située entre le logo et la recherche */
  #header .header-bottom .main-menu {
    align-self: stretch;
    justify-content: center;
  }

  /* Conteneur du menu desktop */
  #header .header-bottom .js-menu-desktop {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  /* Liste des catégories principales */
  #header .header-bottom #top-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0;
  }
}

/* =========================================================
   En-tête et description des catégories
   ========================================================= */

.category__header {
  margin-bottom: 1rem, 1rem;
}

/* Titre de la catégorie */
.category__header .page-title-section {
  margin-bottom: 1.35rem;
}

/* Bloc de description */
.category__description {
  position: relative;
  padding: clamp(1.25rem, 2.5vw, 2rem)
           clamp(1.25rem, 3vw, 2.25rem);
  overflow: hidden;
  line-height: 1.75;

  background:
    linear-gradient(
      135deg,
      var(--brand-surface) 0%,
      var(--brand-primary-subtle) 100%
    );

  border: 1px solid rgba(var(--brand-primary-rgb), 0.18);
  border-left: 5px solid var(--brand-primary);
  border-radius: var(--brand-radius-lg);

  box-shadow: var(--brand-shadow-sm);
}

/* Décoration discrète dans l’angle */
.category__description::after {
  position: absolute;
  top: -55px;
  right: -55px;

  width: 140px;
  height: 140px;

  content: "";

  border: 28px solid rgba(var(--brand-primary-rgb), 0.07);
  border-radius: 50%;

  pointer-events: none;
}

/* Paragraphes */
.category__description p {
  position: relative;
  z-index: 1;

  margin-bottom: 0.9rem;

  /* Surcharge les alignements intégrés en style="" */
  text-align: left !important;
  text-wrap: pretty;
}


/* Mobile */
@media (max-width: 575.98px) {
  .category__description {
    padding: 1.15rem;
    line-height: 1.65;

    border-left-width: 4px;
    border-radius: var(--brand-radius);
  }

  .category__description p:first-child {
    font-size: 1rem;
  }

  .category__description::after {
    top: -65px;
    right: -65px;
  }
}

/* =========================================================
   Menu déroulant compact Hummingbird — version corrigée
   ========================================================= */

@media (min-width: 1200px) {

  /*
   * Le module complet devient la référence de positionnement.
   * Il occupe toute la hauteur de la ligne du header.
   */
  #header .ps-mainmenu--desktop {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  /*
   * Important :
   * les éléments de premier niveau ne doivent plus servir
   * de référence au positionnement du sous-menu.
   */
  #header .ps-mainmenu__tree-item {
    position: static;
  }

  /*
   * Petit panneau placé sous la ligne complète du header.
   */
  #header .ps-mainmenu__tree-item > .submenu {
    top: 100%;
    right: auto;
    left: 0;

    width: 320px;
    min-width: 280px;
    max-width: calc(100vw - 2rem);

    margin-top: 0;

    overflow: hidden;

    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow);
  }
  #header .ps-mainmenu__tree-item > .submenu {
  top: calc(100% - 1px);
  margin-top: 0;
}

  /*
   * Suppression des dimensions du méga-menu d’origine.
   */
  #header .submenu > .container {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
  }

  #header .submenu__row {
    display: block;

    --bs-gutter-x: 0;

    margin: 0;
  }

  /*
   * La liste des catégories prend toute la largeur.
   */
  #header .submenu__left {
    display: flex;
    flex: 0 0 100%;
    flex-direction: column;

    width: 100%;
    max-width: 100%;

    padding: 0.75rem;

    border-right: 0;
  }

  /*
   * Masquage de la partie réservée aux catégories de niveau 3.
   */
  #header .submenu__right {
    display: none !important;
  }

  /*
   * Liens du menu compact.
   */
  #header .submenu__left-item {
    width: 100%;
    padding: 0.7rem 0.9rem;

    color: var(--brand-text);
    font-weight: 500;

    border-radius: var(--brand-radius-sm);
  }

  #header .submenu__left-item:hover,
  #header .submenu__left-item:focus,
  #header .submenu__left-item.active {
    color: var(--brand-primary-dark);
    background-color: var(--brand-primary-subtle);
  }
}