/* Grabcodez CouponFollow Master Suite v4.30.0
   Header/menu parity patch — scoped only to the existing theme header. */

/* Replace the theme's text glyph caret with the clean SVG injected by JS. */
.gc-site-header .gc-primary-nav .menu-item-has-children > a::after {
  content: none !important;
  display: none !important;
}
.gc-site-header .gcfm-nav-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 9px;
  margin-left: 6px;
  flex: 0 0 auto;
  color: currentColor;
  transition: transform .18s ease;
  transform-origin: center;
}
.gc-site-header .gcfm-nav-chevron svg {
  display: block;
  width: 14px;
  height: 9px;
  overflow: visible;
}
.gc-site-header .gcfm-nav-chevron path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Desktop: keep CouponFollow-style plain white account actions. */
/* Wide desktop only: match CouponFollow's tighter More → Search spacing.
   Phone/tablet rules are intentionally untouched. */
@media (min-width: 1241px) {
  .gc-site-header .gc-header-inner {
    width: min(calc(100% - 64px), 1220px) !important;
    grid-template-columns: auto max-content minmax(230px, 270px) auto !important;
    justify-content: space-between !important;
  }
}

@media (min-width: 1041px) {
  .gc-site-header .gc-account-actions .gc-signin,
  .gc-site-header .gc-account-actions .gc-signin:link,
  .gc-site-header .gc-account-actions .gc-signin:visited,
  .gc-site-header .gc-account-actions .gc-signin:hover,
  .gc-site-header .gc-account-actions .gc-signin:focus,
  .gc-site-header .gc-account-actions .gc-signin:focus-visible,
  .gc-site-header .gc-account-actions .gc-signin:active,
  .gc-site-header .gc-account-actions .gc-join,
  .gc-site-header .gc-account-actions .gc-join:link,
  .gc-site-header .gc-account-actions .gc-join:visited,
  .gc-site-header .gc-account-actions .gc-join:hover,
  .gc-site-header .gc-account-actions .gc-join:focus,
  .gc-site-header .gc-account-actions .gc-join:focus-visible,
  .gc-site-header .gc-account-actions .gc-join:active {
    color: #fff !important;
  }

  /* JS can also open a desktop dropdown by keyboard; hover/focus still work. */
  .gc-site-header .gc-primary-nav li.gcfm-submenu-open > .sub-menu {
    display: block;
  }

  /* v4.31.3: an explicit second click (or outside click/Escape) must be
     able to close More even while theme :hover/:focus-within rules apply. */
  .gc-site-header .gc-primary-nav li.gcfm-submenu-forced-closed > .sub-menu,
  .gc-site-header .gc-primary-nav li.gcfm-submenu-forced-closed:hover > .sub-menu,
  .gc-site-header .gc-primary-nav li.gcfm-submenu-forced-closed:focus-within > .sub-menu {
    display: none !important;
  }
}

/* Phone + tablet: full-screen white menu panel and true collapsed submenus. */
@media (max-width: 1040px) {
  body.gcfm-header-menu-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .gc-site-header .gc-primary-nav.is-open {
    position: fixed !important;
    top: var(--gcfm-header-menu-top, 70px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99999 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 28px 24px 40px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    color: var(--gc-ink, #202b3c) !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Keep the menu content white all the way to the viewport bottom. */
  .gc-site-header .gc-primary-nav.is-open::after {
    content: "";
    display: block;
    min-height: 16px;
  }

  .gc-site-header .gc-primary-nav .menu-item-has-children > a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .gc-site-header .gc-primary-nav .sub-menu,
  .gc-site-header .gc-primary-nav li:hover > .sub-menu,
  .gc-site-header .gc-primary-nav li:focus-within > .sub-menu {
    position: static !important;
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 2px 16px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .gc-site-header .gc-primary-nav li.gcfm-submenu-open > .sub-menu {
    display: block !important;
  }

  .gc-site-header .gc-primary-nav li.gcfm-submenu-open > a .gcfm-nav-chevron {
    transform: rotate(180deg);
  }

  .gc-site-header .gc-primary-nav .sub-menu a {
    min-height: 49px !important;
    padding: 8px 8px !important;
    color: var(--gc-ink, #202b3c) !important;
    background: transparent !important;
    font-size: 17px !important;
    font-weight: 500 !important;
  }

  .gc-site-header .gc-primary-nav .sub-menu a:hover,
  .gc-site-header .gc-primary-nav .sub-menu a:focus,
  .gc-site-header .gc-primary-nav .sub-menu .current-menu-item > a,
  .gc-site-header .gc-primary-nav .sub-menu .current_page_item > a {
    color: var(--gc-accent-dark, #1269b0) !important;
    background: rgba(25,216,232,.08) !important;
  }

  /* Slightly smaller/cleaner caret like the CouponFollow mobile control. */
  .gc-site-header .gcfm-nav-chevron {
    width: 12px;
    height: 8px;
    margin-left: 7px;
  }
  .gc-site-header .gcfm-nav-chevron svg {
    width: 12px;
    height: 8px;
  }
}


/* =========================================================
   v4.29.0 — TABLET header parity only (701–1024px).
   CouponFollow-like order: logo | Menu | search | Sign In / Join.
   Phone <=700px and desktop >=1025px keep their existing layouts.
   ========================================================= */
@media (min-width:701px) and (max-width:1024px){
  .gc-site-header .gc-header-inner{
    width:min(calc(100% - 34px), 970px)!important;
    min-height:64px!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:auto auto minmax(205px,1fr) auto!important;
    align-items:center!important;
    gap:14px!important;
  }

  .gc-site-header .gc-brand-wrap{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    justify-content:flex-start!important;
  }
  .gc-site-header .custom-logo{
    max-width:170px!important;
    max-height:42px!important;
  }

  .gc-site-header .gc-menu-toggle{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:start!important;
    min-height:64px!important;
    gap:5px!important;
    font-size:14px!important;
  }
  .gc-site-header .gc-menu-toggle svg{
    width:20px!important;
    height:20px!important;
  }
  .gc-site-header .gc-mobile-control-label{
    font-size:14px!important;
    font-weight:600!important;
  }

  .gc-site-header .gc-search-toggle{
    display:none!important;
  }
  .gc-site-header .gc-header-search,
  .gc-site-header .gc-header-search.is-open{
    display:block!important;
    grid-column:3!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .gc-site-header .gc-search-form{
    min-height:42px!important;
  }
  .gc-site-header .gc-search-form input[type="search"]{
    height:40px!important;
    font-size:14px!important;
  }

  .gc-site-header .gc-account-actions{
    display:flex!important;
    grid-column:4!important;
    grid-row:1!important;
    align-items:center!important;
    gap:8px!important;
  }
  .gc-site-header .gc-account-actions .gc-signin,
  .gc-site-header .gc-account-actions .gc-signin:link,
  .gc-site-header .gc-account-actions .gc-signin:visited,
  .gc-site-header .gc-account-actions .gc-signin:hover,
  .gc-site-header .gc-account-actions .gc-signin:focus,
  .gc-site-header .gc-account-actions .gc-signin:active,
  .gc-site-header .gc-account-actions .gc-join,
  .gc-site-header .gc-account-actions .gc-join:link,
  .gc-site-header .gc-account-actions .gc-join:visited,
  .gc-site-header .gc-account-actions .gc-join:hover,
  .gc-site-header .gc-account-actions .gc-join:focus,
  .gc-site-header .gc-account-actions .gc-join:active{
    color:#fff!important;
  }
  .gc-site-header .gc-signin,
  .gc-site-header .gc-join{
    min-height:38px!important;
    padding:7px 12px!important;
    font-size:13px!important;
  }

  /* Closed tablet nav stays hidden; opening Menu still uses the existing
     full white panel below the header. */
  .gc-site-header .gc-primary-nav:not(.is-open){
    display:none!important;
  }
}


/* =========================================================
   v4.30.0 — TABLET header precision pass only (701–1024px).
   Matches the approved CouponFollow reference more closely:
   - more breathing room between logo and Menu
   - hamburger aligns vertically with the Menu label
   - compact search field on tablet
   - neutral/dark search at rest, cyan/white only on focus
   - balanced Sign In / Join spacing
   Phone and desktop are intentionally untouched.
   ========================================================= */
@media (min-width:701px) and (max-width:1024px){
  .gc-site-header .gc-header-inner{
    width:min(calc(100% - 30px), 980px)!important;
    min-height:64px!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:max-content max-content minmax(218px,268px) max-content!important;
    align-items:center!important;
    justify-content:space-between!important;
    column-gap:0!important;
  }

  .gc-site-header .gc-brand-wrap{
    margin:0!important;
    padding:0!important;
  }
  .gc-site-header .custom-logo{
    width:auto!important;
    max-width:170px!important;
    max-height:42px!important;
  }

  .gc-site-header .gc-menu-toggle{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-height:64px!important;
    margin:0!important;
    padding:0!important;
    gap:7px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .gc-site-header .gc-menu-toggle svg{
    display:block!important;
    flex:0 0 auto!important;
    width:18px!important;
    height:18px!important;
    margin:0!important;
    transform:translateY(1.5px)!important;
  }
  .gc-site-header .gc-mobile-control-label{
    display:inline-flex!important;
    align-items:center!important;
    margin:0!important;
    line-height:1!important;
    font-size:14px!important;
    font-weight:600!important;
  }

  .gc-site-header .gc-header-search,
  .gc-site-header .gc-header-search.is-open{
    width:100%!important;
    max-width:268px!important;
    min-width:218px!important;
    justify-self:center!important;
  }
  .gc-site-header .gc-search-form{
    width:100%!important;
    min-height:42px!important;
    height:42px!important;
    display:flex!important;
    align-items:center!important;
    background:#223240!important;
    border:1px solid #74889a!important;
    border-radius:4px!important;
    box-shadow:none!important;
    overflow:hidden!important;
    transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease!important;
  }
  .gc-site-header .gc-search-form input[type="search"]{
    width:100%!important;
    height:40px!important;
    min-height:40px!important;
    margin:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
    background:transparent!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    color:#eef5fa!important;
    font-size:14px!important;
    line-height:40px!important;
  }
  .gc-site-header .gc-search-form input[type="search"]::placeholder{
    color:#aebdca!important;
    opacity:1!important;
  }
  .gc-site-header .gc-search-form:focus-within{
    background:#fff!important;
    border-color:#19c8d6!important;
    box-shadow:0 0 0 1px #19c8d6!important;
  }
  .gc-site-header .gc-search-form:focus-within input[type="search"]{
    background:#fff!important;
    color:#293744!important;
  }
  .gc-site-header .gc-search-form:focus-within input[type="search"]::placeholder{
    color:#7f93a5!important;
  }

  .gc-site-header .gc-account-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:20px!important;
    margin:0!important;
    white-space:nowrap!important;
  }
  .gc-site-header .gc-signin{
    min-height:38px!important;
    padding:7px 4px!important;
    font-size:13px!important;
    font-weight:600!important;
    line-height:1!important;
  }
  .gc-site-header .gc-join{
    min-width:64px!important;
    min-height:42px!important;
    padding:8px 14px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1.5px solid #fff!important;
    border-radius:4px!important;
    font-size:13px!important;
    font-weight:600!important;
    line-height:1!important;
  }
}

/* =========================================================
   v4.30.1 — TABLET menu icon correction only (701–1024px).
   Fixes the close/X icon leaking into the closed state and centers the
   three hamburger lines with the Menu label. Phone/desktop untouched.
   ========================================================= */
@media (min-width:701px) and (max-width:1024px){
  .gc-site-header .gc-menu-toggle .gc-menu-toggle-icon{
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 18px!important;
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    margin:0!important;
    padding:0!important;
    line-height:0!important;
    overflow:hidden!important;
  }

  .gc-site-header .gc-menu-toggle .gc-menu-toggle-icon svg{
    position:absolute!important;
    inset:0!important;
    width:18px!important;
    height:18px!important;
    margin:auto!important;
    transform:none!important;
  }

  /* Closed state: hamburger only. */
  .gc-site-header .gc-menu-toggle:not([aria-expanded="true"]) .gc-menu-open-icon{
    display:block!important;
  }
  .gc-site-header .gc-menu-toggle:not([aria-expanded="true"]) .gc-menu-close-icon{
    display:none!important;
  }

  /* Open state: X only. */
  .gc-site-header .gc-menu-toggle[aria-expanded="true"] .gc-menu-open-icon{
    display:none!important;
  }
  .gc-site-header .gc-menu-toggle[aria-expanded="true"] .gc-menu-close-icon{
    display:block!important;
  }

  .gc-site-header .gc-menu-toggle{
    gap:8px!important;
  }
  .gc-site-header .gc-menu-toggle .gc-mobile-control-label{
    display:inline-flex!important;
    align-items:center!important;
    height:18px!important;
    line-height:18px!important;
  }
}

/* =========================================================
   v4.30.2 — TABLET hamburger micro-alignment only (701–1024px).
   Moves the three closed-state hamburger lines slightly upward to match
   the CouponFollow reference. Open-state X, phone and desktop untouched.
   ========================================================= */
@media (min-width:701px) and (max-width:1024px){
  .gc-site-header .gc-menu-toggle:not([aria-expanded="true"]) .gc-menu-open-icon{
    transform:translateY(-2px)!important;
  }
}

/* =========================================================
   v4.31.0 — SEARCH PARITY PASS.
   1) Desktop only: CouponFollow-style muted search at rest,
      white/cyan active search on focus.
   2) Phone only (<=700px): search replaces the header controls in-place
      instead of opening a second white panel under the header.
   Tablet 701–1024px keeps the approved v4.30.x behavior untouched.
   ========================================================= */

/* Desktop: quiet/dark field at rest; white + cyan only while active. */
@media (min-width:1025px){
  .gc-site-header .gc-header-search{
    min-width:0!important;
  }
  .gc-site-header .gc-search-form{
    background:#202d38!important;
    border:1px solid #6f8292!important;
    border-radius:4px!important;
    box-shadow:none!important;
    transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease!important;
  }
  .gc-site-header .gc-search-leading{
    color:#9eafbd!important;
  }
  .gc-site-header .gc-search-form input[type="search"]{
    background:transparent!important;
    color:#eef5fa!important;
    outline:0!important;
    box-shadow:none!important;
  }
  .gc-site-header .gc-search-form input[type="search"]::placeholder{
    color:#9eafbd!important;
    opacity:1!important;
  }
  .gc-site-header .gc-search-form:focus-within{
    background:#fff!important;
    border-color:#19c8d6!important;
    box-shadow:0 0 0 1px #19c8d6!important;
  }
  .gc-site-header .gc-search-form:focus-within .gc-search-leading{
    color:#7b90a2!important;
  }
  .gc-site-header .gc-search-form:focus-within input[type="search"]{
    background:#fff!important;
    color:#293744!important;
  }
  .gc-site-header .gc-search-form:focus-within input[type="search"]::placeholder{
    color:#7f93a5!important;
  }
}

/* Phone: opening Search turns the existing header row itself into search. */
@media (max-width:700px){
  .gc-site-header .gc-header-inner{
    position:relative!important;
  }

  .gc-site-header.gcfm-mobile-search-open .gc-menu-toggle,
  .gc-site-header.gcfm-mobile-search-open .gc-brand-wrap,
  .gc-site-header.gcfm-mobile-search-open .gc-search-toggle,
  .gc-site-header.gcfm-mobile-search-open .gc-account-actions{
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .gc-site-header.gcfm-mobile-search-open .gc-header-search,
  .gc-site-header.gcfm-mobile-search-open .gc-header-search.is-open{
    position:absolute!important;
    inset:0!important;
    z-index:40!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:100%!important;
    min-height:68px!important;
    margin:0!important;
    padding:10px 15px!important;
    background:var(--gc-header,#161616)!important;
    box-shadow:none!important;
  }

  .gc-site-header.gcfm-mobile-search-open .gc-search-form{
    position:relative!important;
    width:100%!important;
    min-height:48px!important;
    height:48px!important;
    display:flex!important;
    align-items:center!important;
    padding-right:42px!important;
    background:#fff!important;
    border:2px solid #19c8d6!important;
    border-radius:4px!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }

  .gc-site-header.gcfm-mobile-search-open .gc-search-leading{
    width:38px!important;
    color:#7f93a5!important;
  }

  .gc-site-header.gcfm-mobile-search-open .gc-search-form input[type="search"]{
    height:44px!important;
    min-height:44px!important;
    padding:0 4px 0 0!important;
    background:#fff!important;
    color:#293744!important;
    font-size:16px!important;
    line-height:44px!important;
    outline:0!important;
    box-shadow:none!important;
  }

  .gc-site-header.gcfm-mobile-search-open .gc-search-form input[type="search"]::placeholder{
    color:#8094a6!important;
    opacity:1!important;
  }

  .gc-site-header .gcfm-mobile-search-close{
    display:none;
  }
  .gc-site-header.gcfm-mobile-search-open .gcfm-mobile-search-close{
    position:absolute!important;
    top:50%!important;
    right:9px!important;
    z-index:3!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:30px!important;
    height:30px!important;
    margin:0!important;
    padding:0!important;
    transform:translateY(-50%)!important;
    color:#657786!important;
    background:#f3f5f6!important;
    border:0!important;
    border-radius:50%!important;
    box-shadow:none!important;
    cursor:pointer!important;
    opacity:1!important;
    overflow:visible!important;
  }
  .gc-site-header.gcfm-mobile-search-open .gcfm-mobile-search-close svg{
    display:block!important;
    width:14px!important;
    height:14px!important;
    stroke:currentColor!important;
    stroke-width:2!important;
    fill:none!important;
    stroke-linecap:round!important;
  }
}

/* =========================================================
   v4.31.1 — PHONE SEARCH CONTAINMENT FIX ONLY (<=700px).
   Keep the active search completely inside the full-width black header.
   Desktop/tablet and every homepage/store/coupon/footer behavior untouched.
   ========================================================= */
@media (max-width:700px){
  .gc-site-header.gcfm-mobile-search-open{
    width:100%!important;
    background:var(--gc-header,#161616)!important;
    overflow:visible!important;
  }

  /* Search mode becomes the actual header row instead of an absolute panel
     hanging below a narrower inner container. */
  .gc-site-header.gcfm-mobile-search-open .gc-header-inner{
    display:block!important;
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    background:var(--gc-header,#161616)!important;
  }

  .gc-site-header.gcfm-mobile-search-open .gc-menu-toggle,
  .gc-site-header.gcfm-mobile-search-open .gc-brand-wrap,
  .gc-site-header.gcfm-mobile-search-open .gc-search-toggle,
  .gc-site-header.gcfm-mobile-search-open .gc-account-actions{
    display:none!important;
  }

  .gc-site-header.gcfm-mobile-search-open .gc-header-search,
  .gc-site-header.gcfm-mobile-search-open .gc-header-search.is-open{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    min-height:68px!important;
    margin:0!important;
    padding:10px 15px!important;
    box-sizing:border-box!important;
    background:var(--gc-header,#161616)!important;
    box-shadow:none!important;
  }
}