/* =============================================================
   NAPPY · Header + mega-menu — REPLICA del patron Lacoste
   Barra principal -> barra de subcategorias (horizontal, bajo el header)
   -> panel full-width en columnas (top:100%).
   Cargado desde head.tpl tras nappy-iqit.css. Solo DESKTOP (>=992px).
   Marca: #d4006c · Texto: #082415
   ============================================================= */

@media (min-width:992px){

  /* ---------- BARRA PRINCIPAL ---------- */
  #header{ max-height:none; overflow:visible; }
  #desktop-header,
  #desktop-header.headerrefit-shell{ position:relative !important; top:0 !important; max-height:none; overflow:visible; background:#fff; }
  #desktop-header .header-top{ height:120px; max-height:none; padding-top:0 !important; padding-bottom:0 !important; overflow:visible; background:transparent; display:flex; flex-direction:column; }
  #desktop-header #desktop-header-container.container{ max-width:1500px; padding-top:8px !important; padding-bottom:0 !important; padding-left:50px !important; padding-right:50px !important; display:flex; flex-direction:column; }

  /* Fila 1: logo | search | iconos */
  .headerrefit-main{ display:flex; align-items:center; gap:16px; height:64px; max-height:64px; width:100%; box-sizing:border-box; }
  .headerrefit-below{ max-height:0 !important; margin-top:0 !important; overflow:hidden !important; }

  /* Fila 2: menú pegado al borde inferior del header.
     display:flex para que ¡Promociones! aparezca a la derecha del megamenú. */
  #desktop-header-container > .headerrefit-primary-nav{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    width:100%;
    margin-top:auto;
  }

  /* El wrapper del megamenú ocupa todo el espacio disponible */
  #desktop-header-container > .headerrefit-primary-nav > #iqitmegamenu-wrapper {
    flex:1 1 auto !important;
    min-width:0 !important;
  }

  /* El enlace ¡Promociones! se auto-dimensiona a su contenido */
  #desktop-header-container > .headerrefit-primary-nav > .nappy-promo-link {
    flex:0 0 auto !important;
  }
  .headerrefit-logo-group{ flex:0 0 auto; }
  .headerrefit-logo img.logo{ height:46px; width:auto; display:block; }
  .headerrefit-center{ flex:1 1 auto; min-width:0; }
  .headerrefit-nav-row{ display:flex; align-items:center; gap:28px; width:100%; }

  /* anclar los desplegables al header: nada intermedio posicionado */
  .headerrefit-center,.headerrefit-nav-row,
  #tigmegamenu-wrapper,.headerrefit-menu-shell,#js-main-nav,
  .main-nav-item,ul.nav-submenu-list,.nav-submenu-item{ position:static !important; }
  /* primary-nav necesita position:relative para anclar submenús */
  #desktop-header-container > .headerrefit-primary-nav{ position:relative !important; }

  /* nivel 1 */
  ul#js-main-nav.main-nav{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
  .main-nav-item{ display:flex; align-items:center; }
  .main-nav-link{ display:inline-block; padding:6px 0; line-height:1;
    color:#082415; text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; transition:color .2s, border-color .2s; }
  .main-nav-item:hover>.main-nav-link, .main-nav-item.is-open>.main-nav-link, .main-nav-item.is-active>.main-nav-link{ color:#d4006c; border-bottom-color:#d4006c; }
  .main-nav-button{ background:none; border:0; padding:0 0 0 6px; cursor:pointer; line-height:0; }
  .main-nav-button .headerrefit-chevron{ display:inline-block; width:7px; height:7px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; color:#082415; transition:transform .2s; }
  .main-nav-item:hover .headerrefit-chevron, .main-nav-item.is-open .headerrefit-chevron{ transform:rotate(-135deg); color:#d4006c; }

  /* buscador + iconos */
  .headerrefit-search{ flex:1 1 auto; min-width:160px; }
  .headerrefit-search .tig-search-wrapper{ max-height:42px; }
  .headerrefit-search .tig-search-launcher{ display:flex; align-items:center; gap:10px; width:100%; height:42px; min-height:42px; max-height:42px; box-sizing:border-box; padding:0 14px;
    background:#f5f6f7; border:1px solid #e6e8ea; border-radius:30px; color:#74787c; cursor:pointer; }
  .headerrefit-search .tig-search-launcher:hover{ border-color:#d4006c; }
  .headerrefit-search .tig-search-launcher-label{ font-size:14px; }
  .headerrefit-secondary-nav{ flex:0 0 auto; display:flex; align-items:center; gap:14px; }
  .headerrefit-secondary-nav .header-btn{ display:flex; align-items:center; gap:8px; color:#082415; text-decoration:none; }
  .headerrefit-secondary-nav .header-btn:hover{ color:#d4006c; }

  /* =========================================================
     2º NIVEL — barra de subcategorias horizontal bajo el header
     ========================================================= */
  .nav-submenu{
    position:absolute !important; top:100% !important; left:0 !important; right:0 !important; width:100% !important;
    background:#fff !important; border-top:1px solid #ececec !important; box-shadow:0 8px 16px rgba(8,36,21,.06) !important;
    padding:0 !important; margin:0 !important; z-index:120 !important;
    opacity:0; visibility:hidden; transition:opacity .2s ease; }
  .main-nav-item:hover>.nav-submenu, .main-nav-item.is-open>.nav-submenu, .main-nav-item.is-active>.nav-submenu{ opacity:1 !important; visibility:visible !important; }

  ul.nav-submenu-list{ display:flex !important; flex-wrap:wrap; justify-content:center !important; align-items:center; gap:2px 6px;
    list-style:none; margin:0 auto !important; padding:8px 30px !important; max-width:1500px; min-height:46px; }
  .nav-submenu-item{ display:flex; align-items:center; }
  .nav-submenu-item .nav-submenu-button, .nav-submenu-item .nav-submenu-button--link{
    display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
    padding:8px 14px; border-radius:20px; font-size:14px; font-weight:600; color:#082415; text-decoration:none; white-space:nowrap; }
  .nav-submenu-item:hover>.nav-submenu-button, .nav-submenu-item.is-active>.nav-submenu-button,
  .nav-submenu-item:hover>.nav-submenu-button--link{ background:#fbcde3; color:#d4006c; }
  .nav-submenu-item--home .nav-submenu-button--link{ color:#d4006c; }
  .nav-submenu-chevron{ display:none !important; }

  /* =========================================================
     PANEL — full-width bajo la barra (columnas flex)
     ========================================================= */
  .nav-panel{
    position:absolute !important; left:0 !important; right:0 !important; top:100% !important; width:100% !important;
    background:#fff !important; border-top:1px solid #f0f0f0 !important; box-shadow:0 16px 26px rgba(8,36,21,.10) !important;
    display:flex !important; padding:0 !important; margin:0 !important; z-index:119 !important;
    opacity:0; visibility:hidden; max-height:0; overflow:hidden; transition:opacity .25s ease; }
  .nav-submenu-item:hover>.nav-panel, .nav-submenu-item.is-active>.nav-panel{
    opacity:1 !important; visibility:visible !important; max-height:560px !important; overflow:auto; z-index:121; }

  .nav-panel-grid{ display:flex !important; width:100%; max-width:1500px; margin:0 auto !important; padding:24px 30px !important; gap:32px; }
  .nav-panel-column--tags{ flex:0 0 20% !important; border-right:1px solid #eee; padding-right:24px; }
  .nav-panel-column--content{ flex:1 1 auto !important; min-width:0; }
  .nav-panel-tag-link{ display:block; margin-bottom:10px; font-size:13px; font-weight:600; color:#082415; text-decoration:none; }
  .nav-panel-tag-link:hover{ color:#d4006c; }

  /* columnas del contenido (categorias / marcas / producto) */
  .nav-panel-content{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:22px 26px !important; align-items:start !important; }
  .nav-panel-content .tig_mm_block{ min-width:0 !important; margin:0 !important; }
  .nav-panel-content .tig_mm_block > .h4, .nav-panel-content .tig_mm_block .h4 a{
    display:block; margin-bottom:10px !important; font-size:14px !important; font-weight:700 !important; color:#082415 !important; text-decoration:none; }
  .nav-panel-content .tig_mm_categories{ list-style:none; margin:0; padding:0; }
  .nav-panel-content .tig_mm_categories li{ margin:0 0 7px; }
  .nav-panel-content .tig_mm_url{ font-size:13px !important; color:#555 !important; text-decoration:none; }
  .nav-panel-content .tig_mm_url:hover{ color:#d4006c !important; }
  .nav-panel-content .tig_mm_categories .tig_mm_categories{ margin:5px 0 7px 12px; }
  .nav-panel-content .arrow{ display:none !important; }
  .nav-panel-content .mm_block_type_mnft{ grid-column:1 / -1 !important; border-top:1px solid #f0f0f0; padding-top:16px; margin-top:6px; }
  .nav-panel-content .mm_mnu_display_img{ display:flex !important; flex-wrap:wrap; gap:18px; list-style:none; margin:0; padding:0; }
  .nav-panel-content .mm_mnu_display_img img{ max-width:72px !important; height:auto; }
  .nav-panel-content .mm_block_type_product .product-miniature{ border:1px solid #f0f0f0; border-radius:10px; padding:10px; }
  .nav-panel-content .mm_block_type_product .product-title a{ font-size:12px; color:#082415; text-decoration:none; }
  .nav-panel-content .mm_block_type_product .price{ color:#d4006c; font-weight:700; }
  .nav-panel-content .mm_block_type_product .regular-price{ color:#aaa; text-decoration:line-through; font-size:12px; margin-left:6px; }

  /* nivel 1 — sentence case vía CSS */
  #tigmegamenu-wrapper .main-nav-link{
    display:inline-block !important;
    font-weight:700 !important;
    font-size:1rem !important;
    text-transform:lowercase;
  }
  #tigmegamenu-wrapper .main-nav-link::first-letter{
    text-transform:uppercase;
  }

  /* font-weight 500 + sentence case en todo el megamenú */
  #tigmegamenu-wrapper .nav-submenu-button,
  #tigmegamenu-wrapper .nav-submenu-button--link,
  #tigmegamenu-wrapper .nav-submenu-label,
  #tigmegamenu-wrapper .nav-panel-back-category-label,
  #tigmegamenu-wrapper .nav-panel-tag-link,
  #tigmegamenu-wrapper .nav-panel-content .h4,
  #tigmegamenu-wrapper .nav-panel-content .h4 a,
  #tigmegamenu-wrapper .nav-panel-content .tig_mm_url,
  #tigmegamenu-wrapper .nav-panel-content .product-title a{
    --tw-font-weight:500;
    font-weight:500 !important;
  }

  /* inline-block necesario para que ::first-letter funcione en <span> */
  #tigmegamenu-wrapper .nav-submenu-label,
  #tigmegamenu-wrapper .nav-panel-back-category-label,
  #tigmegamenu-wrapper .nav-panel-content .tig_mm_url,
  #tigmegamenu-wrapper .nav-panel-content .h4 a,
  #tigmegamenu-wrapper .nav-panel-content .product-title a{ display:inline-block; }

  #tigmegamenu-wrapper .main-nav-link::first-letter,
  #tigmegamenu-wrapper .nav-submenu-button::first-letter,
  #tigmegamenu-wrapper .nav-submenu-button--link::first-letter,
  #tigmegamenu-wrapper .nav-submenu-label::first-letter,
  #tigmegamenu-wrapper .nav-panel-back-category-label::first-letter,
  #tigmegamenu-wrapper .nav-panel-tag-link::first-letter,
  #tigmegamenu-wrapper .nav-panel-content .h4::first-letter,
  #tigmegamenu-wrapper .nav-panel-content .h4 a::first-letter,
  #tigmegamenu-wrapper .nav-panel-content .tig_mm_url::first-letter,
  #tigmegamenu-wrapper .nav-panel-content .product-title a::first-letter{
    text-transform:uppercase !important;
  }

  /* ocultar ps_mainmenu en desktop — lo gestiona TIG megamenu */
  #_desktop_top_menu{ display:none !important; }

  /* solo movil */
  .nav-panel-close-button, .nav-panel-overlay{ display:none !important; }
}

/* =============================================================
   ESCRITORIO — estilo "Action": contenido centrado a 1280px
   (max-w-7xl) con 32px laterales, buscador tipo píldora, fila de
   navegación con subrayado al hover y línea divisoria fina.
   Colores de marca Nappy (#d4006c). >=992px.
   ============================================================= */
@media (min-width:992px){
  /* Gutter lateral único, compartido por header, menú y contenido del sitio
     para que TODO quede alineado a los mismos bordes. Tope amplio (160px)
     como en las grandes tiendas online. Ajusta solo este valor. */
  :root{ --nappy-gutter:clamp(32px, 8vw, 160px); }

  /* Contenedor principal del sitio: pantalla completa con el gutter común,
     así el contenido de las páginas se alinea con el menú. */
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl{
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:var(--nappy-gutter) !important;
    padding-right:var(--nappy-gutter) !important;
  }

  /* Header: mismo gutter común */
  #desktop-header #desktop-header-container.container{
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:var(--nappy-gutter) !important;
    padding-right:var(--nappy-gutter) !important;
  }

  /* Menú principal: sin padding propio; hereda el gutter del contenedor
     para quedar alineado con el logo. */
  #desktop-header nav#main-menu{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Barra de subcategorías y panel del megamenú: a ancho completo con el
     mismo gutter, alineados con el menú. */
  ul.nav-submenu-list{ max-width:none !important; padding-left:var(--nappy-gutter) !important; padding-right:var(--nappy-gutter) !important; }
  .nav-panel-grid{ max-width:none !important; padding-left:var(--nappy-gutter) !important; padding-right:var(--nappy-gutter) !important; }

  /* Línea divisoria fina bajo todo el header (como Action) */
  #desktop-header.headerrefit-shell{ border-bottom:1px solid #ececec; }

  /* Buscador tipo píldora: fondo blanco, borde neutro, radio completo */
  .headerrefit-search .tig-search-launcher{
    background:#fff !important;
    border:1px solid #e6e8ea !important;
    border-radius:9999px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
  }
  .headerrefit-search .tig-search-launcher:hover{ border-color:#d4006c !important; }

  /* Fila de navegación: enlaces alineados a la izquierda, peso medio */
  ul#js-main-nav.main-nav{ justify-content:flex-start !important; gap:6px !important; }
  #tigmegamenu-wrapper .main-nav-link{ font-weight:700 !important; }
}