/* ==========================================================================
   HEADER + NAV  (namespaced: .hd, .nav, .mega, .dr)
   ========================================================================== */
.hd__bar{background:var(--ink);color:#E4ECF0;font-size:var(--t-xs);text-align:center;padding:9px var(--sp4);letter-spacing:.01em}
.hd__bar b{color:#FFD6D8;font-weight:600}
.hd{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd__row{max-width:var(--w);margin:0 auto;padding:12px var(--gut);display:flex;align-items:center;gap:var(--sp5)}
.hd__burger,.hd__searchBtn{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  background:none;border:none;cursor:pointer;color:var(--ink);border-radius:var(--r-sm)}
.hd__burger:hover,.hd__searchBtn:hover{background:var(--cream)}
.hd__burger svg,.hd__searchBtn svg{width:21px;height:21px}
.hd__logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0}
.hd__logo svg{width:34px;height:34px}
.hd__word{font-family:var(--f-display);font-weight:700;font-size:1.28rem;letter-spacing:-.03em;color:var(--ink)}
.hd__search{flex:1;max-width:460px;display:flex;position:relative}
.hd__searchInput{flex:1;font:inherit;font-size:var(--t-md);color:var(--ink);background:var(--cream);
  border:1.5px solid var(--line);border-right:none;border-radius:var(--r-full) 0 0 var(--r-full);padding:11px 16px 11px 40px}
.hd__searchIcon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--mute);pointer-events:none}
.hd__searchInput::placeholder{color:var(--mute)}
.hd__searchInput:focus{outline:none;border-color:var(--ink);background:#fff}
.hd__searchGo{border:1.5px solid var(--ink);background:var(--ink);color:#fff;font:inherit;font-size:var(--t-md);
  font-weight:600;border-radius:0 var(--r-full) var(--r-full) 0;padding:0 20px;cursor:pointer}
.hd__searchGo:hover{background:var(--ink-2);border-color:var(--ink-2)}
.hd__acts{display:flex;align-items:center;gap:var(--sp2);margin-left:auto}
.hd__act{display:flex;align-items:center;gap:7px;text-decoration:none;font-size:var(--t-md);font-weight:500;
  padding:9px 12px;border-radius:var(--r-sm);min-height:44px}
.hd__act:hover{background:var(--cream)}
.hd__act svg{width:18px;height:18px;flex-shrink:0}
.hd__count{background:var(--action);color:#fff;font-size:.68rem;font-weight:700;min-width:18px;height:18px;
  border-radius:var(--r-full);display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.hd__mSearch{display:none;padding:12px var(--gut);background:var(--cream);border-top:1px solid var(--line)}
.hd__mSearch.is-open{display:block}
.hd__mSearchForm{display:flex}
.hd__mSearchForm input{flex:1;font:inherit;font-size:16px;border:1.5px solid var(--ink);border-right:none;
  border-radius:var(--r-full) 0 0 var(--r-full);padding:12px 16px;background:#fff}
.hd__mSearchForm button{border:none;background:var(--action);color:#fff;font:inherit;font-size:var(--t-md);
  font-weight:600;border-radius:0 var(--r-full) var(--r-full) 0;padding:0 20px;cursor:pointer}

/* nav bar */
.nav{border-top:1px solid var(--line-2);background:#fff}
.nav__list{max-width:var(--w);margin:0 auto;padding:0 var(--gut);display:flex;align-items:stretch;
  gap:var(--sp6);list-style:none}
.nav__item{position:static;display:flex}
.nav__link{display:flex;align-items:center;gap:5px;padding:13px 0;text-decoration:none;font-size:var(--t-md);
  font-weight:500;color:var(--ink);border-bottom:2.5px solid transparent;white-space:nowrap;transition:border-color .15s,color .15s}
.nav__link:hover{border-bottom-color:var(--line)}
.nav__link svg{width:11px;height:11px;color:var(--mute);transition:transform .18s}
.nav__link--free{color:var(--action);font-weight:600}
/* Baymard: 95% of sites fail to show current location — we don't. */
.nav__link[aria-current]{border-bottom-color:var(--coral);font-weight:600}
.nav__item:hover .nav__link svg,.nav__item:focus-within .nav__link svg{transform:rotate(180deg)}

/* mega panel */
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);box-shadow:0 24px 44px -20px rgba(6,41,58,.22);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;z-index:90;
  max-height:calc(100vh - 200px);overflow-y:auto;
  transition:opacity .17s,transform .17s,visibility .17s}
.nav__item:hover .mega,.nav__item:focus-within .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:.1s}
.nav__item.is-shut .mega{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.mega__in{max-width:var(--w);margin:0 auto;padding:var(--sp6) var(--gut) var(--sp7);
  display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1.05fr) 272px;align-items:start}
.mega__col{padding-right:var(--sp6)}
.mega__col + .mega__col{padding-left:var(--sp6);border-left:1px solid var(--line-2)}
.mega__label{font-family:var(--f-body);font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);margin-bottom:var(--sp3)}
.mega__list{list-style:none;display:grid;gap:1px}
.mega__list--two{grid-template-columns:1fr 1fr;column-gap:var(--sp5)}
.mega__link{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0 -10px;border-radius:var(--r-sm);
  text-decoration:none;font-size:var(--t-md);font-weight:500;color:var(--ink);line-height:1.35}
.mega__link:hover{background:var(--cream);color:var(--action)}
.mega__n{margin-left:auto;font-size:var(--t-xs);font-weight:500;color:var(--mute);flex-shrink:0}
.mega__all{grid-column:1/-1;margin-top:8px;padding-top:9px;border-top:1px dashed var(--line)}
.mega__allLink{display:inline-flex;align-items:center;gap:6px;padding:6px 0;text-decoration:none;
  font-size:var(--t-md);font-weight:600;color:var(--action)}
.mega__allLink:hover{text-decoration:underline}
.mega__thumb{width:55px;height:55px;border-radius:var(--r-sm);background:var(--cream);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;padding:7px;flex-shrink:0}
  span.mega__thumb img {width: 50px;height: 50px;}
.mega__meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.mega__meta b{font-weight:500;font-size:var(--t-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mega__meta span{font-family:var(--f-display);font-weight:700;font-size:var(--t-sm)}
.mega__promo{margin-left:var(--sp6);background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp5)}
.mega__promoTitle{font-size:var(--h3);margin:10px 0 6px}
.mega__promoText{font-size:var(--t-sm);color:var(--slate);line-height:1.5;margin-bottom:var(--sp4)}

/* mobile drawer */
.dr{position:fixed;inset:0;z-index:150;display:none}
.dr.is-open{display:block}
.dr__scrim{position:absolute;inset:0;background:rgba(6,41,58,.55)}
.dr__panel{position:absolute;inset:0 auto 0 0;width:min(348px,88vw);background:#fff;display:flex;
  flex-direction:column;overflow-y:auto}
.dr__top{display:flex;align-items:center;justify-content:space-between;padding:14px var(--sp5);
  border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.dr__word{font-family:var(--f-display);font-weight:700;font-size:1.18rem;letter-spacing:-.03em}
.dr__x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;
  border:none;cursor:pointer;color:var(--ink);border-radius:var(--r-sm)}
.dr__x svg{width:20px;height:20px}
.dr__search{padding:var(--sp4) var(--sp5);border-bottom:1px solid var(--line)}
.dr__searchForm{display:flex}
.dr__searchForm input{flex:1;font:inherit;font-size:16px;border:1.5px solid var(--line);border-right:none;
  border-radius:var(--r-full) 0 0 var(--r-full);padding:12px 16px;background:var(--cream)}
.dr__searchForm button{border:1.5px solid var(--ink);background:var(--ink);color:#fff;
  border-radius:0 var(--r-full) var(--r-full) 0;padding:0 18px;cursor:pointer}
.dr__nav{list-style:none;flex:1;padding:var(--sp2) 0}
.dr__row{border-bottom:1px solid var(--line-2)}
.dr__link,.dr__acc{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:15px var(--sp5);min-height:54px;font:inherit;font-size:var(--t-lg);font-weight:600;color:var(--ink);
  background:none;border:none;text-align:left;text-decoration:none;cursor:pointer}
.dr__link--free{color:var(--action)}
.dr__acc svg{width:16px;height:16px;color:var(--mute);flex-shrink:0;transition:transform .18s}
.dr__acc[aria-expanded="true"] svg{transform:rotate(180deg)}
.dr__sub{list-style:none;display:none;background:var(--cream);padding:6px 0}
.dr__acc[aria-expanded="true"] + .dr__sub{display:block}
.dr__subLink{display:flex;align-items:center;justify-content:space-between;padding:12px var(--sp5) 12px 38px;
  min-height:46px;text-decoration:none;font-size:var(--t-md);color:var(--ink)}
.dr__subLink:hover{background:#fff}
.dr__subN{font-size:var(--t-xs);color:var(--mute)}
.dr__foot{border-top:1px solid var(--line);padding:var(--sp5);background:var(--cream)}
.dr__footLabel{font-family:var(--f-body);font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);margin-bottom:var(--sp3)}
.dr__footList{list-style:none;display:grid}
.dr__footLink{display:flex;align-items:center;min-height:44px;text-decoration:none;font-size:var(--t-md)}
body.is-locked{overflow:hidden}

/* ==========================================================================
   Responsive
   --------------------------------------------------------------------------
   Without this block .hd__burger stays display:none at every width, so the
   mobile drawer can never be opened. Carried over verbatim from the v3
   prototype.
   ========================================================================== */

@media (max-width:1020px){
  .mega__in{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .mega__promo{display:none}
}

@media (max-width:960px){
  /* Show the mobile controls. */
  .hd__burger,.hd__searchBtn{display:flex}

  /* Hide their desktop equivalents. */
  .hd__search{display:none}
  .nav{display:none}
  .mega{display:none}
  .hd__util{display:none}
  .hd__barIn{justify-content:center;min-height:34px}
}

@media (max-width:640px){
  .hd__act span{display:none}
}
@media (max-width:479px){
  .hd__act{padding: 9px 5px;}
  html a.custom-logo-link img {
    height: 45px;
    max-width: 115px;
  }
  .hd__row {
      gap: var(--sp3);
      padding: 12px 10px;
  }
  .dr__search { padding: var(--sp4) var(--sp2);}
}