/* Header grid treatment — keeps the main header groups ruled without boxing each nav item. */
.site-header {
  box-shadow: inset 0 1px 0 var(--mega-media-border);
  border-block-start: 0;
  border-block-end: 1px solid var(--mega-media-border);
}

.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0;
  padding-inline: 0;
}

.site-header__inner > .site-logo,
.site-header__inner > .site-header__actions {
  min-block-size: var(--header-h);
  display: flex;
  align-items: center;
}

.site-header__inner > .site-logo {
  border-inline-end: 0;
  padding-inline: var(--s-4);
}

/* The full inline header needs the xl width to keep every destination, search
   control and CTA in one clean row. main.css turns its desktop controls on at
   lg for the site-wide default, so this header-specific sheet deliberately
   keeps the compact trigger state through lg and switches the header at xl. */
.site-header .primary-nav,
.site-header .search-toggle,
.site-header .site-header__cta {
  display: none;
}

.site-header .nav-trigger {
  display: grid;
}

/* main.css hides the dialog itself from lg upward. Keep an explicitly opened
   compact menu renderable through the header's later xl switch without forcing
   a closed <dialog> into the page flow. If the viewport grows while the dialog
   is open, leave that modal visible until the visitor closes it rather than
   creating an invisible open dialog that keeps the page inert. */
.mobile-nav[open] {
  display: block;
}

.site-header__inner > .site-header__actions {
  margin-inline-start: 0;
  justify-content: flex-end;
  border-inline-start: 1px solid var(--mega-media-border);
  padding-inline: var(--s-3);
}

/* Keep the browser-provided search clear affordance inside the theme instead
   of accepting the platform's coloured cancel glyph. WebKit exposes the
   control as a pseudo-element, so replace only its paint while preserving its
   native clear behaviour and hit target. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  inline-size: var(--s-4);
  block-size: var(--s-4);
  background-color: var(--ink-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.7 5.3 12 10.6l5.3-5.3 1.4 1.4-5.3 5.3 5.3 5.3-1.4 1.4-5.3-5.3-5.3 5.3-1.4-1.4 5.3-5.3-5.3-5.3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.7 5.3 12 10.6l5.3-5.3 1.4 1.4-5.3 5.3 5.3 5.3-1.4 1.4-5.3-5.3-5.3 5.3-1.4-1.4 5.3-5.3-5.3-5.3z'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}

input[type="search"]:hover::-webkit-search-cancel-button {
  background-color: var(--ink-900);
}

/* Reviews do not advertise an action that cannot happen. At either end of the
   rail the disabled arrow keeps its layout slot but disappears visually, so
   there is no blocked cursor or dead-looking control under the pointer. */
.rail--reviews .rail__arrow:disabled {
  visibility: hidden;
  pointer-events: none;
}

/* Notice bar is top chrome, not a content band. Keep the painted height slim
   while the dismiss control retains a larger transparent hit area. */
.notice-bar {
  background-color: var(--accent);
  border-block-end: 0;
  color: var(--surface);
}

.notice-bar__inner {
  min-block-size: var(--s-8);
  gap: var(--s-3);
  padding-block: 0;
}

.notice-bar__message {
  line-height: var(--lh-small);
  color: inherit;
}

.notice-bar__link {
  color: inherit;
}

.notice-bar__countdown {
  color: inherit;
  font-weight: var(--fw-ui);
}

.notice-bar__dismiss {
  position: relative;
  inline-size: var(--s-8);
  block-size: var(--s-8);
  color: inherit;
}

.notice-bar__dismiss > [aria-hidden] {
  display: grid;
  place-items: center;
  line-height: 0;
}

.notice-bar__dismiss::after {
  content: "";
  position: absolute;
  inset-inline: calc((var(--tap-min) - var(--s-8)) / -2);
  inset-block: calc((var(--tap-min) - var(--s-8)) / -2);
}

.notice-bar__dismiss:hover {
  background-color: var(--accent-hover);
}

/* The second mega-menu label starts a new decision axis. Give it more air than
   an ordinary list label so Shop by never reads as another subcategory row. */
.mega__list + .mega__browse-label {
  margin-block-start: var(--s-5);
  margin-block-end: var(--s-3);
}

/* Mobile navigation follows the same ruled architecture as the header.
   The menu itself remains data-driven: every current or future WordPress menu
   item occupies one full-width row, so additions, removals and reordering need
   no layout-specific selectors or category-name assumptions. */
.mobile-nav__panel {
  gap: 0;
}

/* Each primary zone is a complete grid block. Search deliberately floats as
   its own block between the head and navigation instead of visually joining
   either one. */
.mobile-nav__head,
.mobile-nav__search,
.mobile-nav__menu {
  border: 1px solid var(--mega-media-border);
}

/* Only the OPEN state mirrors the original header action cell. The hamburger
   remains untouched. The head keeps the same trailing inset as the closed
   header, which places the cross on the hamburger's exact centre line. Its
   pseudo-rule sits one action-cell padding step before the button, matching the
   closed header's vertical divider, while the head's own bottom edge supplies
   the same horizontal rule the sticky header does. */
.mobile-nav__head {
  padding-inline-end: var(--s-3);
}

.mobile-nav__close {
  position: relative;
  inline-size: var(--s-10);
  block-size: var(--s-10);
}

.mobile-nav__close::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--s-3) * -1);
  inset-block: calc((var(--header-h) - var(--s-10)) / -2);
  border-inline-start: 1px solid var(--mega-media-border);
  pointer-events: none;
}

.mobile-nav__search {
  gap: 0;
  margin-block: var(--s-4);
}

.mobile-nav__search input {
  border: 0;
  border-radius: 0;
  background-color: var(--surface);
}

.mobile-nav__search button {
  border: 0;
  border-inline-start: 1px solid var(--mega-media-border);
  border-radius: 0;
  background-color: var(--surface);
}

.mobile-nav__search button:hover {
  background-color: var(--bg-tint);
}

/* Keep the navigation frame visually independent from the footer actions even
   when a long submenu fills the scrollable panel. Without this gap the menu's
   bottom rule and the first footer control's top rule meet and read as a
   doubled, thicker border. */
.mobile-nav__menu {
  margin-block-end: var(--s-4);
}

.mobile-nav__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.mobile-nav__list > li {
  border-block-end: 1px solid var(--mega-media-border);
}

.mobile-nav__list > li:last-child {
  border-block-end: 0;
}

.mobile-nav__list > li > a,
.mobile-nav__list > li > .mobile-nav__drill {
  inline-size: 100%;
  min-block-size: var(--tap-min);
  padding-block: var(--s-4);
  padding-inline: var(--s-4);
  border-radius: 0;
}

.mobile-nav__list > li > a:hover,
.mobile-nav__list > li > .mobile-nav__drill:hover,
.mobile-nav__menu.is-drill .mobile-nav__sub > li > a:hover,
.mobile-nav__menu.is-drill .mobile-nav__back:hover {
  background-color: var(--bg-tint);
}

/* Forward drill motion is translate-only. The previous opacity + transform
   treatment could trigger a delayed repaint on Android Chrome after the new
   grid level was already visible. Sliding the new level in from the trailing
   edge keeps the directional cue without fading or repainting the whole list. */
@keyframes mobile-nav-grid-enter {
  from { translate: var(--s-5) 0; }
  to { translate: 0 0; }
}

/* A drill-down inherits the same one-row-per-destination grid only while that
   parent is open. The base component deliberately keeps every enhanced
   submenu at display:none until its parent receives .is-open; tying the grid
   to the same state preserves that contract and the no-JS nested fallback. */
.mobile-nav__menu.is-drill .mobile-nav__list > li.is-open > .mobile-nav__sub {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  animation: mobile-nav-grid-enter var(--dur-fast) var(--ease) both;
}

.mobile-nav__menu.is-drill .mobile-nav__sub > li {
  border-block-end: 1px solid var(--mega-media-border);
}

.mobile-nav__menu.is-drill .mobile-nav__sub > li:last-child {
  border-block-end: 0;
}

.mobile-nav__menu.is-drill .mobile-nav__sub > li > a,
.mobile-nav__menu.is-drill .mobile-nav__back {
  inline-size: 100%;
  min-block-size: var(--tap-min);
  padding-block: var(--s-4);
  padding-inline: var(--s-4);
  border-radius: 0;
}

/* "All Flooring", "All Paints", etc. is the parent-category destination, not
   another child option. A neutral recessed fill and stronger label make that
   hierarchy obvious without spending the site's scarce red accent on chrome. */
.mobile-nav__menu.is-drill .mobile-nav__sub > .mobile-nav__allrow > a {
  background-color: var(--bg-tint);
  color: var(--ink-900);
  font-weight: var(--fw-subhead);
  border-inline-start: var(--s-1) solid var(--ink-900);
}

/* A drill level contains two sibling grids: the category menu and, when
   applicable, the filter shortcuts. Remove the parent frame in this state and
   let each block own its perimeter so Shop by is genuinely outside the menu
   section rather than appearing nested inside it. */
.mobile-nav__menu.is-drill {
  border: 0;
}

.mobile-nav__menu.is-drill .mobile-nav__sub {
  inline-size: 100%;
  margin-inline: 0;
  border: 1px solid var(--mega-media-border);
}

.mobile-nav__shopby {
  display: none;
}

.mobile-nav__menu.is-drill .mobile-nav__list > li.is-open > .mobile-nav__shopby {
  display: block;
  margin-block-start: var(--s-5);
  border: 1px solid var(--mega-media-border);
}

.mobile-nav__shopby-label {
  display: block;
  padding-block: var(--s-3);
  padding-inline: var(--s-4);
  border-block-end: 1px solid var(--mega-media-border);
  background-color: var(--bg-tint);
  color: var(--ink-500);
  font-size: var(--fs-micro);
  font-weight: var(--fw-ui);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}

.mobile-nav__menu.is-drill .mobile-nav__shopby > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-block-size: var(--tap-min);
  padding-block: var(--s-4);
  padding-inline: var(--s-4);
  border-block-end: 1px solid var(--mega-media-border);
  border-radius: 0;
}

.mobile-nav__menu.is-drill .mobile-nav__shopby > a:last-child {
  border-block-end: 0;
}

/* Contact channels use the ruled grid treatment. The red booking CTA keeps its
   original primary-button appearance and deliberately does not inherit this
   dark perimeter. */
.mobile-nav__foot .contact-channel {
  border: 1px solid var(--mega-media-border);
}

@media (min-width: 1280px) {
  .site-header {
    box-shadow: none;
    border-block-start: 1px solid var(--mega-media-border);
  }

  /* Slightly wider than the standard site container, but still compact chrome. */
  .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    max-inline-size: calc(var(--w-max) + var(--s-13));
  }

  /* Give the logo equal breathing room on both sides. The slightly wider pad
     brings the divider further toward the navigation while preserving symmetry. */
  .site-header__inner > .site-logo {
    border-inline-end: 1px solid var(--mega-media-border);
    padding-inline-start: var(--s-7);
    padding-inline-end: var(--s-7);
  }

  .site-header .primary-nav {
    min-block-size: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: center;
    border-inline-end: 1px solid var(--mega-media-border);
    padding-inline: var(--s-3);
    min-inline-size: 0;
  }

  .site-header .search-toggle {
    display: grid;
  }

  .site-header .site-header__cta {
    display: inline-flex;
  }

  .site-header .nav-trigger {
    display: none;
  }

  .primary-nav__list {
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    flex-wrap: nowrap;
  }

  .primary-nav__item {
    align-items: center;
    padding-inline: 0;
  }

  .primary-nav__link,
  .site-header__cta {
    white-space: nowrap;
  }

  /* The header's top and bottom grid rules sit outside --header-h. Offset the
     fixed popover by both rules and the live notice-bar height so its top edge
     always begins exactly after the visible header chrome. --notice-h is
     measured by main.js and drops to zero immediately when the bar is dismissed. */
  .mega {
    inset-block-start: calc(var(--notice-h) + var(--header-h) + 2px);
    border: 1px solid var(--mega-media-border);
  }

  /* Start the native popover backdrop below the same live chrome boundary so
     the notice bar and header stay completely sharp while the page below the
     open mega receives the veil and blur. */
  .mega::backdrop {
    inset-block-start: calc(var(--notice-h) + var(--header-h) + 2px);
    background-color: color-mix(in srgb, var(--ink-900) 45%, transparent);
    -webkit-backdrop-filter: blur(var(--s-2));
    backdrop-filter: blur(var(--s-2));
  }

  /* Mirror the logo spacing on the action side. The slightly wider inner pad
     brings the nav/action divider further toward the nav without changing height. */
  .site-header__inner > .site-header__actions {
    border-inline-start: 0;
    padding-inline-start: var(--s-7);
    padding-inline-end: var(--s-7);
  }
}