/* The Nörda menu (FlexWidgetsNorda menu/desktop.phtml and menu/mobile.phtml), the text logo, the footer accordion
   and the round swatches. Loads after norda.css and uses its custom properties. */

/* logo: Magento_Theme::html/header/logo-text.phtml, in the header and the drawer head */
#header .flex-logo-text{display:inline-block;padding:0;font-family:var(--n-serif);font-weight:400;font-size:38px;line-height:1;letter-spacing:-.01em;color:var(--n-ink);text-decoration:none;white-space:nowrap}
#header .flex-logo-text:hover{color:var(--n-ink)}
#header .flex-logo-text:focus-visible{outline:2px solid var(--n-accent);outline-offset:4px;border-radius:2px}
@media (max-width:899px){
  #header .flex-logo-text{font-size:32px;padding:6px 0}
}

.norda-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* The drawer CTA's logged-in state is set in the browser; it has to beat the CTA's own display:flex. */
.norda-is-hidden{display:none!important}

/* desktop menu */
.flex-mega-nav{--flex-nav-hover-color:var(--n-ink)}
.megamenu-nav-row .flex-mega-nav__list{display:flex;flex-wrap:wrap;align-items:center;column-gap:30px;margin:0;padding:0;list-style:none}
.megamenu-nav-row .flex-mega-nav .flex-mega-nav__link{display:inline-flex;align-items:center;height:52px;padding:0;border-bottom:0;opacity:1;color:var(--n-ink);text-decoration:none}
.megamenu-nav-row .flex-mega-nav .flex-mega-nav__link::after{content:none}
.megamenu-nav-row .flex-mega-nav .flex-mega-nav__link:is(:hover,[aria-current="page"]),.megamenu-nav-row .flex-mega-nav .flex-mega-nav__item--open>.flex-mega-nav__link{box-shadow:inset 0 -2px 0 var(--n-ink)}
.megamenu-nav-row .flex-mega-nav .flex-mega-nav__link[aria-current="page"],.megamenu-nav-row .flex-mega-nav .flex-mega-nav__item--open>.flex-mega-nav__link{font-weight:600}
.megamenu-nav-row .flex-mega-nav .flex-mega-nav__link:focus-visible{outline:2px solid var(--n-accent);outline-offset:-2px}
/* The room toggle takes no width, so the row keeps the canvas spacing: it sits in the gap after the link, visible on focus and on touch screens, where hover cannot open the panel. */
.megamenu-nav-row .flex-mega-nav__toggle{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;background:none;opacity:1;color:var(--n-ink);cursor:pointer}
.megamenu-nav-row .flex-mega-nav__toggle:focus-visible{position:static;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:26px;height:52px;margin:0 -26px 0 0;clip:auto;overflow:visible;outline:2px solid var(--n-accent);outline-offset:-2px}
.megamenu-nav-row .flex-mega-nav__toggle svg{width:12px;height:12px;transition:transform .2s var(--n-ease)}
.megamenu-nav-row .flex-mega-nav__item--open>.flex-mega-nav__toggle svg{transform:rotate(180deg)}
/* On touch screens the toggle is the only way into a room. The hit area grows to 44px over the end of the room
   name and the 4px left of the gap, never over the next room. */
@media (hover:none){
  .megamenu-nav-row .flex-mega-nav__toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:26px;height:52px;margin:0 -26px 0 0;clip:auto;overflow:visible}
  .megamenu-nav-row .flex-mega-nav__toggle::after{content:"";position:absolute;top:0;bottom:0;left:-14px;right:-4px}
}
/* Reserves the bold width so opening a room does not shift its neighbours. */
.flex-mega-nav__label{display:inline-flex;flex-direction:column}
.flex-mega-nav__label::after{content:attr(data-label);height:0;overflow:hidden;visibility:hidden;font-weight:600;pointer-events:none;user-select:none}

/* The header's own nav_links list follows the Nörda menu in the same row. */
.megamenu-nav-row .norda-menu{flex:0 0 auto;width:auto}
.megamenu-nav-row .norda-menu~ul{--flex-nav-hover-color:var(--n-accent);flex:1 1 auto;flex-wrap:nowrap;column-gap:30px;padding:0 0 0 30px}
.megamenu-nav-row .norda-menu~ul>li{flex:none;white-space:nowrap}
.megamenu-nav-row .norda-menu~ul::before{content:"";flex:none;width:1px;height:22px;background:#D9CFBF}
.megamenu-nav-row .norda-menu~ul>li:last-child:not(:first-child){margin-left:auto}
/* The link's colour is an inline style from the header config, so only !important can mute it. */
.megamenu-nav-row .norda-menu~ul>li:last-child:not(:first-child)>a{color:var(--n-muted)!important;font-size:14px}
/* Below 1280px the row cannot hold all nine links on one line; the swatch link stays reachable from the footer and the swatches section. */
@media (max-width:1279px){
  .megamenu-nav-row .norda-menu~ul>li:last-child:not(:first-child){display:none}
}
.megamenu-nav-row .norda-menu~ul a.flex-nav-link{min-height:52px;padding-block:0}
.megamenu-nav-row .norda-menu~ul a>span.rounded-full{padding:3px 8px;border-radius:10px;font-size:11px;font-weight:600;letter-spacing:.04em;line-height:1.2;text-transform:none}

/* The nav row is the containing block (norda.css), so the panel and the scrim span the full row. The scrim starts
   under the row, which keeps it off the header, and sits below the panel. */
.megamenu-nav-row .flex-menu-panel--editorial{position:absolute;left:0;right:0;top:100%;z-index:50;background:var(--n-surface);border-top:0;border-bottom:1px solid var(--n-line);color:var(--n-ink);box-shadow:0 24px 48px -24px rgba(30,27,23,.35)}
.megamenu-nav-row .norda-menu__scrim{position:absolute;left:0;right:0;top:100%;z-index:49;height:100vh;background:rgba(30,27,23,.38);cursor:pointer}
.megamenu-nav-row .flex-mega-panel{display:flex;gap:40px;max-width:1392px;margin:0 auto;padding:36px 48px 40px;box-sizing:border-box}
/* FlexCore's fade-slide menu motion animates .flex-menu-content, which the editorial panel does not carry. */
.flex-menu-open-fade-slide .megamenu-nav-row .flex-mega-panel{animation:flex-menu-content calc(var(--motion-duration) * 2) var(--motion-ease-out) calc(var(--motion-duration) * .4) both}
.megamenu-nav-row .flex-mega-panel a{color:var(--n-ink);text-decoration:none}
.megamenu-nav-row .flex-mega-panel a:focus-visible{outline:2px solid var(--n-accent);outline-offset:3px;border-radius:2px}

.megamenu-nav-row .flex-mega-panel__intro{flex:0 0 230px;width:auto;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.megamenu-nav-row .flex-mega-panel__title{margin:0;font-family:var(--n-serif);font-weight:400;font-size:40px;line-height:1;color:var(--n-ink)}
.megamenu-nav-row .flex-mega-panel__lead{margin:0;font-size:14px;line-height:1.55;color:var(--n-muted)}
.megamenu-nav-row .flex-mega-panel .flex-mega-panel__all{margin:0;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.megamenu-nav-row .flex-mega-panel__links{align-self:stretch;display:flex;flex-direction:column;gap:10px;margin:0;padding:14px 0 0;border-top:1px solid var(--n-line);list-style:none}
.megamenu-nav-row .flex-mega-panel__links>li{margin:0}
.megamenu-nav-row .flex-mega-panel__links a{font-size:14px}
.megamenu-nav-row .flex-mega-panel .flex-mega-panel__links a:hover,.megamenu-nav-row .flex-mega-panel .flex-mega-panel__all:hover{color:var(--n-accent)}

.megamenu-nav-row .flex-mega-panel__tiles{display:grid;grid-template-columns:repeat(var(--norda-menu-cols,4),minmax(0,1fr));flex:1;min-width:0;gap:24px;align-content:start;margin:0;padding:0;list-style:none}
.megamenu-nav-row .flex-mega-panel__tile{display:flex;flex-direction:column;gap:10px}
.megamenu-nav-row .flex-mega-panel__media{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:4px;background:#E6DCCB}
.megamenu-nav-row .flex-mega-panel__media picture,.megamenu-nav-row .flex-mega-panel__promo-media picture{display:block;width:100%;height:100%}
.megamenu-nav-row .flex-mega-panel__img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px;transition:transform .7s var(--n-ease)}
.megamenu-nav-row .flex-mega-panel__tile:hover .flex-mega-panel__img,.megamenu-nav-row .flex-mega-panel__promo:hover .flex-mega-panel__img{transform:scale(1.04)}
/* The count always sits under the name; side by side it wrapped or not depending on the name's length. */
.megamenu-nav-row .flex-mega-panel__meta{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;margin:0}
.megamenu-nav-row .flex-mega-panel__name{font-size:15px;font-weight:500}
.megamenu-nav-row .flex-mega-panel__tile:hover .flex-mega-panel__name{text-decoration:underline;text-underline-offset:3px}
.megamenu-nav-row .flex-mega-panel__count{font-size:12px;color:var(--n-muted);white-space:nowrap}
.megamenu-nav-row .flex-mega-panel__placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#E6DCCB;color:var(--n-muted);font-size:12px}

.megamenu-nav-row .flex-mega-panel__promo{flex:0 0 280px;width:auto;display:flex;flex-direction:column;gap:10px}
.megamenu-nav-row .flex-mega-panel__promo-media{display:block;width:280px;height:350px;aspect-ratio:auto;overflow:hidden;border-radius:4px;background:#E6DCCB}
.megamenu-nav-row .flex-mega-panel__eyebrow{display:block;margin:6px 0 0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--n-muted)}
.megamenu-nav-row .flex-mega-panel__promo-title{display:block;margin:0;font-family:var(--n-serif);font-weight:400;font-size:24px;line-height:1.15}

/* Builder only. The toolbar injector sets position:relative on the menu wrapper, which would shrink the panels
   to the width of the menu; static hands the containing block back to the nav row. */
.flex-editmode .megamenu-nav-row [data-flex-layout-component="norda-menu"]{position:static!important}
/* The header's cog would sit on top of the menu's own; 0,4,0 beats the header's 0,3,0 hover rule. */
.flex-layout-component-editable:has([data-flex-layout-component="norda-menu"]:hover)>.flex-layout-toolbar{opacity:0;visibility:hidden;pointer-events:none}
/* Hover never opens a panel in the builder, so the toggles have to be visible to a mouse. */
.flex-editmode .megamenu-nav-row .flex-mega-nav__toggle{position:static;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:26px;height:52px;margin:0 -26px 0 0;clip:auto;overflow:visible}

@media (prefers-reduced-motion:reduce){
  .megamenu-nav-row .flex-mega-panel__img{transition:none}
  .megamenu-nav-row .flex-mega-panel__tile:hover .flex-mega-panel__img,.megamenu-nav-row .flex-mega-panel__promo:hover .flex-mega-panel__img{transform:none}
  .megamenu-nav-row .flex-menu-panel--editorial.flex-menu-enter,.megamenu-nav-row .flex-menu-panel--editorial.flex-menu-leave{transition:none}
  .megamenu-nav-row .flex-mega-panel{animation:none}
  .megamenu-nav-row .flex-mega-nav__toggle svg{transition:none}
}

/* drawer. :is(#header,body) lifts the drawer's buttons above the #header .btn.p-1 rules, wherever the dialog sits. */
.flex-mobile-menu__burger{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border-radius:22px}
.flex-mobile-menu__burger:hover{background:#EDE6DA}
.flex-mobile-menu__burger:focus-visible{outline:2px solid var(--n-ink);outline-offset:2px}

.flex-mobile-menu{color:var(--n-ink);font-size:16px}
dialog.flex-mobile-menu{width:100%;max-width:none;max-height:none;padding:0;border:0}
/* A modal dialog is the containing block of the absolutely positioned room panels, so a room covers the whole drawer. */
dialog.flex-mobile-menu[open]{display:flex;flex-direction:column;inset:0 auto 0 0;width:100%;height:100%;max-height:100%;margin:0}
.flex-mobile-menu__main{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
/* It takes the dialog's initial focus (autofocus), so a tap on the burger shows no ring on the logo. */
.flex-mobile-menu__main:focus{outline:none}
/* With picture set to contents, its source elements would become empty flex items, each adding a gap. */
.flex-mobile-menu picture{display:contents}
.flex-mobile-menu picture>source{display:none}
:is(#header,body) .flex-mobile-menu :is(a,button):focus-visible{outline:2px solid var(--n-ink);outline-offset:2px}
.flex-mobile-menu__head,.flex-mobile-panel__head{flex:none;border-bottom:1px solid var(--n-line)}
.flex-mobile-menu__head>div,.flex-mobile-panel__head>div{display:flex;align-items:center;gap:8px;min-height:60px;padding:0 8px 0 16px;box-sizing:border-box}
.flex-mobile-menu__logo{flex:1;min-width:0}
:is(#header,body) .flex-mobile-menu__head .flex-logo-text{display:inline-flex;align-items:center;min-height:44px;padding:0;font-family:var(--n-serif);font-weight:400;font-size:32px;line-height:1;letter-spacing:-.01em;color:var(--n-ink);text-decoration:none;white-space:nowrap}
:is(#header,body) .flex-mobile-menu .flex-mobile-menu__head .flex-logo-text:focus-visible{outline-offset:4px;border-radius:2px}
:is(#header,body) .flex-mobile-menu :is(.flex-mobile-menu__head,.flex-mobile-panel__head) :is(.btn,.flex-mobile-panel__back){display:inline-flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;min-width:0;min-height:0;padding:0;border:0;border-radius:22px;background:transparent;color:var(--n-ink);cursor:pointer}
:is(#header,body) .flex-mobile-menu :is(.flex-mobile-menu__head,.flex-mobile-panel__head) :is(.btn,.flex-mobile-panel__back):hover{background:#EDE6DA}
:is(#header,body) .flex-mobile-menu :is(.flex-mobile-menu__head,.flex-mobile-panel__head) :is(.btn,.flex-mobile-panel__back):focus-visible{outline-offset:-2px}
:is(#header,body) .flex-mobile-menu :is(.flex-mobile-menu__head,.flex-mobile-panel__head) .btn svg{width:24px;height:24px;stroke-width:2}
:is(#header,body) .flex-mobile-menu .flex-mobile-panel__back{margin-left:-8px}
:is(#header,body) .flex-mobile-menu .flex-mobile-panel__back svg{width:22px;height:22px}
/* The visible "Menu" text is the back button's accessible name, so it is hidden visually only. */
.flex-mobile-panel__back-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.flex-mobile-panel__title{flex:1;min-width:0;margin:0;font-family:var(--n-serif);font-weight:400;font-size:28px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.flex-mobile-menu__body{display:flex;flex:1;flex-direction:column;min-height:0;padding:0;overflow-x:clip;overflow-y:auto}
.flex-mobile-menu__eyebrow{margin:0;padding:18px 16px 8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--n-muted)}
.flex-mobile-menu__list{margin:0;padding:0;list-style:none}
.flex-mobile-menu__row{display:flex;align-items:center;gap:14px;width:100%;height:auto;min-height:64px;padding:8px 16px;border:0;border-bottom:1px solid var(--n-line);border-radius:0;background:transparent;color:var(--n-ink);font:inherit;font-size:17px;font-weight:400;line-height:1.3;text-align:start;text-decoration:none;cursor:pointer;box-sizing:border-box}
.flex-mobile-menu__row:hover{background:#EDE6DA;color:var(--n-ink)}
:is(#header,body) .flex-mobile-menu .flex-mobile-menu__row:focus-visible{outline-offset:-2px}
.flex-mobile-menu__row>span.flex:first-child{display:flex;align-items:center;flex:1;min-width:0;gap:14px}
button.flex-mobile-menu__row>.btn{display:inline-flex;flex:none;min-width:0;min-height:0;padding:0;border:0;background:none;box-shadow:none;color:var(--n-muted)}
button.flex-mobile-menu__row>.btn svg{width:18px;height:18px}
/* Nav links are the rows without the label wrapper that category rows have. */
a.flex-mobile-menu__row:not(:has(>span.flex)){gap:10px;min-height:52px;font-size:16px}
.flex-mobile-menu__thumb{display:block;flex:none;width:48px;height:48px;border-radius:4px;object-fit:cover;background:#E6DCCB}
/* A category without an image has no thumbnail; the empty square keeps the labels in line. */
.flex-mobile-menu__row>span.flex:first-child:not(:has(.flex-mobile-menu__thumb))::before{content:"";display:block;flex:none;width:48px;height:48px;border-radius:4px;background:#E6DCCB}
.flex-mobile-menu__badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:10px;font-size:11px;font-weight:600;letter-spacing:.04em;line-height:1.2;text-transform:none}

.flex-mobile-menu__foot{display:flex;flex-direction:column;gap:14px;margin-top:auto;padding:18px 16px 22px;background:var(--n-ground)}
.flex-mobile-menu__info{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--n-ink);text-decoration:none}
.flex-mobile-menu__info:hover{color:var(--n-ink)}
.flex-mobile-menu__info-icon{flex:none}
.flex-mobile-menu__info>span{display:flex;flex-direction:column;gap:2px;line-height:normal}
.flex-mobile-menu__info-title{font-size:14px;font-weight:600}
.flex-mobile-menu__info-subtitle{font-size:13px;color:var(--n-muted)}
.flex-mobile-menu .flex-mobile-menu__cta{display:flex;align-items:center;justify-content:center;width:auto;min-height:48px;padding:0 24px;border:0;border-radius:24px;background:var(--n-ink);box-shadow:none;color:#F5F1EA;font-size:15px;font-weight:500;text-decoration:none}
.flex-mobile-menu .flex-mobile-menu__cta:hover{background:#3A352E;color:#F5F1EA}
.flex-mobile-menu__pinned{flex:none;border-top:1px solid var(--n-line);box-shadow:0 -4px 12px rgba(30,27,23,.06)!important}

/* A room panel is a sibling of the drawer's main column and covers it whole. */
.flex-mobile-panel{position:absolute;inset:0;display:flex;flex-direction:column;background:inherit;z-index:1}
.flex-mobile-panel:focus{outline:none}
.flex-mobile-panel__body{display:flex;flex:1;flex-direction:column;gap:16px;min-height:0;padding:16px;overflow-y:auto}
.flex-mobile-menu .flex-mobile-panel__all{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--n-ink);text-decoration:underline;text-underline-offset:4px}
.flex-mobile-menu .flex-mobile-panel__all:hover{color:var(--n-accent)}
.flex-mobile-panel__tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.flex-mobile-menu .flex-mobile-panel__tile{display:flex;flex-direction:column;gap:8px;color:var(--n-ink);text-decoration:none}
.flex-mobile-menu .flex-mobile-panel__tile:hover{color:var(--n-ink)}
.flex-mobile-panel__media{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:4px;background:#E6DCCB}
.flex-mobile-panel__img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.flex-mobile-panel__tile:hover .flex-mobile-panel__img{transform:scale(1.04)}
.flex-mobile-panel__name{font-size:15px;font-weight:500;line-height:1.3}
.flex-mobile-panel__tile:hover .flex-mobile-panel__name{text-decoration:underline;text-underline-offset:3px}
.flex-mobile-panel__placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:4px;box-sizing:border-box;background:#E6DCCB;color:var(--n-muted);font-size:12px;text-align:center}
.flex-mobile-menu .flex-mobile-panel__promo{display:flex;align-items:center;gap:12px;padding:10px;border-radius:6px;background:var(--n-ground);color:var(--n-ink);text-decoration:none}
.flex-mobile-menu .flex-mobile-panel__promo:hover{color:var(--n-ink)}
.flex-mobile-panel__promo-media{display:block;flex:none;width:72px;height:90px;overflow:hidden;border-radius:4px;background:#E6DCCB}
.flex-mobile-panel__promo-media img{display:block;width:100%;height:100%;object-fit:cover}
.flex-mobile-panel__promo-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.flex-mobile-panel__eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--n-muted)}
.flex-mobile-panel__promo-title{font-family:var(--n-serif);font-weight:400;font-size:20px;line-height:1.15}

.norda-drawer-enter{transition:transform .3s var(--n-ease),opacity .3s var(--n-ease)}
.norda-drawer-enter-start{transform:translateX(-100%)}
.flex-mobile-panel.norda-drawer-enter-start{transform:translateX(32px);opacity:0}
.norda-drawer-enter-end{transform:none;opacity:1}

@media (prefers-reduced-motion:reduce){
  .flex-mobile-panel__img{transition:none}
  .flex-mobile-panel__tile:hover .flex-mobile-panel__img{transform:none}
  .norda-drawer-enter{transition:none}
}

/* footer accordion: footer/accordion.phtml turns the column headings into buttons below 768px. Without
   JavaScript, on wider screens and in the builder every column stays open. */
@media (max-width:767px){
  /* norda.css gives these lists display:flex, which beats the hidden attribute. */
  .page-footer .container.py-8>.flex-wrap>*>ul[hidden]{display:none}
  .page-footer .container.py-8>.flex-wrap>*>ul:not([hidden]){padding-bottom:8px}
  .norda-footer-acc__btn{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:52px;cursor:pointer}
  .norda-footer-acc__btn::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--n-ease)}
  .norda-footer-acc__btn[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
  .norda-footer-acc__btn:focus-visible{outline:2px solid #E6DCCB;outline-offset:3px;border-radius:2px}
}
@media (prefers-reduced-motion:reduce){
  .norda-footer-acc__btn::after{transition:none}
}

/* catalog: round swatches. Hyvä's 36px swatch minimum is a logical min-block-size; Flex2's lifestyle reset only clears min-width. */
.flex-sidebar--lifestyle .flex-sidebar-swatch,
.flex-sidebar--lifestyle .swatch-option-link-layered[style*="background-color"],
.flex-pdp--lifestyle .swatch-option[style*="background-color"],
.flex-card--lifestyle .swatch-option,
.flex-card--lifestyle .product-option-value-label{min-inline-size:0;min-block-size:0}

/* Flex2 lifts a lifestyle product card to z-index 50 on :hover and :focus-within, above the header's 20. After a
   product page and back, the browser restores focus to the clicked card, which then covered the open room panel. */
#header{z-index:60}