/* Shared, scoped seasonal header. The regular page keeps its pink brand icon. */
.topbar.ck-seasonal-header{
  gap:16px;
}
.ck-seasonal-header .brand-lockup{
  flex:0 0 auto;
  align-items:center;
  min-width:0;
}
.ck-seasonal-header .brand-pumpkin{
  display:block;
  width:50px;
  height:auto;
  flex:0 0 auto;
  object-fit:contain;
}
.ck-seasonal-header .brand-name{white-space:nowrap}
.ck-seasonal-header .seasonal-nav{
  display:flex;
  align-items:center;
  margin-left:auto;
  flex:0 0 auto;
}
.ck-seasonal-header .seasonal-offer{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
  padding:6px 15px 6px 11px;
  border:1px solid #e8c294;
  border-radius:999px;
  background:#f9e6ca;
  color:#683b13;
  font-family:inherit;
  font-size:.85rem;
  font-weight:750;
  line-height:1.3;
  text-decoration:none;
  white-space:nowrap;
}
.ck-seasonal-header .seasonal-offer img{
  display:block;
  width:29px;
  height:auto;
  flex:0 0 auto;
}
.ck-seasonal-header .seasonal-offer:hover{
  background:#f5d8ac;
  color:#4f2b0b;
  text-decoration:none;
}
.ck-seasonal-header .seasonal-offer:focus-visible{
  outline:3px solid #a45b13;
  outline-offset:4px;
}
.ck-seasonal-header .seasonal-offer[aria-current="page"]{
  background:#f5d8ac;
  border-color:#c78b43;
}
/* Preserve step-back navigation in the existing PhoneMatch/contact flow. */
.ck-seasonal-flow-header .hw-flow-pill{
  margin-right:auto;
  margin-left:4px;
  font-size:.76rem;
}
.ck-seasonal-flow-header > .top-link{flex:0 0 auto}
@media(max-width:700px){
  .topbar.ck-seasonal-header{gap:10px}
  .ck-seasonal-header .brand-lockup{gap:8px}
  .ck-seasonal-header .brand-pumpkin{width:43px}
  .ck-seasonal-header .seasonal-offer{
    gap:6px;
    padding:6px 10px 6px 8px;
    font-size:.75rem;
  }
  .ck-seasonal-header .seasonal-offer img{width:24px}
  .ck-seasonal-flow-header .hw-flow-pill{display:none}
}
@media(max-width:380px){
  .topbar.ck-seasonal-header{padding-left:16px;padding-right:16px;gap:8px}
  .ck-seasonal-header .brand-pumpkin{width:38px}
  .ck-seasonal-header .brand-name{font-size:1.08rem}
  .ck-seasonal-header .seasonal-offer{font-size:.72rem;gap:5px;padding-left:7px;padding-right:9px}
  .ck-seasonal-header .seasonal-offer img{width:22px}
}