/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Header pinning — desktop only (>=992px, matching the mobile header's own
hidden-lg/hidden-md breakpoint: the drawer only exists below 992px).
The header group was position:sticky, which on macOS rubber-band overscroll at the very top
makes the HEADER itself dip down and snap back. Live pins the header (position:fixed) so only
the page content below it rubber-bands. Fixed keeps the header pinned on scroll exactly like
sticky did, but without the top-overscroll jitter.
Scoped to desktop because site.js's mobile drawer ("push" open animation) shifts the whole
via margin-left and expects the header to shift along with it (the logo's hardcoded
high z-index is what keeps it visible beside the opened drawer). A position:fixed header
ignores that body margin entirely, so it stays put at x:0 — hidden under the opened drawer,
with only the logo (repositioned by site.js) peeking through on top of it. Below 992px the
header stays position:sticky (its original, drawer-compatible behavior).
Because a fixed header leaves the normal flow, #main-content is offset by the header-group
height only at the same >=992px breakpoint — below that the sticky header still occupies its
own in-flow space, so adding padding-top there would double-count the height and leave a gap.
The exact height (which varies when the announcement/weather bars are enabled) is set by
site.js into --wd-header-h; the 94px fallback covers the first paint before JS runs. */
@media (min-width: 992px) {
.sticky-header-group[b-zym87zwfdv] {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
}
#main-content[b-zym87zwfdv] {
padding-top: var(--wd-header-h, 94px);
}
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-g7tdmqgin0],
.components-reconnect-repeated-attempt-visible[b-g7tdmqgin0],
.components-reconnect-failed-visible[b-g7tdmqgin0],
.components-pause-visible[b-g7tdmqgin0],
.components-resume-failed-visible[b-g7tdmqgin0],
.components-rejoining-animation[b-g7tdmqgin0] {
display: none;
}
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-g7tdmqgin0],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-g7tdmqgin0],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-g7tdmqgin0],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-g7tdmqgin0],
#components-reconnect-modal.components-reconnect-retrying[b-g7tdmqgin0],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-g7tdmqgin0],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-g7tdmqgin0],
#components-reconnect-modal.components-reconnect-failed[b-g7tdmqgin0],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-g7tdmqgin0] {
display: block;
}
#components-reconnect-modal[b-g7tdmqgin0] {
background-color: white;
width: 20rem;
margin: 20vh auto;
padding: 2rem;
border: 0;
border-radius: 0.5rem;
box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
animation: components-reconnect-modal-fadeOutOpacity-b-g7tdmqgin0 0.5s both;
&[open]
{
animation: components-reconnect-modal-slideUp-b-g7tdmqgin0 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-g7tdmqgin0 0.5s ease-in-out 0.3s;
animation-fill-mode: both;
}
}
#components-reconnect-modal[b-g7tdmqgin0]::backdrop {
background-color: rgba(0, 0, 0, 0.4);
animation: components-reconnect-modal-fadeInOpacity-b-g7tdmqgin0 0.5s ease-in-out;
opacity: 1;
}
@keyframes components-reconnect-modal-slideUp-b-g7tdmqgin0 {
0% {
transform: translateY(30px) scale(0.95);
}
100% {
transform: translateY(0);
}
}
@keyframes components-reconnect-modal-fadeInOpacity-b-g7tdmqgin0 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes components-reconnect-modal-fadeOutOpacity-b-g7tdmqgin0 {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.components-reconnect-container[b-g7tdmqgin0] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
#components-reconnect-modal p[b-g7tdmqgin0] {
margin: 0;
text-align: center;
}
#components-reconnect-modal button[b-g7tdmqgin0] {
border: 0;
background-color: #6b9ed2;
color: white;
padding: 4px 24px;
border-radius: 4px;
}
#components-reconnect-modal button:hover[b-g7tdmqgin0] {
background-color: #3b6ea2;
}
#components-reconnect-modal button:active[b-g7tdmqgin0] {
background-color: #6b9ed2;
}
.components-rejoining-animation[b-g7tdmqgin0] {
position: relative;
width: 80px;
height: 80px;
}
.components-rejoining-animation div[b-g7tdmqgin0] {
position: absolute;
border: 3px solid #0087ff;
opacity: 1;
border-radius: 50%;
animation: components-rejoining-animation-b-g7tdmqgin0 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.components-rejoining-animation div:nth-child(2)[b-g7tdmqgin0] {
animation-delay: -0.5s;
}
@keyframes components-rejoining-animation-b-g7tdmqgin0 {
0% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 0;
}
4.9% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 0;
}
5% {
top: 40px;
left: 40px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 80px;
height: 80px;
opacity: 0;
}
}
/* /Components/Layout/SiteHeader.razor.rz.scp.css */
/* Header overrides scoped to SiteHeader.
The compiled legacy bundle (app-wd.css) forces an open top-level dropdown to
min-height: 387px so a promo image panel fits. Menus that carry no promo card
(e.g. "Shop") end up with dead space below the last link. Live has no such gap.
Collapse the min-height for promo-less dropdowns (tagged .topNav__listmenu--flat). */
.v6-header .topNav-Menu .topNav__accordion .topNav.open ul.topNav__listmenu.topNav__listmenu--flat[b-7alu0547xc] {
min-height: 0;
}
/* With the desktop quick-bar emptied, the store/login row was stranded at the top of
the full-height quickLogin column while the nav sits bottom-aligned. Bottom-align the
store/login row (quickLogin is the full-height positioning context) so the store name
+ Log In / Sign Up line up with the nav links. */
.v6-header .main-header-section .LoginSign-QAB .quickLogin[b-7alu0547xc] {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.v6-header .main-header-section .quickLogin .StrLogin-section[b-7alu0547xc] {
margin-bottom: 0;
padding-bottom: 15px;
}
/* Desktop "Shop" mega-menu: live opens this panel only on click, with a slide/fade-in
animation (jQuery .slideDown(300)/.slideUp(300) on Bootstrap's show.bs.dropdown/hide.bs.dropdown).
Two things stood in the way of matching that here:
1. The compiled legacy bundle (refresh.min.css) ships Bootstrap 3's own dropdown rule,
`.open > .dropdown-menu { display: block }` — since display can't be transitioned,
any class-driven open (including the hover-triggered one site.js used to add) shows
the panel instantly with no animation.
2. `.topNav__accordion ul` is hidden by `left: -99999em` by default; the "open" state
(from app-wd.css) only sets `left`/`min-height`/`display`, still with no transition.
Force the panel to stay display:block always (bypassing Bootstrap's display:none/block
toggle) and drive the actual show/hide entirely with opacity + transform, which DO
transition. site.js now toggles `.open` on click only (see the desktop mega menu
comment there) — hover no longer opens it. */
.v6-header .topNav-Menu .topNav__accordion > li.dropdown.topNav > ul.topNav__listmenu.dropdown-menu[b-7alu0547xc] {
display: block !important;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
pointer-events: none;
}
.v6-header .topNav-Menu .topNav__accordion > li.dropdown.topNav.open > ul.topNav__listmenu.dropdown-menu[b-7alu0547xc] {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}
/* /Components/Pages/ShoppingDepartments.razor.rz.scp.css */
/* Blazor's enhanced-navigation focus management sets tabindex="-1" + .focus() on this
page's after navigation (for screen-reader announcement) — tabindex="-1"
elements are never reachable via keyboard Tab order, so hiding the visual ring here
costs nothing accessibility-wise while removing the distracting blue outline box. */
[tabindex="-1"]:focus[b-uuxy4jwf7e] {
outline: none;
}
/* Live's static markup has a whitespace text node between each and
;
since .deptUl li is display:inline-block, that whitespace collapses to a ~3.84px
gap between cards on the same row (measured via getBoundingClientRect diffing
against live). Razor's @foreach strips whitespace-only text nodes between markup
elements (including entity/NBSP substitutes), so column-gap reproduces the same
effect without relying on a literal whitespace node — and unlike a fixed margin,
it doesn't add a spurious offset to the first card of a wrapped row.
*/
.deptUl[b-uuxy4jwf7e] {
display: flex;
flex-wrap: wrap;
column-gap: 3.84375px;
}
/* /Components/Shared/PageSections.razor.rz.scp.css */
/* hero_banner (image variant) layout — none of the live CSS bundles define these class
names generically; the live site ships this layout as a page-specific inline