/* Stoke Tiles redesign: site header, menu drawer and footer (T2).
   Loads after st-components.css, which holds the shared header pieces.

   Self contained on purpose: the chrome goes live on every page while the page
   bodies underneath are still the old theme. Nothing in this file reaches
   outside .st-site-header, .st-drawer or .st-footer. */

/* The theme's stylesheet reaches into the new chrome through four selectors:
   `a { color: #3c3c3c }`, `p { line-height; font-size }`, and inside the
   footer `footer p, footer a { color: #dcdcdc; font-weight: 100; font-size:
   13px; line-height: 20px }`. All of them lose to a class that names the same
   property, so the fix is to name them rather than to blanket reset - a
   blanket `.st-footer span { ... }` would itself out-specify `.st-eyebrow`
   and quietly break the column headings. */
.st-header__basket,
.st-footer__brand a { color: inherit; }

.st-footer__link,
.st-footer__social a,
.st-footer__legal { font-weight: 400; }

/* ---------------------------------------------------------------- Header */

.st-site-header {
  position: relative;
  z-index: 900;
  width: 100%;
}

/* Over an image the header leaves the flow and the hero rises behind it. */
.st-site-header.st-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
}

/* The scrim that keeps white chrome readable over a photograph. The design
   draws it as the top half of the hero's gradient; it belongs to the header,
   so a hero built in a later task only needs its own bottom gradient. */
.st-site-header.st-header--overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(180deg, rgba(24, 21, 18, 0.6) 0%, rgba(24, 21, 18, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
.st-site-header.st-header--overlay.is-stuck::before { display: none; }

/* The rows have to be lifted above the scrim, or a positioned pseudo element
   with z-index 0 would paint over its own static siblings. */
.st-site-header.st-header--overlay > .st-topbar,
.st-site-header.st-header--overlay > .st-header__main,
.st-site-header.st-header--overlay > .st-nav,
.st-site-header.st-header--overlay > .st-mobile-bar,
.st-site-header.st-header--overlay > .st-mobile-search {
  position: relative;
  z-index: 1;
}

/* Once scrolled, the overlay becomes the solid header and sticks. */
.st-site-header.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--st-ivory);
  color: var(--st-espresso);
  box-shadow: 0 1px 0 var(--st-linen);
  animation: st-header-drop 220ms ease;
}
@keyframes st-header-drop {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .st-site-header.is-stuck { animation: none; }
}

/* Stuck, the header is solid whatever it started as. Everything the overlay
   state changed has to be changed back, and at a weight that beats it: written
   as `.is-stuck .st-search` these tied with `.st-header--overlay .st-search`
   and source order kept the overlay's white-on-white search field over an
   ivory bar.

   The top bar also goes. It carries a delivery promise, not navigation, and
   keeping it costs 40px of every screen for the whole scroll - which is the
   difference between a header that follows you and one that is in the way.
   The measured height follows automatically, so anchors still land clear. */
.st-site-header.is-stuck > .st-topbar { display: none; }
.st-site-header.is-stuck .st-header__main { border-bottom: 1px solid var(--st-linen); }
.st-site-header.is-stuck .st-nav { border-bottom: 0; }
.st-site-header.is-stuck .st-search {
  border-color: var(--st-linen);
  background: var(--st-white);
  color: var(--st-taupe);
}
.st-site-header.is-stuck .st-search input { color: var(--st-espresso); }
.st-site-header.is-stuck .st-search input::placeholder { color: var(--st-taupe); }
.st-site-header.is-stuck .st-search button { color: var(--st-espresso); }
.st-site-header.is-stuck .st-nav__pill {
  background: var(--st-sage);
  color: var(--st-white);
  border: 0;
}

/* The solid header occupies real space; the spacer only matters when it
   becomes fixed, and the script sets its height then. */
.st-header-spacer { height: 0; }

/* Anything scrolled to - an "On this page" link, a #reviews link, a skip
   link, a form field the browser jumps to on error - lands at the top of the
   viewport, which once the header is fixed is behind it. Reserving the
   header's height at the top of the scroll region moves the landing point
   down instead. The script keeps --st-stuck-h in step with the real height;
   the fallback covers the first paint and a no-JavaScript page. */
:root { --st-stuck-h: 144px; }
html { scroll-padding-top: calc(var(--st-stuck-h) + 24px); }

@media (max-width: 900px) {
  :root { --st-stuck-h: 100px; }
}

.st-topbar__message strong { font-weight: 500; }

.st-header__logo { display: flex; align-items: center; color: inherit; }
.st-header__logo-img { display: block; height: 52px; width: auto; }

/* One mark for each state: the uploaded PNG cannot turn white, so the drawn
   wordmark takes over wherever the header sits on a photograph. */
.st-header--overlay .st-header__logo--solid,
.st-header--solid .st-header__logo--overlay { display: none; }
.st-header--overlay .st-header__logo--overlay,
.st-header--solid .st-header__logo--solid { display: flex; }

/* Stuck, the header is solid whatever it started as, so the stuck rules have
   to beat the state rules rather than tie with them. Written at the same
   weight they did tie, and source order then showed both marks at once: the
   overlay wordmark beside the uploaded logo. */
.st-site-header.is-stuck .st-header__logo--overlay { display: none; }
.st-site-header.is-stuck .st-header__logo--solid { display: flex; }


.st-search input::placeholder { color: var(--st-taupe); opacity: 1; }

/* The search pill is drawn 46px tall with a 36px button inside it, so the
   button cannot be 44px without changing the drawing. It gets the hit area
   instead, the same way the sample button and message links do. */
.st-search button { position: relative; }
@media (pointer: coarse) {
  .st-search button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--st-tap-min);
    height: var(--st-tap-min);
  }
}

/* The logo is drawn 37px tall inside a 64px bar: room for a 44px target
   without moving anything. */
.st-mobile-bar__logo { min-height: var(--st-tap-min); }
.st-search input:focus { outline: none; }
.st-search:focus-within { outline: 3px solid var(--st-focus); outline-offset: 2px; }

/* -------------------------------------------------------------- Main nav */

.st-nav { position: relative; }
.st-nav__item { position: relative; }
.st-nav__item > a {
  display: inline-flex;
  align-items: center;
  /* The design leaves 6px between a label and its chevron; with none they
     read as one word: "TILES-chevron". */
  gap: 6px;
  min-height: var(--st-tap-min);
  color: inherit;
  text-decoration: none;
}
.st-nav__item > a:hover { color: var(--st-bronze); }
.st-header--overlay:not(.is-stuck) .st-nav__item > a:hover { color: var(--st-on-dark-cream); }
.st-nav__pill { text-decoration: none; display: inline-flex; align-items: center; }
.st-nav__pill:hover { background: var(--st-sage-dark); color: var(--st-white); }

/* The design draws a single row and no dropdown. The live menu has three
   levels, so children open in a plain panel rather than being dropped: losing
   30 category links to match a drawing would be the wrong trade. */
.st-nav__panel {
  position: absolute;
  top: 100%;
  left: -20px;
  min-width: 260px;
  /* A long panel scrolls inside itself rather than running off the bottom of
     a short window. The 200px allows for the header above it. */
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--st-ivory);
  border: 1px solid var(--st-linen);
  padding: 12px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
  z-index: 10;
}
.st-nav__item:hover > .st-nav__panel,
.st-nav__item:focus-within > .st-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.st-nav__panel ul { list-style: none; margin: 0; padding: 0; }
.st-nav__panel a {
  display: block;
  padding: 10px 24px;
  color: var(--st-espresso);
  text-decoration: none;
  font-size: var(--st-small);
  letter-spacing: 0.04em;
  text-transform: none;
}
.st-nav__panel a:hover { background: var(--st-stone); color: var(--st-espresso); }

/* ------------------------------------------------------------ Mobile bar */

.st-mobile-bar { display: none; }
.st-mobile-search { display: none; }

.st-mobile-bar__side { display: flex; width: 88px; }
.st-mobile-bar__side--end { justify-content: flex-end; }
.st-mobile-bar__btn {
  width: var(--st-tap-min);
  height: var(--st-tap-min);
  border: 0;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  position: relative;
  text-decoration: none;
}
.st-mobile-bar__logo { display: flex; align-items: center; color: inherit; }
.st-mobile-bar__logo .st-header__logo-img { height: 34px; }
.st-mobile-bar__count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--st-ivory);
  color: var(--st-espresso);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .st-header__main,
  .st-nav { display: none; }
  .st-mobile-bar {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
  }
  .st-header--overlay:not(.is-stuck) .st-mobile-bar {
    border-bottom: 1px solid color-mix(in srgb, var(--st-white) 18%, transparent);
  }
  .st-header--solid .st-mobile-bar,
  .is-stuck .st-mobile-bar { border-bottom: 1px solid var(--st-linen); }

  /* The mobile top bar is the delivery line alone, centred. */
  .st-topbar { height: 36px; justify-content: center; text-align: center; font-size: 12px; letter-spacing: 0.04em; }
  .st-topbar__links,
  .st-topbar__spacer { display: none; }

  .st-mobile-search { display: block; padding: 0 var(--st-gutter-mobile) 12px; }
  .st-mobile-search[hidden] { display: none; }
  .st-mobile-search .st-search { width: 100%; }
  .st-header--overlay:not(.is-stuck) .st-mobile-search .st-search {
    border-color: color-mix(in srgb, var(--st-white) 50%, transparent);
    background: color-mix(in srgb, var(--st-white) 12%, transparent);
  }
  .st-header--overlay:not(.is-stuck) .st-mobile-search input { color: var(--st-white); }
  .st-header--overlay:not(.is-stuck) .st-mobile-search input::placeholder { color: color-mix(in srgb, var(--st-white) 85%, transparent); }
  .st-header--overlay:not(.is-stuck) .st-mobile-search button { color: var(--st-white); }
}

/* ---------------------------------------------------------------- Drawer */

.st-drawer { position: fixed; inset: 0; z-index: 1000; }
.st-drawer[hidden] { display: none; }
.st-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(24, 21, 18, 0.5);
  opacity: 0;
  transition: opacity 200ms ease;
}
.st-drawer.is-open .st-drawer__scrim { opacity: 1; }

.st-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(92vw, 420px);
  background: var(--st-ivory);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 240ms ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.st-drawer.is-open .st-drawer__panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .st-drawer__scrim, .st-drawer__panel { transition: none; }
}

.st-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 8px 0 var(--st-gutter-mobile);
  border-bottom: 1px solid var(--st-linen);
  flex-shrink: 0;
}
.st-drawer__title {
  font-size: var(--st-eyebrow);
  letter-spacing: var(--st-track-eyebrow);
  text-transform: uppercase;
  color: var(--st-bronze);
}
.st-drawer__close {
  width: var(--st-tap-min);
  height: var(--st-tap-min);
  border: 0;
  background: transparent;
  color: var(--st-espresso);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.st-drawer__search { margin: 16px var(--st-gutter-mobile); width: auto; flex-shrink: 0; }

.st-drawer__nav { display: flex; flex-direction: column; }
.st-drawer__link,
.st-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 var(--st-gutter-mobile);
  border: 0;
  border-bottom: 1px solid var(--st-divider);
  background: transparent;
  color: var(--st-espresso);
  font-family: var(--st-sans);
  font-size: var(--st-label);
  font-weight: 500;
  letter-spacing: var(--st-track-nav);
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.st-drawer__toggle svg { transition: transform 180ms ease; flex-shrink: 0; }
.st-drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.st-drawer__toggle[aria-expanded="true"] { border-bottom-color: transparent; }

.st-drawer__panel-list { display: flex; flex-direction: column; background: var(--st-white); border-bottom: 1px solid var(--st-divider); }
.st-drawer__panel-list[hidden] { display: none; }
.st-drawer__sublink {
  display: flex;
  align-items: center;
  min-height: var(--st-tap-min);
  padding: 10px var(--st-gutter-mobile) 10px 36px;
  color: var(--st-espresso);
  text-decoration: none;
  font-size: 15px;
}
.st-drawer__sublink--all { font-weight: 500; }
.st-drawer__sublink--deep { padding-left: 56px; color: var(--st-taupe); font-size: var(--st-small); }
.st-drawer__sublink:hover { background: var(--st-ivory); }

.st-drawer__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--st-linen);
  flex-shrink: 0;
}
.st-drawer__foot-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 var(--st-gutter-mobile);
  color: var(--st-espresso);
  text-decoration: none;
  font-size: 15px;
}
.st-drawer__foot-link:hover { background: var(--st-stone); }

body.st-drawer-open { overflow: hidden; }

/* ---------------------------------------------------------------- Footer */

.st-footer {
  background: var(--st-ivory);
  color: var(--st-espresso);
  border-top: 1px solid var(--st-linen);
}
.st-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 88px var(--st-gutter-desktop) 40px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.st-footer__columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr 1.2fr;
  gap: 48px;
}
.st-footer__brand { display: flex; flex-direction: column; gap: 24px; color: var(--st-espresso); }
/* The head groups the logo and tagline so they can travel together when the
   footer reflows on a phone. It does nothing at this width. */
.st-footer__brandhead { display: flex; flex-direction: column; gap: 24px; }
/* Call us / Email us and the contact line are drawn on the mobile design
   only; the desktop footer says the same thing in its Contact column. */
.st-footer__contact,
.st-footer__reach { display: none; }

/* The column heading is a button so it can collapse on a phone. Here it is
   just a heading, so it is stripped back to one. */
.st-footer__toggle {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: default;
  width: 100%;
}
.st-footer__pm { display: none; }
.st-footer__links { display: flex; flex-direction: column; gap: 14px; }
.st-footer__brand a { color: inherit; }
.st-footer__tagline {
  margin: 0;
  color: var(--st-espresso);
  font-family: var(--st-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.35;
  max-width: 280px;
}
/* The design keeps these four on one line, and that is load bearing: the
   brand column is a `1.4fr` track, so its width is set by whichever of its
   children is widest, and this row is the widest at 356px. Let it wrap and the
   track collapses to its fr share, which drags the other four columns out of
   position across every page. It wraps on mobile, where the grid is one
   column and nothing depends on it. */
.st-footer__social {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  font-size: var(--st-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.st-footer__social a {
  color: var(--st-espresso);
  /* Underlined, as the design draws them. Inside a column of plain words
     there is nothing else marking these as links. */
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: var(--st-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
}
.st-footer__social a:hover { color: var(--st-bronze); }

.st-footer__col { display: flex; flex-direction: column; gap: 14px; }
/* All six page designs draw the footer headings a touch tighter than the
   eyebrow token, which follows styles.html. */
.st-footer__col .st-eyebrow { margin-bottom: 6px; letter-spacing: 0.22em; }
.st-footer__link { color: var(--st-espresso); text-decoration: none; font-size: 15px; line-height: 1.5; }
.st-footer__link:hover { color: var(--st-bronze); }
.st-footer__link[href^="mailto:"] { text-decoration: underline; text-underline-offset: 3px; }
/* 22px, not the design's 28: at 28 it was the loudest thing in the footer
   and drowned the column it belongs to. Asked for on 30 Sep 2026. */
.st-footer__link--phone { font-family: var(--st-serif); font-size: 22px; font-weight: 500; line-height: 1.15; }

.st-footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--st-linen);
}
.st-footer__legal { font-size: var(--st-eyebrow); line-height: 1.6; color: var(--st-taupe); max-width: 720px; }
.st-footer__legal p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; font-weight: 400; }
.st-footer__payments {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.st-footer__payments li {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--st-linen);
  border-radius: 3px;
  display: flex;
  align-items: center;
  font-size: var(--st-eyebrow);
  color: var(--st-espresso);
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .st-footer__inner { padding: 56px var(--st-gutter-mobile) 32px; gap: 28px; }
  /* One column at tablet width too: the five-column grid with the brand set
     to display: contents overflowed to 920px at 768. */
  .st-footer__columns { display: flex; flex-direction: column; gap: 0; }

  /* A single column, ordered the way the design stacks it: brand, the two
     contact buttons, the contact line, the collapsed sections, then social.
     `display: contents` lets the brand's children take part in that order
     without a second wrapper. */
  .st-footer__brand { display: contents; }
  .st-footer__brandhead { order: 1; gap: 14px; margin-bottom: 28px; }
  .st-footer__contact {
    order: 2;
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .st-footer__cta {
    height: 52px;
    border: 1px solid var(--st-linen);
    border-radius: var(--st-radius);
    color: var(--st-espresso);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: var(--st-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .st-footer__reach { order: 3; display: block; margin: -14px 0 28px; font-size: 13px; color: var(--st-taupe); }
  /* 12px here, not 13: at 13 with a 20px gap Pinterest dropped to a second
     line, where the design fits all four across. */
  .st-footer__social { order: 5; margin-top: 28px; font-size: 12px; letter-spacing: 0.1em; }
  .st-footer__social a { font-size: 12px; letter-spacing: 0.1em; }

  /* The link lists collapse. One rule above the first and one under each. */
  .st-footer__col { order: 4; gap: 0; border-bottom: 1px solid var(--st-linen); }
  /* Said twice otherwise - the buttons and the line above carry it. */
  .st-footer__col--contact { display: none; }
  .st-footer__col:first-of-type { border-top: 1px solid var(--st-linen); }
  .st-footer__toggle {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    cursor: pointer;
    letter-spacing: 0.18em;
  }
  .st-footer__toggle .st-footer__pm { display: flex; }
  .st-footer__pm svg:last-child { display: none; }
  .st-footer__toggle[aria-expanded="true"] .st-footer__pm svg:first-child { display: none; }
  .st-footer__toggle[aria-expanded="true"] .st-footer__pm svg:last-child { display: block; }
  .st-footer__links { padding-bottom: 20px; }
  .st-footer__links[hidden] { display: none; }

  /* Payment marks above the small print, as drawn. */
  .st-footer__base { flex-direction: column; align-items: flex-start; gap: 24px; }
  .st-footer__payments { order: 1; }
  .st-footer__legal { order: 2; }
}

@media (max-width: 640px) {
  /* No gap on the container: the collapsed sections sit flush, divided only
     by their own rules, so the spacing is carried by the pieces above and
     below them instead. */
  .st-footer__columns { display: flex; flex-direction: column; gap: 0; }
  .st-footer__base { flex-direction: column; align-items: flex-start; gap: 24px; }
  .st-footer__link { min-height: var(--st-tap-min); display: flex; align-items: center; }
  .st-footer__social { flex-wrap: wrap; }
  .st-footer__social a { min-height: var(--st-tap-min); display: inline-flex; align-items: center; }
}

/* Restored after the shared header block moved: hover colours, and the badges
   that follow the header state once it becomes solid on scroll. */
.st-header__util:hover { color: var(--st-bronze); }
.st-header--overlay:not(.is-stuck) .st-header__util:hover { color: var(--st-on-dark-cream); }
.st-header--solid .st-mobile-bar__count,
.is-stuck .st-mobile-bar__count { background: var(--st-espresso); color: var(--st-ivory); }
.is-stuck .st-header__badge { background: var(--st-espresso); color: var(--st-ivory); }


/* ============================================================ Design pass */

@media (max-width: 1024px) {
  /* The footer's accordion headings: 13px espresso at 0.18em, not the 12px
     bronze eyebrow they were sharing. */
  /* Two classes deep to clear `.st-footer__col .st-eyebrow`, which the same
     element carries and which was keeping the wider 0.22em. */
  .st-footer__col .st-footer__toggle {
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--st-espresso);
  }
  .st-footer__tagline { font-size: 21px; }
}

/* Legacy product pages (variable products until T10): the old theme sets
   the related-products list to 1200px and its phone override never applies
   (theme-settings.php prints max-width: 1500pxpx). Live covers this in its
   Customizer CSS; staging has none, so it is kept here. */
body.single-product:not(.st-redesign) .products,
body.single-product:not(.st-redesign) .products ul { width: 100%; max-width: 100%; }

/* Client logo artwork (PNG, about 4:1). Footer gets a little more height so
   the strapline under the wordmark stays legible. */
.st-footer .st-header__logo-img { height: 60px; width: auto; }
@media (max-width: 1024px) { .st-footer .st-header__logo-img { height: 52px; } }