/* The megamenu (snippets/mega-menu.html).

   Desktop only: the snippet carries display-none-tablet, so none of this shows below 960px.
   The exception is the link icons (the .mm-icons, .mm-icon and .mmi-water rules), which the
   phone menu's Bathrooms and Showers links use too.
   Every rule is scoped to the .mm classes. Link colours are written as ".header .mm a..." because
   section-header.css sets every header link to `color: inherit` at a specificity a single
   class cannot beat.

   The bar is navy with white names (25 Oct 2026): the menu carries the header's emphasis, and
   the top bar above it went quiet, white like the page. The names on the bar are bold (the
   user's choice the same day). In the panels the column headings are Baskerville italic in
   navy; "Shop all …" is gold at font-weight 600, and the "All …" links are black. */

.mm {
  display: block;
  /* the panels hang off this box, so they span the full width of the header */
  position: relative;
  background-color: rgb(var(--color-text));
  /* The department names' size: 14px on a wide screen (from about 1290px; 15px until the user
     asked for a bit smaller, 25 Oct 2026), smaller as the window narrows, so that all eleven
     stay on one line down to 960px, where the phone menu takes over (10px there).
     Measured on these names: at 15px they take 1061px, 66.5px of it letter-spacing, and each
     pixel of size adds 66.3px. With at least 1.33em between names they need (66.3 + 13.3)px a
     pixel of size, plus the 66.5px. The bar has the window less a 17px scrollbar and the
     page's two 30px margins. 82 rather than 79.6 leaves 3% to spare. After renaming or adding
     a department, check the fit: node .local/exp/mm-bar-check.mjs */
  --mm-name-size: clamp(10px, calc((100vw - 144px) / 82), 14px);
  /* how far each name's tab reaches either side of it; two of these are the smallest gap */
  --mm-name-pad: calc(var(--mm-name-size) * 2 / 3);
}

.mm__bar {
  display: flex;
  align-items: stretch;
}

/* The names are spread across the whole bar, in equal gaps: the first starts on the logo's
   line and the last ends on the page's right-hand edge. The menu reaches out by a tab's
   padding at each end, which puts those two names on the edges. */
.mm__menu {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  min-width: 0;
  margin: 0 calc(var(--mm-name-pad) * -1);
  padding: 0;
  list-style: none;
}

/* The bar is cut into one slot per department, meeting halfway between names, so the pointer
   is always on a department and a click anywhere in a slot follows its link. Every slot grows
   by the same amount except the first and last, which grow by half as much and hold their
   names against the ends: the extra space lands in equal gaps between the names. */
.mm__item {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.mm__item:first-child,
.mm__item:last-child {
  flex-grow: 0.5;
}

/* The names' weight is a fine outline round the regular face, not font-weight: bold. The theme
   has no bold of Century Gothic Regular, so browsers fake one, and Firefox (0.48px a letter,
   measured) and Safari draw the faked letters wider: 64px across the eleven names in Firefox,
   enough to push the last one off the bar. An outline leaves every letter its own width.
   0.04em matched Chrome's faked bold to within a pixel; the user set 0.01em (25 Oct 2026), a
   touch heavier than regular. */
.header .mm a.mm__top {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  font-size: var(--mm-name-size);
  font-weight: normal;
  -webkit-text-stroke: 0.01em currentColor;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: #fff;
  transition: color 0.18s ease;
}

.header .mm .mm__item:first-child > a.mm__top {
  justify-content: flex-start;
}

.header .mm .mm__item:last-child > a.mm__top {
  justify-content: flex-end;
}

/* The name and the tab drawn round it: the full height of the bar, with the same padding
   either side at every size. It never wraps. If a browser's minimum font size ever made the
   names too long for the bar, they would end in "…" rather than push the bar wider. */
.mm__name {
  position: relative;
  min-width: 0;
  padding: 19px var(--mm-name-pad);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: background-color 0.18s ease;
}

.mm__name::after {
  content: "";
  position: absolute;
  left: var(--mm-name-pad);
  right: var(--mm-name-pad);
  bottom: 8px;
  height: 2px;
  background: rgb(var(--color-light-text));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

/* The open department's name turns gold in a white tab with its underline, and its panel
   opens straight under it, so the two read as one piece. */
.header .mm .mm__item:hover > a.mm__top,
.header .mm .mm__item.is-open > a.mm__top,
.header .mm a.mm__top:focus-visible {
  color: rgb(var(--color-light-text));
}

.header .mm .mm__item:hover > a.mm__top > .mm__name,
.header .mm .mm__item.is-open > a.mm__top > .mm__name,
.header .mm a.mm__top:focus-visible > .mm__name {
  background-color: #fff;
}

/* Escape shut the panel (component-mega-menu.js): the name keeps its gold, without the tab. */
.header .mm.is-dismissed .mm__item > a.mm__top > .mm__name {
  background-color: transparent;
}

.header .mm .mm__item:hover > a.mm__top > .mm__name::after,
.header .mm .mm__item.is-open > a.mm__top > .mm__name::after,
.header .mm a.mm__top:focus-visible > .mm__name::after {
  transform: scaleX(1);
}

/* ── Panels ─────────────────────────────────────────────────────────────── */

/* No rule along the top: the navy bar is the edge, and the open department's white tab runs
   straight into the panel. The panel slides down out from under the bar. The clip keeps its
   top edge on the bar's bottom edge while it moves, so it never passes over the bar, and cuts
   its shadow off above that edge, where it would grey the tab.
   It starts 1px up, over the bar's last row. The bar's bottom edge usually falls on part of a
   pixel (the top bar above is 52.6px tall), and on a scaled screen (125% on Windows) the
   panel's softened top edge then let whatever lay under it show through as a grey line
   across the tab. Up here, only the navy bar and the white tab lie under that edge. */
.mm-panel {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  z-index: 10;
  background-color: #fff;
  box-shadow: 0 16px 32px rgba(10, 39, 73, 0.12);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  clip-path: inset(6px 0 -48px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, clip-path 0.18s ease, visibility 0s linear 0.18s;
  /* On a short window the panel stops at the bottom of the screen and scrolls inside
     itself. component-mega-menu.js sets the height left below the bar. */
  max-height: var(--mm-panel-max, none);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mm__item--panel:hover > .mm-panel,
.mm__item--panel.is-open > .mm-panel {
  visibility: visible;
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 -48px);
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease, clip-path 0.18s ease, visibility 0s;
}

/* Keyboard: tabbing onto a department opens it. Kept in a rule of its own, because a
   browser without :has() throws away the whole rule it appears in, hover included. */
.mm__item--panel:has(:focus-visible) > .mm-panel {
  visibility: visible;
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 -48px);
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease, clip-path 0.18s ease, visibility 0s;
}

/* Escape shuts the open panel until the pointer or focus moves to another department
   (component-mega-menu.js). Must stay after the open rules above. */
.mm.is-dismissed .mm-panel {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Vertical spacing is kept tight on purpose: the Bathrooms panel, link icons and all, has
   to clear the bottom of a 1366 x 768 laptop screen with the page scrolled to the top. */
.mm-panel__inner {
  padding-top: 18px;
  padding-bottom: 16px;
}

/* Head: title and shop-all links on the left, shop-by shortcuts on the right. */
.mm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 40px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eaecf0;
}

.mm-head__main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 24px;
}

.mm-head__title {
  font-family: baskerville-italic;
  font-size: 30px;
  line-height: 1.1;
  color: rgb(var(--color-text));
}

/* "Shop all bathrooms": gold, at the user's font-weight 600 (25 Oct 2026; it was heavy bold
   gold, then black regular for a few hours that day). Already gold, it turns navy on hover,
   with its underline. */
.header .mm a.mm-head__link {
  font-family: century-gothic-regular;
  font-size: 13px;
  line-height: 18px;
  text-decoration: none;
  color: rgb(var(--color-light-text));
  transition: color 0.15s ease;
  font-weight: 600;
}

.header .mm a.mm-head__link:hover {
  color: rgb(var(--color-text));
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mm-head__shortcuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 32px;
}

.mm-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.mm-chips__label {
  margin-right: 6px;
  font-family: century-gothic-bold;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--color-text), 0.55);
}

.header .mm a.mm-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background-color: #fff;
  font-size: 12px;
  line-height: 16px;
  text-decoration: none;
  color: rgb(var(--color-text));
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.header .mm a.mm-chip:hover {
  border-color: rgb(var(--color-text));
  background-color: rgb(var(--color-text));
  color: #fff;
}

/* Body: the link columns, with the showroom card on the right. */
.mm-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  align-items: start;
  gap: 40px;
}

.mm-body--full {
  grid-template-columns: minmax(0, 1fr);
}

.mm-cols {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px 24px;
}

/* A panel with more or fewer than six columns still keeps them on one row: a second row
   doubles the panel's height. */
.mm-cols--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mm-cols--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mm-cols--7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.mm-cols--8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

/* The column headings: Baskerville italic 19px in navy, the user's pick (25 Oct 2026, after a day
   of Century Gothic: heavy bold navy, black, gold, bold navy, then regular navy; they wanted
   them "prominent, but at the same time not heavy"). It is the face of the panel's title above
   them and of the phone menu's headings. 22px lines keep a heading that wraps readable; long
   names in the eight-column panels wrap even at 1440px. 17px under 1280px and 16px under
   1100px (below), where columns narrow. Gold on hover, like the links under them. */
.header .mm a.mm-col__title {
  display: block;
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eaecf0;
  font-family: baskerville-italic;
  font-size: 19px;
  line-height: 22px;
  text-decoration: none;
  color: rgb(var(--color-text));
  transition: color 0.15s ease;
}

.header .mm a.mm-col__title:hover {
  color: rgb(var(--color-light-text));
}

.mm-col__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Icon and label in two columns, so a label that wraps stays under its own first line. */
.header .mm .mm-col__list a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
  /* 2px, down from 4px: with a 24px icon a row is 28px, close to the 26px a row was
     before the icons */
  padding: 2px 0;
  font-size: 11px;
  line-height: 18px;
  text-decoration: none;
  color: rgba(var(--color-text), 0.8);
  transition: color 0.15s ease;
}

/* the label keeps the second column even on a link that has no icon */
.mm-col__list a > span {
  grid-column: 2;
  min-width: 0;
}

/* A panel whose links have no icons at all (the nine departments after Showers, written out
   from the admin menu on 24 Oct 2026, snippets/mega-menu-<department>.html): the label takes
   the whole row. */
.header .mm .mm-panel--plain .mm-col__list a {
  grid-template-columns: minmax(0, 1fr);
}

.mm-panel--plain .mm-col__list a > span {
  grid-column: 1;
}

.header .mm .mm-col__list a:hover {
  color: rgb(var(--color-light-text));
}

/* ── Link icons ─────────────────────────────────────────────────────────── */

/* The symbols (snippets/mega-menu-icons.html). Zero size rather than display: none,
   which stops some browsers drawing the symbols; for the same reason they sit just
   outside the bar, which is display: none on phones, where the phone menu uses them. */
.mm-icons {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Detail lines inherit this; the symbol's groups set their own fills and strokes.
   The icon takes the link's colour, gold on hover. */
.mm-icon {
  display: block;
  width: 24px;
  height: 24px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  --mm-icon-accent: #c09955;
}

/* While the icon is gold, its water point turns navy so it still shows. */
.header .mm .mm-col__list a:hover .mm-icon {
  --mm-icon-accent: rgb(var(--color-text));
}

.mmi-water {
  fill: var(--mm-icon-accent, #c09955);
}

/* the "All …" lead links: All Vanity Units, All Mirrors, All Shower Enclosures, All Shower Trays.
   Black, where the other links are a softer navy; regular weight since 25 Oct 2026. */
.header .mm .mm-col__list .mm-col__all a {
  font-family: century-gothic-regular;
  color: #000;
}

.header .mm a.mm-promo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: rgb(var(--color-text));
  text-decoration: none;
  color: #fff;
}

.mm-promo__media {
  display: block;
  overflow: hidden;
}

.mm-promo__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.header .mm a.mm-promo:hover .mm-promo__img {
  transform: scale(1.03);
}

.mm-promo__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
}

.mm-promo__eyebrow {
  font-family: century-gothic-bold;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--color-light-text));
}

.mm-promo__title {
  font-family: baskerville-italic;
  font-size: 20px;
  line-height: 1.25;
  color: #fff;
}

.mm-promo__text {
  font-size: 13px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.75);
}

.mm-promo__cta {
  margin-top: 4px;
  font-family: century-gothic-bold;
  font-size: 13px;
  line-height: 18px;
  color: rgb(var(--color-light-text));
}

/* Foot: shop by finish and luxury brands. */
.mm-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 40px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eaecf0;
}

/* The finish swatches use the same colours as the product page's colour chips
   (.pdp-colour-dot in section-main-product.css). */
.mm-swatch {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(10, 39, 73, 0.18);
}

.mm-swatch--chrome {
  background-image: linear-gradient(135deg, #f4f7f9, #b4bdc4 42%, #edf1f4 58%, #98a2aa);
}

.mm-swatch--matt-black {
  background-color: #1c1c1e;
}

.mm-swatch--brushed-brass {
  background-image: linear-gradient(135deg, #e6cd7c, #b8912f 55%, #d9bc63);
}

.mm-swatch--brushed-nickel {
  background-image: linear-gradient(135deg, #dad6cf, #ada79e 50%, #c8c3ba);
}

.mm-swatch--brushed-bronze {
  background-image: linear-gradient(135deg, #c89b6a, #8c5a2b 55%, #b98552);
}

/* ── Narrower desktops ──────────────────────────────────────────────────── */

/* The showroom card gives way first ... */
@media screen and (max-width: 1279px) {
  .mm-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .header .mm a.mm-promo {
    display: none;
  }

  .header .mm a.mm-col__title {
    font-size: 17px;
    line-height: 21px;
  }
}

/* ... then the columns tighten up. Three across doubles the panel's height, which on a
   1024 x 768 screen put half of it below the fold. */
@media screen and (max-width: 1099px) {
  .mm-cols {
    column-gap: 16px;
  }

  .header .mm a.mm-col__title {
    font-size: 16px;
    line-height: 20px;
  }

  .header .mm .mm-col__list a {
    font-size: 11px;
    line-height: 16px;
  }
}