/* ----------------------------------------------------------------------
 * PrestaHeroes.com - Wilderness 121 Modern Header v6
 * File: themes/classic/assets/css/custom.css
 * Purpose:
 *   Desktop-first cleanup for Classic theme header.
 *
 * Context:
 *   The page source shows the desktop logo is inside:
 *     <nav class="header-nav w121-utility-bar">
 *       <div class="hidden-sm-down w121-desktop-utility clearfix">
 *         <div class="... w121-utility-logo" id="_desktop_logo">
 *
 *   Classic's native .header-nav styling can clip this row because it was
 *   designed for a small utility bar, not a full logo row.
 *
 * Scope:
 *   - Desktop is fixed now.
 *   - Mobile rules are kept minimal so we can return to mobile separately.
 * ---------------------------------------------------------------------- */


/* ----------------------------------------------------------------------
 * Desktop header fix
 * ---------------------------------------------------------------------- */

@media (min-width: 768px) {

  /* Classic normally treats .header-nav like a small top utility strip.
     This removes clipping so the desktop logo can display at full height. */
  #header .header-nav.w121-utility-bar {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
  }

  #header .header-nav.w121-utility-bar .container,
  #header .header-nav.w121-utility-bar .row,
  #header .header-nav.w121-utility-bar .w121-desktop-utility {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Logo/account row. */
  #header .header-nav.w121-utility-bar .w121-desktop-utility {
    display: flex !important;
    align-items: center !important;
    min-height: 74px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Left logo area. */
  #header .w121-utility-logo,
  #header #_desktop_logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #header #_desktop_logo h1 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  #header #_desktop_logo a {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }

  #header #_desktop_logo img.logo {
    width: 245px !important;
    max-width: 245px !important;
    height: auto !important;
    display: block !important;
  }

  /* Right utility area: Ship to / Sign in / Cart. */
  #header .w121-nav-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #header .w121-nav-right > * {
    float: none !important;
    margin: 0 !important;
  }

  #header .w121-nav-right a {
    color: #222222;
    text-decoration: none;
  }

  #header .w121-nav-right a:hover {
    color: #1f3f1f;
  }

  #header .w121-nav-right .material-icons {
    vertical-align: middle;
  }

  /* Keep the cart from inheriting awkward Classic spacing. */
  #header .w121-nav-right #_desktop_cart,
  #header .w121-nav-right .blockcart {
    float: none !important;
    height: auto !important;
    margin: 0 !important;
  }


  /* --------------------------------------------------------------------
   * Desktop menu/search row
   * -------------------------------------------------------------------- */

  #w121-modern-header {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    clear: both;
  }

  #w121-modern-header .container,
  #w121-modern-header .row,
  #w121-modern-header .w121-desktop-header,
  #w121-modern-header .w121-header-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #w121-modern-header .w121-desktop-header {
    padding: 16px 0 22px !important;
  }

  /* Stack menu first, search second. This is more stable than trying to
     squeeze menu + search on one line in Classic. */
  #w121-modern-header .w121-displaytop-slot {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    width: 100%;
    height: auto !important;
    overflow: visible !important;
  }

  /* The source shows ps_searchbar renders as #search_widget.search-widgets. */
  #w121-modern-header #search_widget,
  #w121-modern-header .search-widgets,
  #w121-modern-header .search-widget {
    order: 2;
    width: 340px !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    float: none !important;
  }

  #w121-modern-header #search_widget form,
  #w121-modern-header .search-widgets form,
  #w121-modern-header .search-widget form {
    width: 100% !important;
    position: relative;
  }

  #w121-modern-header #search_widget input[type="text"],
  #w121-modern-header #search_widget input[type="search"],
  #w121-modern-header .search-widgets input[type="text"],
  #w121-modern-header .search-widgets input[type="search"],
  #w121-modern-header .search-widget input[type="text"],
  #w121-modern-header .search-widget input[type="search"] {
    width: 100% !important;
    min-height: 44px;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    background: #f5f5f5;
    color: #333333;
    padding: 0 14px 0 42px;
  }

  #w121-modern-header #search_widget input::placeholder,
  #w121-modern-header .search-widgets input::placeholder,
  #w121-modern-header .search-widget input::placeholder {
    color: #999999;
  }

  /* Modern menu from displayTop. */
  #w121-modern-header .ph-modern-menu--placement-top {
    order: 1;
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 auto !important;
    background: #ffffff;
    border: 1px solid #eeeeee;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  #w121-modern-header .ph-modern-menu--placement-top .ph-modern-menu__toggle {
    display: none !important;
  }

  #w121-modern-header .ph-modern-menu--placement-top .ph-modern-menu__list {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0 18px;
    list-style: none;
  }

  #w121-modern-header .ph-modern-menu--placement-top .ph-modern-menu__item {
    position: relative;
    margin: 0;
  }

  #w121-modern-header .ph-modern-menu--placement-top .ph-modern-menu__link {
    display: block;
    padding: 17px 13px;
    color: #111111;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }

  #w121-modern-header .ph-modern-menu--placement-top .ph-modern-menu__link:hover {
    color: #1f3f1f;
    background: #f6f8f3;
  }

  /* Keep dropdown panels above the slider/content. */
  #w121-modern-header .ph-modern-menu__panel {
    z-index: 1000;
  }
}


/* ----------------------------------------------------------------------
 * Mobile header / slider spacing fix
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Critical fix:
     Classic's .header-nav is normally a short utility bar. Our mobile header
     now has a logo row plus a controls row, so we must force the nav to take
     its real height. Otherwise the homepage slider starts underneath it. */
  #header .header-nav.w121-utility-bar {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 30;
  }

  #header .header-nav.w121-utility-bar .container,
  #header .header-nav.w121-utility-bar .row,
  #header .header-nav.w121-utility-bar .w121-mobile-utility {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Hide desktop-only rows and the separate desktop displayTop/header row. */
  .w121-desktop-utility,
  #w121-modern-header {
    display: none !important;
  }

  .w121-mobile-utility {
    display: block !important;
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .w121-mobile-logo-row {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 8px 12px 7px;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
  }

  .w121-mobile-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .w121-mobile-brand-logo a {
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }

  .w121-mobile-brand-logo img.logo {
    width: 200px;
    max-width: 82vw;
    height: auto;
    display: block;
  }

  .w121-mobile-row {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: 54px;
    gap: 8px;
    padding: 0 12px;
    background: #ffffff;
  }

  .w121-mobile-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 88px;
  }

  .w121-mobile-center-spacer {
    min-width: 0;
  }

  .w121-mobile-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    min-width: 0;
  }

  .w121-mobile-actions > div,
  .w121-mobile-actions .blockcart,
  .w121-mobile-actions #_mobile_cart,
  .w121-mobile-actions #_mobile_user_info {
    float: none !important;
    position: static !important;
    margin: 0 !important;
  }

  .w121-mobile-logo-compat {
    display: none !important;
  }

  /* Classic leaves this desktop/mobile menu wrapper in the header-top block.
     We are not using it for the visible mobile header at this stage. */
  .header-top {
    display: none !important;
  }

  /* Extra safety: ensure the wrapper/content starts after the real header. */
  #wrapper {
    clear: both;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #content,
  .page-home,
  #carousel {
    position: relative;
    z-index: 1;
  }

  /* Small visual breathing room before the slider, without creating a large gap. */
  .page-home #carousel {
    margin-top: 8px;
  }
}

@media (max-width: 420px) {
  .w121-mobile-brand-logo img.logo {
    width: 190px;
    max-width: 78vw;
  }

  .w121-mobile-menu-trigger {
    min-width: 82px;
  }

  .w121-mobile-row {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ----------------------------------------------------------------------
 * PrestaHeroes.com - Wilderness 121 Mobile Header v8
 * Purpose:
 *   Reorder mobile utility icons so the My Account/customer icon sits
 *   immediately to the left of the cart.
 *
 * Notes:
 *   The header source renders mobile actions in this order:
 *     _mobile_user_info, viewed-products hook, visitor-assurance hook, _mobile_cart.
 *   CSS order below changes the visual order without changing hook output.
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
  .w121-mobile-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  /* Viewed products eye icon first in the right-side action group. */
  .w121-mobile-actions > div:has(.ph-viewed-product),
  .w121-mobile-actions > div:has([class*="viewed"]) {
    order: 1;
  }

  /* Ship-to / country selector second. */
  .w121-mobile-actions > div:has(#visitor_assurance_block),
  .w121-mobile-actions > div:has(.select_visitor_assurance),
  .w121-mobile-actions > div:has(.va-trigger) {
    order: 2;
  }

  /* My Account icon immediately before cart. */
  .w121-mobile-actions #_mobile_user_info {
    order: 3;
  }

  /* Cart remains far right. */
  .w121-mobile-actions #_mobile_cart {
    order: 4;
  }

  /* Keep the moved Classic blocks compact on mobile. */
  .w121-mobile-actions #_mobile_user_info,
  .w121-mobile-actions #_mobile_cart,
  .w121-mobile-actions #visitor_assurance_block {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    margin: 0 !important;
    position: static !important;
  }

  /* The text label is too wide in the compact mobile action row. */
  .w121-mobile-actions #_mobile_user_info .hidden-sm-down,
  .w121-mobile-actions #_mobile_cart .hidden-sm-down {
    display: none !important;
  }
}

/* ----------------------------------------------------------------------
 * PrestaHeroes.com - Wilderness 121 Mega Menu Panel v9
 * Purpose:
 *   Prevent the desktop mega menu dropdown from being cut off on the left.
 *
 * Cause:
 *   The top-level menu item was positioned relative, so the large mega menu
 *   panel was being calculated from the 121 Categories item instead of the
 *   full menu/header area.
 * ---------------------------------------------------------------------- */

@media (min-width: 768px) {
  /* The menu container becomes the positioning context for large panels. */
  #w121-modern-header .ph-modern-menu--placement-top {
    position: relative !important;
    overflow: visible !important;
  }

  /* Top-level items should not be the positioning context for full-width panels. */
  #w121-modern-header .ph-modern-menu--placement-top .ph-modern-menu__item {
    position: static !important;
  }

  /* Center the dropdown panel within the available viewport/header area. */
  #w121-modern-header .ph-modern-menu--placement-top .ph-modern-menu__panel {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(1110px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    z-index: 3000 !important;
  }

  #w121-modern-header .ph-modern-menu--placement-top .ph-modern-menu__panel-inner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Safety: keep all header/menu ancestors from clipping dropdowns. */
  #header,
  #w121-modern-header,
  #w121-modern-header .container,
  #w121-modern-header .row,
  #w121-modern-header .w121-desktop-header,
  #w121-modern-header .w121-header-content,
  #w121-modern-header .w121-displaytop-slot {
    overflow: visible !important;
  }
}
/* ----------------------------------------------------------------------
 * Wilderness 121 Desktop Header Compact Pass
 * Purpose:
 *   Reduce desktop header vertical height after production launch.
 * ---------------------------------------------------------------------- */

@media (min-width: 768px) {

  /* Compact the top logo / utility row. */
  #header .header-nav.w121-utility-bar .w121-desktop-utility {
    min-height: 62px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Slightly reduce logo width to help the row feel less tall. */
  #header #_desktop_logo img.logo {
    width: 220px !important;
    max-width: 220px !important;
  }

  /* Reduce vertical padding around menu + search area. */
  #w121-modern-header .w121-desktop-header {
    padding: 8px 0 12px !important;
  }

  /* Reduce the space between mega menu and search. */
  #w121-modern-header .w121-displaytop-slot {
    gap: 10px !important;
  }

  /* Compact the search input. */
  #w121-modern-header #search_widget input[type="text"],
  #w121-modern-header #search_widget input[type="search"],
  #w121-modern-header .search-widgets input[type="text"],
  #w121-modern-header .search-widgets input[type="search"],
  #w121-modern-header .search-widget input[type="text"],
  #w121-modern-header .search-widget input[type="search"] {
    min-height: 38px;
  }

  /* Compact top-level mega menu links. */
  #w121-modern-header .ph-modern-menu--placement-top .ph-modern-menu__link {
    padding: 13px 12px;
  }
}
/* ----------------------------------------------------------------------
 * Wilderness 121 Desktop Utility Polish - Safe Version
 * Purpose:
 *   Style Viewed Products, Sign In, and Cart without touching Deliver to.
 * ---------------------------------------------------------------------- */

@media (min-width: 768px) {

  /* Keep the right utility area aligned, but do not force children globally. */
  #header .w121-nav-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
  }

  /* Viewed Products wrapper only. */
  #header .w121-nav-right .ph-viewedproduct-block,
  #header .w121-nav-right #ph-viewedproduct-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Sign in wrapper only. */
  #header .w121-nav-right #_desktop_user_info,
  #header .w121-nav-right .user-info {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Cart wrapper only. */
  #header .w121-nav-right #_desktop_cart,
  #header .w121-nav-right .blockcart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  #header .w121-nav-right .blockcart.cart-preview,
  #header .w121-nav-right .blockcart.inactive,
  #header .w121-nav-right .blockcart.active {
    background: transparent !important;
  }

  /* Viewed Products link only. */
  #header .w121-nav-right #ph-viewedproduct-button .dropdown-trigger > a.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #222222 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Sign in link only. */
  #header .w121-nav-right #_desktop_user_info a,
  #header .w121-nav-right .user-info a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #222222 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Cart link only. */
  #header .w121-nav-right #_desktop_cart a,
  #header .w121-nav-right .blockcart a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #222222 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Hover polish. */
  #header .w121-nav-right #ph-viewedproduct-button .dropdown-trigger > a.button:hover,
  #header .w121-nav-right #_desktop_user_info a:hover,
  #header .w121-nav-right .user-info a:hover,
  #header .w121-nav-right #_desktop_cart a:hover,
  #header .w121-nav-right .blockcart a:hover {
    background: #f5f5f5 !important;
    color: #1f3f1f !important;
  }

  /* Normalize icon sizing only inside the three target blocks. */
  #header .w121-nav-right #ph-viewedproduct-button .fa,
  #header .w121-nav-right #_desktop_user_info .material-icons,
  #header .w121-nav-right .user-info .material-icons,
  #header .w121-nav-right #_desktop_cart .material-icons,
  #header .w121-nav-right .blockcart .material-icons {
    font-size: 17px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
/* ----------------------------------------------------------------------
 * Wilderness 121 Desktop Deliver-To Utility Alignment
 * Purpose:
 *   Keep Ship to / country compact after polishing the other utility links.
 * ---------------------------------------------------------------------- */

@media (min-width: 768px) {

  /* Keep the Deliver To module as one compact utility item. */
  #header .w121-nav-right #visitor_assurance_block,
  #header .w121-nav-right .select_visitor_assurance,
  #header .w121-nav-right .va-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 10px !important;
    min-height: 38px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    background: transparent !important;
  }

  /* Make any direct link/button inside Deliver To align horizontally. */
  #header .w121-nav-right #visitor_assurance_block a,
  #header .w121-nav-right .select_visitor_assurance a,
  #header .w121-nav-right .va-trigger a,
  #header .w121-nav-right #visitor_assurance_block button,
  #header .w121-nav-right .select_visitor_assurance button,
  #header .w121-nav-right .va-trigger button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 38px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
  }

  /* Keep the map pin inline instead of above the label. */
  #header .w121-nav-right #visitor_assurance_block .material-icons,
  #header .w121-nav-right .select_visitor_assurance .material-icons,
  #header .w121-nav-right .va-trigger .material-icons,
  #header .w121-nav-right #visitor_assurance_block .fa,
  #header .w121-nav-right .select_visitor_assurance .fa,
  #header .w121-nav-right .va-trigger .fa {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  /* Keep Ship to + country text stacked together, but beside the icon. */
  #header .w121-nav-right #visitor_assurance_block span,
  #header .w121-nav-right .select_visitor_assurance span,
  #header .w121-nav-right .va-trigger span {
    line-height: 1.05 !important;
  }
}