/* HydroGrid site-wide October Kitchen Filter offer — shared popup shell — 2026-10-03 */
/* One stylesheet for every public page. Scoped under #hg-oct-offer so it cannot
   restyle any existing page element, and viewport-fixed so scroll position is
   irrelevant. z-index sits above the premium nav (1000) and the kitchen page's
   own modal (9999) so the popup is never rendered underneath anything. */

#hg-oct-offer[hidden]{display:none!important}

#hg-oct-offer{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:16px!important;
  box-sizing:border-box!important;
  background:rgba(3,18,37,.72)!important;
  -webkit-backdrop-filter:blur(3px)!important;
  backdrop-filter:blur(3px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}

#hg-oct-offer-card{
  position:relative!important;
  width:min(520px,100%)!important;
  max-height:calc(100vh - 32px)!important;
  max-height:calc(100dvh - 32px)!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  box-sizing:border-box!important;
  background:#fff!important;
  color:#112c45!important;
  border-radius:20px!important;
  padding:26px 26px 24px!important;
  box-shadow:0 34px 90px rgba(3,18,37,.42)!important;
  text-align:left!important;
  line-height:1.45!important;
}

#hg-oct-offer-card:focus{outline:3px solid #1466ee!important;outline-offset:3px!important}

#hg-oct-offer-media{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:190px!important;
  object-fit:cover!important;
  border-radius:14px!important;
  margin:0 0 16px!important;
  background:#eef5fb!important;
}

#hg-oct-offer-eyebrow{
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:1.4px!important;
  text-transform:uppercase!important;
  color:#1466ee!important;
  margin:0 0 6px!important;
}

#hg-oct-offer-title{
  font-size:27px!important;
  line-height:1.12!important;
  font-weight:900!important;
  letter-spacing:-.6px!important;
  color:#0b2036!important;
  margin:0 0 8px!important;
}

#hg-oct-offer-lede{
  font-size:14px!important;
  color:#51657a!important;
  margin:0 0 16px!important;
}

/* Price block. Restrained strikethrough: a thin line, not a loud strike style. */
#hg-oct-offer-prices{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin:0 0 14px!important;
}
#hg-oct-offer-prices>div{
  border:1px solid #dfe9f2!important;
  border-radius:14px!important;
  padding:13px 14px!important;
  background:#f7fbfe!important;
  min-width:0!important;
}
#hg-oct-offer-prices strong{
  display:block!important;
  font-size:21px!important;
  font-weight:900!important;
  color:#0b2036!important;
  font-variant-numeric:tabular-nums!important;
  margin:0 0 3px!important;
  overflow-wrap:anywhere!important;
}
#hg-oct-offer-prices small{
  display:block!important;
  font-size:11.5px!important;
  line-height:1.4!important;
  color:#5b7085!important;
  font-weight:600!important;
}
/* Restrained strikethrough on the normal price only. */
#hg-oct-offer-was{
  font-size:14px!important;
  font-weight:700!important;
  color:#6a7d90!important;
  text-decoration:line-through!important;
  text-decoration-thickness:1px!important;
  text-decoration-color:#9fb1c2!important;
  margin:0 0 2px!important;
}

#hg-oct-offer-timer-row{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  margin:0 0 14px!important;
}
#hg-oct-offer-timer{
  font-size:30px!important;
  font-weight:900!important;
  color:#1466ee!important;
  font-variant-numeric:tabular-nums!important;
  letter-spacing:.5px!important;
  line-height:1!important;
  margin:0!important;
}
#hg-oct-offer-timer-label{
  font-size:11.5px!important;
  font-weight:700!important;
  color:#5b7085!important;
  margin:0!important;
  flex:1 1 130px!important;
  min-width:0!important;
}
#hg-oct-offer-timer.is-expired{color:#8a4b12!important}

#hg-oct-offer-fine{
  font-size:11.5px!important;
  line-height:1.5!important;
  color:#63788c!important;
  margin:0 0 16px!important;
}
#hg-oct-offer-fine b{color:#33495d!important;font-weight:800!important}

#hg-oct-offer-actions{
  display:flex!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  margin:0!important;
}
#hg-oct-offer-cta,
#hg-oct-offer-close{
  flex:1 1 170px!important;
  min-height:48px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:12px 16px!important;
  border-radius:12px!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.2!important;
  cursor:pointer!important;
  text-align:center!important;
  box-sizing:border-box!important;
}
#hg-oct-offer-cta{
  background:#1466ee!important;
  color:#fff!important;
  border:1px solid #1466ee!important;
  text-decoration:none!important;
}
#hg-oct-offer-cta:hover,#hg-oct-offer-cta:focus-visible{background:#0750c8!important;border-color:#0750c8!important}
#hg-oct-offer-close{
  background:#fff!important;
  color:#112c45!important;
  border:1px solid #c9d8e5!important;
}
#hg-oct-offer-close:hover,#hg-oct-offer-close:focus-visible{background:#eef5fb!important}

/* The dismiss control is a corner button so it never steals the CTA row, but it
   still clears the 44px minimum touch target. */
#hg-oct-offer-x{
  position:absolute!important;
  top:10px!important;
  right:10px!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(17,44,69,.16)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.94)!important;
  color:#112c45!important;
  font-size:22px!important;
  line-height:1!important;
  cursor:pointer!important;
  padding:0!important;
}
#hg-oct-offer-x:hover,#hg-oct-offer-x:focus-visible{background:#eef5fb!important}

@media(max-width:560px){
  #hg-oct-offer{padding:12px!important}
  #hg-oct-offer-card{padding:20px 18px 18px!important;border-radius:16px!important}
  #hg-oct-offer-media{max-height:140px!important;margin-bottom:12px!important}
  #hg-oct-offer-title{font-size:22px!important}
  #hg-oct-offer-prices{grid-template-columns:1fr!important}
  #hg-oct-offer-prices strong{font-size:19px!important}
  #hg-oct-offer-timer{font-size:26px!important}
  #hg-oct-offer-actions{flex-direction:column!important}
  #hg-oct-offer-cta,#hg-oct-offer-close{flex:1 1 auto!important;width:100%!important}
}

/* Short landscape phones: let the card scroll rather than clip the CTA. */
@media(max-height:560px){
  #hg-oct-offer-card{max-height:calc(100vh - 24px)!important;padding:16px 16px 14px!important}
  #hg-oct-offer-card{max-height:calc(100dvh - 24px)!important}
  #hg-oct-offer-media{display:none!important}
  #hg-oct-offer-title{font-size:20px!important}
}

@media(prefers-reduced-motion:reduce){
  #hg-oct-offer *{animation:none!important;transition:none!important}
}