/** Shopify CDN: Minification failed

Line 356:0 Unexpected "}"
Line 385:0 Unexpected "}"

**/
/* ══════════════════════════════════════════════
   roof-header.css — Style IWOOT
   ══════════════════════════════════════════════ */

/* ── Zone logo + search + icons ── */
.header {
  background: #ffffff !important;
  padding: 16px 0 0 0 !important;
  border-bottom: none !important;
}

/* ── Logo ── */
.header__heading-logo {
  max-width: 160px !important;
}

/* ── Barre de recherche IWOOT style ── */
.header__search {
  flex: 1 !important;
  max-width: 600px !important;
  margin: 0 32px !important;
}

.search__input,
.header__search .field__input {
  background: #f5f5f5 !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  padding: 12px 20px !important;
  width: 100% !important;
  transition: all 0.2s ease !important;
}

.search__input:focus,
.header__search .field__input:focus {
  border-color: var(--roof-primary) !important;
  background: #ffffff !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 61, 87, 0.1) !important;
}

/* ── Placeholder IWOOT style ── */
.search__input::placeholder {
  color: #999 !important;
  font-style: italic !important;
}

/* ── Zone menu (ligne du bas du header) ── */
.header__inline-menu {
  background: #ffffff !important;
  border-top: 1px solid #f0f0f0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* ── Items du menu ── */
.header__menu-item,
.list-menu__item--link {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  padding: 14px 16px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.2s ease !important;
}

.header__menu-item:hover,
.list-menu__item--link:hover {
  color: var(--roof-primary) !important;
  border-bottom-color: var(--roof-primary) !important;
  background: transparent !important;
}

/* Premier item — style promo IWOOT */
.list-menu--inline > li:first-child .header__menu-item {
  color: var(--roof-primary) !important;
  font-weight: 800 !important;
}

/* ── Icônes header (compte, panier) ── */
.header__icons {
  gap: 16px !important;
}

.header__icon svg {
  width: 22px !important;
  height: 22px !important;
}

/* ── Mega-menu panel ── */
.mega-menu__content {
  background: #ffffff !important;
  border-top: 3px solid var(--roof-primary) !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12) !important;
  padding: 28px 32px !important;
  margin-top: 0 !important;
}

.mega-menu__list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 4px !important;
}

/* ── Liens mega-menu niveau 2 ── */
.mega-menu__link--level-2 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  display: block !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  border-left: 3px solid transparent !important;
}

.mega-menu__link--level-2:hover {
  color: var(--roof-primary) !important;
  background: rgba(255, 61, 87, 0.05) !important;
  border-left-color: var(--roof-primary) !important;
  padding-left: 16px !important;
}

/* ── Liens niveau 3 ── */
.mega-menu__list .list-unstyled a {
  font-size: 13px !important;
  color: #666 !important;
  padding: 5px 12px !important;
  display: block !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.mega-menu__list .list-unstyled a:hover {
  color: var(--roof-primary) !important;
  background: rgba(255, 61, 87, 0.05) !important;
  padding-left: 16px !important;
}

/* ── Responsive mobile ── */
@media (max-width: 989px) {
  .header__search {
    margin: 0 16px !important;
    max-width: 100% !important;
  }
}
/* ── Forcer l'affichage de la recherche dans le header top ── */
.header--top-left .header__search {
  display: flex !important;
  flex: 1 !important;
  max-width: 580px !important;
  margin: 0 40px !important;
}

.header--top-left {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 16px 32px !important;
}

/* ── Barre de recherche visible ── */
.header__search .field {
  width: 100% !important;
}

.header__search .field__input {
  background: #f5f5f5 !important;
  border: 2px solid #e8e8e8 !important;
  border-radius: 8px !important;
  padding: 12px 20px 12px 44px !important;
  font-size: 14px !important;
  width: 100% !important;
  transition: all 0.2s ease !important;
}

.header__search .field__input:focus {
  border-color: var(--roof-primary) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(255,61,87,0.1) !important;
}

.header__search .field__button {
  left: 12px !important;
  right: auto !important;
}
/* ══════════════════════════════════════════════
   HEADER TOP — Layout IWOOT exact
   ══════════════════════════════════════════════ */

/* Zone logo + search + icons sur une ligne */
.header--top-left {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 16px 32px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Logo — colonne 1 */
.header--top-left .header__heading {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

/* Barre de recherche — colonne 2 (centre) */
.header--top-left .roof-search-bar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Icônes (compte, panier) — colonne 3 */
.header--top-left .header__icons {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Cacher la loupe icon dans le header puisqu'on a la barre inline */
.header--top-left .header__icon--search {
  display: none !important;
}

/* Cacher le sélecteur pays du header top */
.header--top-left .header__localization {
  display: none !important;
}

/* Menu — ligne complète en dessous */
.header--top-left .header__inline-menu {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  border-top: 1px solid #f0f0f0 !important;
  padding: 0 !important;
  margin: 0 -32px !important;
  padding: 0 32px !important;
}

/* Barre de recherche — taille et style */
.roof-search-bar__field {
  height: 48px !important;
}

.roof-search-bar__input {
  font-size: 15px !important;
}

.roof-search-bar__btn {
  min-height: 48px !important;
  padding: 0 24px !important;
  font-size: 14px !important;
}
/* ── Menu items — taille IWOOT ── */
.header__inline-menu .list-menu__item--link,
.header__inline-menu .header__menu-item {
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 16px 18px !important;
}

/* ── Cacher sélecteur pays dans header ── */
.header__localization {
  display: none !important;
}
/* ── Bandeau — défilement natif ── */
.roof-announcement-bar__track {
  width: max-content !important;
}

.roof-announcement-bar__item:nth-child(n+2) {
  display: flex !important;
}

/* ── Texte bandeau plus grand ── */
.roof-announcement-bar__item {
  font-size: 14px !important;
  font-weight: 600 !important;
}
/* ── Menu IWOOT exact ── */
.header__inline-menu .list-menu--inline {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* ── Tous les items du menu ── */
.header__inline-menu .list-menu__item {
  display: flex !important;
  align-items: center !important;
}

.header__inline-menu .list-menu__item--link,
.header__inline-menu .header__menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 18px 16px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* ── Summary (items avec dropdown) ── */
.header__inline-menu details > summary {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  list-style: none !important;
  cursor: pointer !important;
}

.header__inline-menu details > summary::-webkit-details-marker {
  display: none !important;
}

/* ── Chevron SVG aligné ── */
.header__inline-menu .icon-caret {
  display: inline-flex !important;
  align-items: center !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important;
  vertical-align: middle !important;
}

.header__inline-menu .icon-caret svg {
  width: 14px !important;
  height: 14px !important;
}
}

.header__inline-menu .list-menu__item--link,
.header__inline-menu .header__menu-item,
.header__inline-menu summary {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 18px 16px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  list-style: none !important;
}

.header__inline-menu summary::-webkit-details-marker {
  display: none !important;
}

/* ── Chevron — taille et position IWOOT ── */
.header__inline-menu .icon-caret {
  width: 16px !important;
  height: 16px !important;
  margin-left: 2px !important;
  margin-top: 1px !important;
  flex-shrink: 0 !important;
  opacity: 0.7 !important;
}
}

/* ── Items menu — espacement IWOOT ── */
.header__inline-menu .list-menu__item--link,
.header__inline-menu .header__menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 16px 20px !important;
  white-space: nowrap !important;
}

/* ── Espacement entre items ── */
.header__inline-menu .list-menu--inline {
  gap: 0px !important;
  align-items: center !important;
}

/* ── Summary tag pour mega-menu ── */
.header__inline-menu summary {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
}

.header__inline-menu summary::-webkit-details-marker {
  display: none !important;
}
/* ── Fix chevron alignement vertical ── */
.header__inline-menu details > summary .icon-caret,
.header__inline-menu details > summary svg.icon-caret {
  position: relative !important;
  top: 0 !important;
  vertical-align: middle !important;
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  margin-left: 14px !important;
  flex-shrink: 0 !important;
}

/* ── Force le summary en ligne horizontale ── */
.header__inline-menu details > summary .header__active-menu-item,
.header__inline-menu details > summary span {
  vertical-align: middle !important;
  display: inline !important;
}
/* ── Fix premier item dropdown ── */
.header__submenu {
  padding-top: 12px !important;
}
/* ── Fix z-index submenu — au-dessus de l'overlay summary ── */
details[open] > .header__submenu {
  z-index: 10 !important;
}

.header__submenu.global-settings-popup {
  z-index: 10 !important;
}
/* ── Fix overlay summary qui bloque le premier item ── */
.header__inline-menu details[open] > summary::before {
  display: none !important;
}