/* Layout primitives and page furniture. */

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2.5rem, 840px); }

.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-6); }
.section--mist { background: var(--mist); }
.section + .section { padding-top: 0; }
.section--mist + .section--mist { padding-top: var(--s-8); }

.section__head { max-width: var(--measure); margin-bottom: var(--s-6); }
.section__standfirst {
  color: var(--ink-soft);
  font-size: var(--step-1);
  margin-top: var(--s-3);
}

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.2s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-1); }

.header__bar {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--header-h);
}

.brand { text-decoration: none; font-weight: 680; letter-spacing: -0.02em; font-size: var(--step-1); color: var(--ink); }
.custom-logo { max-height: 44px; width: auto; }

.header__nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--s-5); }
.nav__link {
  text-decoration: none;
  color: var(--ink);
  font-size: var(--step-0);
  padding-block: var(--s-2);
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s var(--ease);
}
.nav__link:hover::after,
.current-menu-item > .nav__link::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: var(--s-3); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  position: relative;
  transition: background 0.15s var(--ease);
}
.icon-btn:hover { background: var(--mist-deep); }
.icon-btn .icon { width: 20px; height: 20px; }

.cart-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.cart-badge.is-filled { opacity: 1; transform: scale(1); }

/* Search overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(20, 23, 26, 0.45);
  display: none;
  padding-top: 12vh;
}
.search-overlay.is-open { display: block; }
.search-overlay__panel {
  width: min(100% - 2.5rem, 760px);
  margin-inline: auto;
  background: var(--ground);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.search-overlay__input {
  width: 100%;
  border: 0;
  padding: var(--s-5);
  font-size: var(--step-1);
  border-bottom: 1px solid var(--line);
}
.search-overlay__input:focus { outline: none; }
.search-results { max-height: 58vh; overflow-y: auto; }
.search-result {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3) var(--s-5);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.search-result:hover, .search-result.is-active { background: var(--mist); }
.search-result img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); }
.search-result__title { font-weight: 600; color: var(--ink); }
.search-result__meta { font-size: var(--step--1); color: var(--ink-faint); }
.search-result__price { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; }
.search-empty { padding: var(--s-5); color: var(--ink-faint); }

/* Breadcrumbs */
.breadcrumbs { padding-block: var(--s-4); }
.breadcrumbs__list { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--step--1); color: var(--ink-faint); }
.breadcrumbs__item + .breadcrumbs__item::before { content: "/"; margin-right: var(--s-2); color: var(--line-firm); }
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }


/* The menu button only exists below the nav breakpoint. */
.nav-toggle { display: none; }
.nav__close { display: none; }

/* ==========================================================================
   Navigation panels
   Two behaviours from the same walker: a narrow dropdown, and a full width
   mega panel. Both open on hover with a short intent delay on desktop and on
   click everywhere, so touch and keyboard get the same behaviour.
   ========================================================================== */

.nav__item { position: relative; }

.nav__toggle {
  display: none;
  width: 22px; height: 22px;
  align-items: center;
  justify-content: center;
  margin-left: var(--s-1);
}
.nav__chevron {
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.2s var(--ease);
}
.has-subnav > .nav__toggle,
.has-mega > .nav__toggle { display: inline-flex; }
.nav__item.is-open > .nav__toggle .nav__chevron { transform: rotate(225deg) translate(-1px, -1px); }

/* Shared panel chrome */
.subnav, .mega {
  position: absolute;
  top: 100%;
  z-index: 65;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s;
}
.nav__item.is-open > .subnav,
.nav__item.is-open > .mega { opacity: 1; visibility: visible; transform: translateY(0); }

/* Dropdown */
.subnav { left: 0; min-width: 240px; margin-top: var(--s-2); }
.subnav__inner { padding: var(--s-2); }
.subnav__list { display: grid; }
.nav__sublink {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  font-size: var(--step--1);
}
.nav__sublink:hover { background: var(--mist); color: var(--accent); }

/* Mega panel. Anchored to the container, not the menu item, so columns line
   up with the page grid rather than floating off the edge. */
.mega {
  left: 50%;
  transform: translate(-50%, -6px);
  width: min(calc(100vw - 3rem), var(--container));
  margin-top: var(--s-2);
}
.nav__item.is-open > .mega { transform: translate(-50%, 0); }
.mega__inner { padding: var(--s-6); }
.mega__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-6);
}
.mega__heading {
  display: block;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
a.mega__heading:hover { color: var(--accent); }
.mega__column-list { display: grid; gap: var(--s-1); }
.mega__column-list .nav__sublink { padding: var(--s-2); }

@media (max-width: 860px) {
  /* Panels become plain accordions inside the mobile drawer. Position and
     shadow are reset so nothing escapes the drawer. */
  .subnav, .mega {
    position: static;
    transform: none;
    width: auto;
    opacity: 1;
    visibility: visible;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    display: none;
  }
  .nav__item.is-open > .subnav,
  .nav__item.is-open > .mega { display: block; transform: none; }
  .subnav__inner, .mega__inner { padding: 0 0 var(--s-4) var(--s-3); }
  .mega__list { grid-template-columns: 1fr; gap: var(--s-4); }
  .nav__item { display: flex; flex-wrap: wrap; align-items: center; }
  .nav__item > .nav__link { flex: 1; }
  .nav__item > .subnav, .nav__item > .mega { flex-basis: 100%; }
  .nav__toggle { width: 44px; height: 44px; }
}

/* Guide template. Contents list sticks alongside the prose on desktop and
   collapses to a plain list above it on narrow screens. */
.guide {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
  padding-block: var(--s-7);
}
.guide__toc { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
.guide__toc-title {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-3);
}
.guide__toc-list { display: grid; gap: var(--s-2); counter-reset: toc; list-style: none; padding: 0; }
.guide__toc-list a {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  margin-inline: calc(var(--s-3) * -1);
  border-radius: var(--radius-sm);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.guide__toc-list a:hover { color: var(--accent); background: var(--mist); }
.guide__toc-list a.is-current {
  color: var(--accent);
  background: var(--accent-wash);
  font-weight: 600;
}
.guide__body { max-width: var(--measure); }
.guide__body h2 { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }

@media (max-width: 980px) {
  .guide { grid-template-columns: 1fr; gap: var(--s-6); }
  .guide__toc {
    position: static;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--s-4);
    background: var(--mist);
  }
}

.entry__media img, .entry__media .img-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* Guide index. Numbered because the guides are ordered by the sequence someone
   works through them, from receiving a compound to storing it long term. */
.guide-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
  padding-block: var(--s-6) var(--s-4);
}
.guide-card__link {
  display: grid;
  gap: var(--s-2);
  height: 100%;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ground);
  text-decoration: none;
  color: var(--ink);
  align-content: start;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.guide-card__link:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
  color: var(--ink);
}
.guide-card__number {
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: var(--s-2);
}
.guide-card__title { font-size: var(--step-1); letter-spacing: var(--track-tight); }
.guide-card__link:hover .guide-card__title { color: var(--accent); }
.guide-card__excerpt { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; }
.guide-card__meta {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   Footer

   Five columns: brand and contact, then catalogue, guides, company, ordering.
   The brand column is wider because it carries the contact details, which are
   what people scroll down here looking for.
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: #a8b2ba;
  padding-block: var(--s-8) var(--s-6);
  margin-top: var(--s-9);
  font-size: var(--step--1);
}
.site-footer a { color: #dde3e8; text-decoration: none; transition: color 0.15s var(--ease); }
.site-footer a:hover { color: #fff; text-decoration: underline; }

/* Columns are skipped when they have no published pages behind them, so the
   count is not fixed. Rather than enumerate every case, the brand column is
   declared explicitly and every column after it is created implicitly at an
   equal width. Four link columns or one, it lays out correctly with no extra
   rules. */
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--s-6);
  padding-bottom: var(--s-7);
}

.footer__brand { max-width: 22rem; }
.footer__brand .brand,
.footer__brand .brand__name { color: #fff; }
.footer__brand .custom-logo { filter: brightness(0) invert(1); opacity: 0.92; }
.footer__blurb { margin-top: var(--s-4); color: #98a3ac; line-height: 1.6; }

.footer__contact { display: grid; gap: var(--s-3); margin-top: var(--s-5); list-style: none; padding: 0; }
.footer__contact li { display: grid; gap: 2px; }
.footer__contact .label { color: #6f7a83; }
.footer__contact a { font-size: var(--step-0); font-weight: 500; }

.footer__heading {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--s-4);
}
.footer__col ul { display: grid; gap: var(--s-3); list-style: none; padding: 0; margin: 0; }

.footer__widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-6);
  padding-block: var(--s-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__widget-col { display: grid; gap: var(--s-5); align-content: start; }
.widget__title {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--s-3);
}
.site-footer .widget ul { display: grid; gap: var(--s-3); list-style: none; padding: 0; }

.footer__base {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  align-items: baseline;
  color: #78838c;
}
.footer__copyright { display: grid; gap: var(--s-1); margin: 0; }
.footer__reg { color: #6f7a83; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-5); list-style: none; padding: 0; margin: 0; }

@media (max-width: 1200px) {
  /* Back to row flow so the brand can take a full width row of its own. */
  .footer__top {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .footer__brand { grid-column: 1 / -1; max-width: 30rem; }
}

/* Below the nav breakpoint the footer goes to a single centred column. Two or
   three narrow columns of short links reads as clutter on a phone and a single
   column scrolls better than it looks like it will. */
@media (max-width: 860px) {
  .footer__top {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: var(--s-7);
    text-align: center;
    justify-items: center;
  }
  .footer__brand { grid-column: auto; max-width: 26rem; }
  .footer__contact { justify-items: center; }
  .footer__contact li { justify-items: center; }
  .footer__col { width: 100%; }
  .footer__col ul { justify-items: center; }

  .footer__widgets { text-align: center; justify-items: center; }
  .site-footer .widget ul { justify-items: center; }

  .footer__base {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-4);
  }
  .footer__copyright { justify-items: center; }
  .footer__legal { justify-content: center; }
}

.footer__address { color: #98a3ac; line-height: 1.5; display: block; }