/* The phone menu (snippets/mobile-menu.html), in the header's drawer.

   It works and is laid out like the Paul James phone menu; the look is this store's own
   (22 Oct 2026). Department names in Baskerville, set large and light; each branch's headings
   in its italic, the face of the desktop panels' titles; the links in Century Gothic at a
   softer navy, Bathrooms and Showers with the desktop panels' icons. Nothing is bold and
   nothing is in spaced capitals. Brass, the theme's gold, marks only the open branch's arrow
   and, as on the desktop, each icon's water point. Colours come from the theme's settings.

   Every row is a whole number of pixels (px line-heights, never unitless ones): with a whole
   branch on screen, fractional rows add up, the department rows below land on parts of a
   pixel, and their 1px hairlines stop being painted. */

.mobile-menu {
  --_gutter: var(--drawer-padding-inline, 24px);
  --_text: rgb(var(--color-text));
  --_bg: rgb(var(--color-page-background));
  --_brass: rgb(var(--color-light-text));
  --_navy: rgb(var(--color-button-background));
  --_line: color-mix(in srgb, var(--_text) 11%, var(--_bg));
  --_soft: color-mix(in srgb, var(--_text) 78%, var(--_bg));
  --_muted: color-mix(in srgb, var(--_text) 50%, var(--_bg));
  --_wash: color-mix(in srgb, var(--_text) 3%, var(--_bg));
  --_ring: 2px solid var(--_navy);
  --_ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  display: block;
  padding-top: 8px;
  color: var(--_text);
}

.mobile-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The drawer around the menu, on the menu's own margins: the rule under the close cross runs
   where the department hairlines run, and the cross starts where the names start. On phones
   the header's stylesheet fixes this drawer's padding at 15px, so it is set again here. */
.drawer.header__menu-drawer {
  --drawer-padding-inline: 24px;
}

/* 360px rather than the theme's 340px, so the links' column keeps more names on one line;
   the theme's 95% cap still leaves a strip of the page to tap on a small phone */
.drawer.header__menu-drawer .modal__content {
  width: 360px;
  padding-inline: var(--drawer-padding-inline);
}

.drawer.header__menu-drawer .drawer__main {
  margin-inline: calc(-1 * var(--drawer-padding-inline));
}

/* 10 + 44 + 10: the same 64px bar as before, with a bigger target for the cross */
.drawer.header__menu-drawer .drawer__head {
  padding-block: 10px;
}

.drawer.header__menu-drawer .drawer__head--divider {
  border-bottom-color: color-mix(in srgb, rgb(var(--color-text)) 11%, rgb(var(--color-page-background)));
}

/* A 44px target. It is pulled left by its padding and the cross's own 2px inset, so the
   cross itself sits on the margin. The cross is drawn as finely as the menu's lines. */
.drawer.header__menu-drawer .drawer__close-button {
  margin-inline-start: -14px;
  padding: 12px;
}

.drawer.header__menu-drawer .drawer__close-button .icon {
  width: 20px;
  height: 20px;
}

.drawer.header__menu-drawer .drawer__close-button .icon path {
  stroke-width: 0.8;
}

/* ── Departments ──────────────────────────────────────────────────────────── */

.mobile-menu__item {
  position: relative;
}

/* a hairline under each department, its open branch included, inset to the gutter */
.mobile-menu__item::after {
  content: "";
  position: absolute;
  right: var(--_gutter);
  bottom: 0;
  left: var(--_gutter);
  border-bottom: 1px solid var(--_line);
}

/* One button, the whole row (18 + 28 + 18 = 64px): it opens its branch. A department without a
   branch is a link in the same style. */
.mobile-menu .mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 18px var(--_gutter);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--_text);
  cursor: pointer;
  font-family: baskerville-regular, Georgia, serif;
  font-size: 23px;
  font-weight: normal;
  letter-spacing: 0.005em;
  line-height: 28px;
  text-align: start;
  text-decoration: none;
  text-transform: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease;
}

.mobile-menu .mobile-menu__top:active {
  background-color: var(--_wash);
}

/* focus rings are drawn inside the box: outside, the clipped panel cut them off */
.mobile-menu .mobile-menu__top:focus-visible {
  outline: var(--_ring);
  outline-offset: -2px;
}

/* a fine chevron, set back; it turns up, in brass, while its branch is open */
.mobile-menu__top-icon {
  display: flex;
  flex: none;
  color: var(--_muted);
  transition: transform 0.3s ease, color 0.3s ease;
}

.mobile-menu__top-icon .icon {
  width: 11px;
  height: 11px;
}

.mobile-menu__top-icon .icon path {
  stroke-width: 1;
}

.mobile-menu__top[aria-expanded="true"] .mobile-menu__top-icon {
  color: var(--_brass);
  transform: rotate(180deg);
}

/* ── "View all" on a department's row ─────────────────────────────────────────── */

/* While a department's branch is open its row reads: name ...... View all ...... arrow, the words
   "View all" starting exactly where the branch's link words start, at any width (after the Paul
   James phone menu, 23 Oct 2026). Shut, the link isn't there at all: display: none takes it out
   of the layout, the Tab order and the accessibility tree. It is the sibling after the row's
   button, never inside it (a link inside a button is invalid HTML).

   --_words is how far into the right column the links' words start: the list's 8px inset and
   the link's own 8px, or the 20px icon and its 12px gap in Bathrooms and Showers.
   --_link-column puts "View all" on its own line under the row where subgrid is missing: the
   gutter, the left column (3 parts of what the gutters and the 16px gap leave), the gap and the
   words' inset. With subgrid the row shares the branch's columns instead (below). */
.mobile-menu__item--department {
  --_words: 16px;
  --_link-column: calc((100% - 2 * var(--_gutter) - 16px) * 3 / 10 + var(--_gutter) + 16px + var(--_words));
}

.mobile-menu__item--icons {
  --_words: 32px;
}

/* The links' size and face in the drawer's text colour, with a quiet underline (half a pixel at
   half strength, full on hover or press) and a 44px target. It fades in with its branch. The
   selectors outrank the header's own link colour (.header a:not(.button), and its :hover). */
.mobile-menu .mobile-menu__item > a.mobile-menu__view-all {
  display: none;
  padding: 12px var(--_gutter) 12px var(--_link-column);
  color: var(--_text);
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 20px;
  text-decoration: underline 0.5px color-mix(in srgb, var(--_text) 50%, transparent);
  text-transform: none;
  text-underline-offset: 0.25em;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu .mobile-menu__top[aria-expanded="true"] + a.mobile-menu__view-all {
  display: block;
  transition: opacity 0.3s ease;
}

@starting-style {
  .mobile-menu .mobile-menu__top[aria-expanded="true"] + a.mobile-menu__view-all {
    opacity: 0;
  }
}

.mobile-menu .mobile-menu__item > a.mobile-menu__view-all:is(:hover, :active) {
  color: var(--_text);
  text-decoration-color: currentColor;
}

.mobile-menu .mobile-menu__item > a.mobile-menu__view-all:focus-visible {
  outline: var(--_ring);
  outline-offset: -2px;
}

/* A department's item is one grid that its row and its branch share: the gutter, the left column
   (the name, then the headings), the 16px gap, the right column ("View all", then the links),
   the gutter, on the branch's own 3 : 7 split, the left column never narrower than its longest
   word. The button, the panel, its inner box, the groups and each group take the columns
   through subgrid, so the button still spans the whole row as its target with the link lying
   over the right column, and "View all" lines up with the links at any width. A name whose
   longest word is wider than the left column widens it, for its own branch only. */
@supports (grid-template-columns: subgrid) {
  .mobile-menu .mobile-menu__item--department {
    display: grid;
    grid-template-columns: var(--_gutter) minmax(min-content, 3fr) 16px minmax(0, 7fr) var(--_gutter);
  }

  .mobile-menu .mobile-menu__item--department > :is(.mobile-menu__top, .mobile-menu__panel),
  .mobile-menu .mobile-menu__item--department .mobile-menu__inner {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }

  .mobile-menu .mobile-menu__item--department > .mobile-menu__top {
    grid-row: 1;
    gap: 0;
    padding-inline: 0;
  }

  /* Pinned to the first row: shut, the name spans the arrow's column too, and left to the grid
     the arrow would drop to a row of its own. */
  .mobile-menu .mobile-menu__item--department .mobile-menu__top-title {
    grid-area: 1 / 2;
  }

  /* Shut, the name has the row up to the arrow and 16px, so it stays on one line as before. From
     the moment its branch starts opening until it has finished shutting (.is-open, then
     .is-closing) it keeps to the left column, wrapping there if it must, and leaves the right
     column to "View all". Keyed to the panel, not to the button: the button turns at the first
     frame of shutting, and the name leaving the column then would move the shutting branch's
     links sideways. */
  .mobile-menu .mobile-menu__item--department:has(> .mobile-menu__panel:not(.is-open, .is-closing)) .mobile-menu__top-title {
    grid-column: 2 / 5;
    margin-inline-end: 27px;
  }

  .mobile-menu .mobile-menu__item--department .mobile-menu__top-icon {
    grid-area: 1 / 4;
    justify-self: end;
  }

  /* In the right column, its words --_words in, on the links' line. Only 4px either side of the
     words is its target, and 27px stays clear at the end (the 11px arrow and 16px), so a tap
     just left of the arrow still closes the branch; a long text wraps rather than reach it.
     Lifted over the button, so a tap on the words follows the link instead of the toggle. */
  .mobile-menu .mobile-menu__item--department > a.mobile-menu__view-all {
    position: relative;
    z-index: 1;
    grid-column: 4;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    margin-inline: calc(var(--_words) - 4px) 27px;
    padding: 12px 4px;
  }

  .mobile-menu .mobile-menu__item--department > a.mobile-menu__view-all:focus-visible {
    outline-offset: 2px;
  }

  .mobile-menu .mobile-menu__item--department .mobile-menu__groups {
    grid-column: 2 / 5;
    grid-template-columns: subgrid;
    column-gap: 0;
    padding-inline: 0;
  }

  .mobile-menu .mobile-menu__item--department .mm-col {
    column-gap: 0;
  }

  .mobile-menu .mobile-menu__item--department .mm-col__list {
    grid-column: 3;
  }
}

/* ── A branch opening and closing (component-mobile-menu.js sets the height) ───────────── */

/* Clip, not hide: a hidden overflow makes the panel a scroll box of its own, and the headings
   would stick to it instead of to the drawer. Clip still cuts the animation off. Visibility
   waits for the close to finish, so the branch is seen folding away. */
.mobile-menu__panel {
  height: 0;
  overflow: clip;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s var(--_ease),
    height 0.3s var(--_ease),
    visibility 0s linear 0.3s;
}

.mobile-menu__panel.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1s var(--_ease),
    height 0.35s var(--_ease),
    visibility 0s;
}

/* the content slides up 40px as it opens; open, it carries no transform at all */
.mobile-menu__inner {
  transform: translateY(40px);
  transition: transform 0.3s var(--_ease);
}

.mobile-menu__panel.is-open .mobile-menu__inner {
  transform: none;
  transition: transform 0.5s var(--_ease);
}

/* ── An open branch: its headings left, their links right ─────────────────────── */

/* Each group (a heading and its list) takes both columns through subgrid, so every list
   starts on one vertical line; without subgrid each group keeps the same split on its own.
   The left column never gets narrower than its longest word. */
.mobile-menu__groups {
  display: grid;
  grid-template-columns: minmax(min-content, 3fr) minmax(0, 7fr);
  gap: 20px 16px;
  padding: 4px var(--_gutter) 24px;
}

.mobile-menu .mm-col {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(min-content, 3fr) minmax(0, 7fr);
  grid-template-columns: subgrid;
  column-gap: 16px;
  align-items: baseline;
}

/* The heading in Baskerville italic, on the baseline of its first link. It stays pinned at the
   top of the drawer while its own list scrolls past; nothing else passes through the left
   column, so it needs no background. */
.mobile-menu .mm-col__title {
  position: sticky;
  top: 0;
  display: block;
  justify-self: start;
  color: var(--_text);
  font-family: baskerville-italic, Georgia, serif;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: 0.005em;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
}

.mobile-menu .mm-col__title:focus-visible {
  outline: var(--_ring);
  outline-offset: 4px;
}

/* The links, with a hairline down their left edge, inset 10px at each end. */
.mobile-menu .mm-col__list {
  position: relative;
  padding-inline-start: 8px;
}

.mobile-menu .mm-col__list::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  inset-inline-start: 0;
  width: 1px;
  background: var(--_line);
}

/* 8 + 20 + 8 = 36px rows; the text starts 16px right of the line. The selector outranks the
   header's own link colour (.header a:not(.button), 0,2,1). */
.mobile-menu .mm-col__list > li > a {
  display: block;
  padding: 8px 0 8px 8px;
  color: var(--_soft);
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 20px;
  text-decoration: none;
}

.mobile-menu .mm-col__list > li > a:focus-visible {
  outline: var(--_ring);
  outline-offset: -2px;
}

/* Bathrooms and Showers show the desktop panels' link icons at 20px, in the link's colour.
   The icons line up into the vertical line, so these lists have no hairline. The symbols,
   with their line weights and gold water points, come with the desktop menu
   (snippets/mega-menu-icons.html and the .mm-icon rules in snippet-mega-menu.css), which the
   header renders on every page. */
.mobile-menu .mobile-menu__groups--icons .mm-col__list {
  padding-inline-start: 0;
}

.mobile-menu .mobile-menu__groups--icons .mm-col__list::before {
  content: none;
}

/* the 20px icon and a 12px gap; a label that wraps stays clear of its icon */
.mobile-menu .mobile-menu__groups--icons .mm-col__list > li > a {
  position: relative;
  padding-inline-start: 32px;
}

/* centred on the label's first line */
.mobile-menu .mm-icon {
  position: absolute;
  top: 8px;
  inset-inline-start: 0;
  width: 20px;
  height: 20px;
}

/* ── The small print: the account link and the social links ──────────────────── */

.mobile-menu__account {
  margin-top: 16px;
}

.mobile-menu__account::after {
  content: none;
}

.mobile-menu .mobile-menu__account a.mobile-menu__account-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--_gutter);
  color: var(--_soft);
  font-family: var(--body-font);
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 20px;
  text-decoration: none;
  text-transform: none;
}

.mobile-menu__account-link .icon {
  flex: none;
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.mobile-menu .mobile-menu__account a.mobile-menu__account-link:focus-visible {
  outline: var(--_ring);
  outline-offset: 2px;
}

/* A row of 44px targets with 18px marks, set back, pulled left so the first mark lines up with
   the text above. It only shows when the theme settings hold a social link. */
.mobile-menu .mobile-menu__social {
  display: flex;
  flex-wrap: wrap;
  margin: 8px 0 0 calc(var(--_gutter) - 13px);
}

.mobile-menu .mobile-menu__social:not(:has(li)) {
  display: none;
}

.mobile-menu .mobile-menu__social .mobile-menu__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--_muted);
}

.mobile-menu__social-link svg {
  width: 18px;
  height: 18px;
}

.mobile-menu .mobile-menu__social .mobile-menu__social-link:focus-visible {
  outline: var(--_ring);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu .mobile-menu__top[aria-expanded="true"] + a.mobile-menu__view-all,
  .mobile-menu__top-icon,
  .mobile-menu__panel,
  .mobile-menu__panel.is-open,
  .mobile-menu__inner,
  .mobile-menu__panel.is-open .mobile-menu__inner {
    transition: none;
  }
}