/*
Theme Name: sayru
Theme URI: https://www.sayru.com/
Author: Shenzhen Sayru Technology Co., Ltd.
Author URI: https://www.sayru.com/
Description: Block theme for Sayru - custom packaging bags, boxes and food service packaging. Built as a B2B catalogue: specifications and galleries, no prices, no cart.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Version: 2.62.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sayru
Tags: block-theme, full-site-editing, business
*/

/* ------------------------------------------------------------------
   Supplementary styles. The design system lives in theme.json; only
   what theme.json cannot express is written here.
   ------------------------------------------------------------------ */

:root {
  --sayru-line: var(--wp--preset--color--line);
  --sayru-ease: cubic-bezier(.4, 0, .2, 1);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

h1, h2, h3, h4, .wp-block-post-title { text-wrap: balance; }
p, li { text-wrap: pretty; }

:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
  outline: 2px solid var(--wp--preset--color--brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* WordPress puts a block-gap margin between every top-level block, which
   leaves a strip of page background between the header and a full-bleed first
   section. Templates supply their own top padding, so drop it. */
.wp-site-blocks > main { margin-block-start: 0; }

/* ---------- Eyebrow label ---------- */
.sayru-eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand);
  margin-bottom: .75rem;
}

/* ---------- Header ---------- */
.sayru-header {
  border-bottom: 1px solid var(--sayru-line);
  background: var(--wp--preset--color--white);
}
.sayru-topbar {
  background: var(--wp--preset--color--brand-dark);
  color: #D5E3DA;
  font-size: .8125rem;
}
.sayru-topbar a { color: #FFF; text-decoration: none; }
.sayru-topbar a:hover { text-decoration: underline; }

.sayru-header .wp-block-navigation {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: .9375rem;
}
.sayru-header .wp-block-navigation a { text-decoration: none; }
.sayru-header .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--brand); }
.sayru-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--brand); }

/* ---------- Section rhythm ---------- */

/* An intro section sits directly above the first content section, so their
   paddings were stacking into a gap of nearly 200px. The intro carries the
   page heading and needs far less room beneath it. */
.sayru-section--tight { padding-bottom: var(--wp--preset--spacing--30); }
/* Two plain sections in a row do not need two full paddings between them.
   Sections that carry their own background keep theirs, or the band would
   collide with the text above it. */
.sayru-section:not(.sayru-section--mist):not(.sayru-creds)
  + .sayru-section:not(.sayru-section--mist):not(.sayru-creds),
.wp-block-group.alignfull:has(> .sayru-section:not(.sayru-section--mist):not(.sayru-creds))
  + .sayru-section:not(.sayru-section--mist):not(.sayru-creds),
.sayru-section:not(.sayru-section--mist):not(.sayru-creds)
  + .wp-block-group.alignfull > .sayru-section:not(.sayru-section--mist):not(.sayru-creds),
.wp-block-group.alignfull:has(> .sayru-section:not(.sayru-section--mist):not(.sayru-creds))
  + .wp-block-group.alignfull > .sayru-section:not(.sayru-section--mist):not(.sayru-creds) {
  padding-top: var(--wp--preset--spacing--40);
}
.sayru-section { padding-block: var(--wp--preset--spacing--60); }
.sayru-section--tight { padding-block: var(--wp--preset--spacing--50); }
.sayru-section--mist { background: var(--wp--preset--color--mist); }

.sayru-sectionhead {
  /* 62ch of the small section-head font came out at under 500px, which read
     as a stray narrow block beside full-width content. */
  max-width: min(760px, 100%);
  margin-bottom: var(--wp--preset--spacing--40);
}
.sayru-sectionhead p { color: var(--wp--preset--color--muted); }

/* ---------- Pouch style tiles ---------- */
.sayru-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  gap: 1px;
  background: var(--sayru-line);
  border: 1px solid var(--sayru-line);
}
.sayru-tile {
  background: var(--wp--preset--color--white);
  padding: 2.6rem 1.25rem 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: background .18s var(--sayru-ease);
}
.sayru-tile:hover { background: var(--wp--preset--color--brand-tint); }
.sayru-tile svg { width: 64px; height: 64px; stroke: var(--wp--preset--color--ink); fill: none; stroke-width: 1.4; }
.sayru-tile:hover svg { stroke: var(--wp--preset--color--brand); }
.sayru-tile span {
  /* 11px mono caps under a small icon read as a caption, not a link. */
  font-family: var(--wp--preset--font-family--display);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--wp--preset--color--ink);
}

/* ---------- Application cards ---------- */
.sayru-apps {
  /* Fifteen cards: five across gives three complete rows. */
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem; align-items: start;
}
@media (max-width: 1200px) { .sayru-apps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .sayru-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .sayru-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sayru-app {
  position: relative; display: block; overflow: hidden;
  border-radius: 4px; text-decoration: none; background: var(--wp--preset--color--mist);
  aspect-ratio: 1 / 1;
}
.sayru-app img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--sayru-ease); }
.sayru-app:hover img { transform: scale(1.04); }
.sayru-app__label {
  position: absolute; inset: auto 0 1.55rem 0; padding: 2.5rem .95rem 0;
  background: linear-gradient(to top, rgba(18,58,40,.92), rgba(18,58,40,0));
  color: #fff; font-family: var(--wp--preset--font-family--display);
  font-weight: 600; font-size: .9375rem; line-height: 1.25;
}
.sayru-app__count {
  position: absolute; inset: auto 0 0 0; padding: 0 .95rem .8rem;
  background: rgba(18, 58, 40, .92); color: #9FD3BF;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- Feature grid ---------- */
.sayru-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem 2.5rem; }
.sayru-feature { display: flex; gap: 1rem; align-items: flex-start; }
.sayru-feature img, .sayru-feature svg { width: 42px; height: 42px; flex: none; }
.sayru-feature h3 { font-size: 1.0625rem; margin: 0 0 .35rem; }
.sayru-feature p { margin: 0; font-size: .9375rem; color: var(--wp--preset--color--muted); }

/* ---------- Stat row ---------- */
.sayru-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: rgba(255,255,255,.22);
}
.sayru-stat { padding: 1.6rem 1.5rem; background: rgba(13, 61, 29, .34); }
@media (max-width: 780px) { .sayru-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sayru-stat b {
  display: block; font-family: var(--wp--preset--font-family--display);
  font-size: 1.9rem; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.sayru-stat span {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75;
}

/* ---------- Hero slideshow ---------- */
.sayru-hero { padding-block: clamp(2.75rem, 5vw, 4.75rem); }
.sayru-hero__cols { gap: clamp(1.75rem, 3vw, 2.75rem); }
/* The headline carries a hyphen, which the browser treats as a break
   opportunity; at the display size it split "Industry-" onto its own
   line. Sizing it to fit the longest word keeps the break where the
   sense is. */
.sayru-hero h1 { font-size: clamp(2.1rem, 3.35vw, 3.15rem); }
/* The hero carries five figures, where the band elsewhere carries four. */
.sayru-hero .sayru-stats--hero {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1100px) { .sayru-hero .sayru-stats--hero { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sayru-hero .sayru-stats--hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sayru-hero .sayru-stat { padding: 1.15rem 1.25rem; }
.sayru-hero .sayru-stat b { font-size: 1.55rem; }

.sayru-hero__deck { position: relative; }
.sayru-hero__track {
  position: relative; list-style: none; margin: 0; padding: 0;
  aspect-ratio: 12 / 5; overflow: hidden; border-radius: 14px;
  background: #0F2E1D; box-shadow: 0 22px 55px rgba(0, 0, 0, .38);
}
.sayru-hero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .55s ease; }
.sayru-hero__slide.is-current { opacity: 1; }
/* Both captions were readable at the midpoint of the crossfade, one on
   top of the other. The outgoing one leaves before the incoming arrives. */
.sayru-hero__slide .sayru-hero__tag { opacity: 0; transition: opacity .18s ease; }
.sayru-hero__slide.is-current .sayru-hero__tag { opacity: 1; transition: opacity .3s ease .28s; }
.sayru-hero__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The photographs are light, so the caption needs its own ground to sit on. */
.sayru-hero__slide::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(rgba(9, 32, 19, 0), rgba(9, 32, 19, .74)); pointer-events: none;
}
.sayru-hero__tag {
  position: absolute; z-index: 1;
  left: clamp(1rem, 3.5%, 2rem); bottom: clamp(.9rem, 5%, 1.6rem);
  color: #fff; text-decoration: none; font-weight: 700; line-height: 1.15;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.05rem, 1.75vw, 1.6rem); letter-spacing: -.01em;
  padding-bottom: .38rem; border-bottom: 4px solid var(--wp--preset--color--brand);
}
.sayru-hero__tag:hover, .sayru-hero__tag:focus-visible { border-bottom-color: #fff; }

/* Nothing to operate until the script is running, so nothing is shown. */
.sayru-hero__controls { display: none; align-items: center; gap: 1.15rem; margin-top: 1.05rem; }
.sayru-hero__deck.is-live .sayru-hero__controls { display: flex; }
.sayru-hero__dots { display: flex; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.sayru-hero__dot {
  display: block; width: 34px; height: 6px; padding: 0; border: 0; border-radius: 99px;
  background: rgba(255, 255, 255, .3); cursor: pointer; transition: background .2s ease;
}
.sayru-hero__dot:hover { background: rgba(255, 255, 255, .55); }
.sayru-hero__dot[aria-current="true"] { background: var(--wp--preset--color--brand); }
.sayru-hero__toggle {
  border: 1px solid rgba(255, 255, 255, .38); border-radius: 99px; background: transparent;
  color: #fff; cursor: pointer; padding: .3rem .9rem; line-height: 1.4;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
}
.sayru-hero__toggle:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

@media (prefers-reduced-motion: reduce) { .sayru-hero__slide { transition: none; } }
@media (max-width: 781px) {
  .sayru-hero__track { aspect-ratio: 16 / 9; }
  .sayru-hero__deck { margin-top: 2.25rem; }
}

/* ---------- Plant and equipment ---------- */
.sayru-plant {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem 1.25rem;
}
.sayru-plant__item { margin: 0; }
.sayru-plant__item img {
  /* height:auto first: the img carries an HTML height attribute, which is a
     presentational hint that outranks aspect-ratio and squashed the 4:3 crop. */
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 3px; background: var(--wp--preset--color--line);
}
.sayru-plant__item figcaption { padding-top: .7rem; }
.sayru-plant__item b {
  display: block; font-family: var(--wp--preset--font-family--display);
  font-size: .9375rem; font-weight: 600; margin-bottom: .15rem;
}
.sayru-plant__item span {
  display: block; font-size: .8125rem; line-height: 1.55;
  color: var(--wp--preset--color--muted);
}

/* ---------- Process steps ---------- */
/* Six steps stacked as full-width rows left a line of text floating in a
   third of the page. As a rule-lined module grid they read as a process sheet
   and the measure per cell stays sane. The 1px gap over a line-coloured
   background draws the rules, so no cell owns a border and none doubles up. */
.sayru-steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--sayru-line);
  border: 1px solid var(--sayru-line);
}
.sayru-step {
  counter-increment: step;
  background: var(--wp--preset--color--paper);
  padding: 1.9rem 1.75rem 2.1rem;
}
.sayru-step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 1rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 500;
  color: var(--wp--preset--color--brand);
}
.sayru-step h3 { font-size: 1.125rem; margin: 0 0 .5rem; text-wrap: balance; }
.sayru-step p { margin: 0; color: var(--wp--preset--color--muted); font-size: .9375rem; line-height: 1.65; }

@media (max-width: 1100px) { .sayru-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .sayru-steps { grid-template-columns: 1fr; } }

/* ---------- Quote CTA ---------- */
.sayru-cta {
  background: var(--wp--preset--color--brand-dark); color: #E8F1EC;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
  border-radius: 4px;
  /* Column gap only: the copy blocks bring their own vertical rhythm, and a
     row gap here would prise the heading away from its paragraph. */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem);
  gap: 0 clamp(2.5rem, 5vw, 5rem); align-items: start; align-content: start;
  align-items: start;
}
.sayru-cta h2 { color: #fff; margin: 0 0 .75rem; }
.sayru-cta p { color: #C6D8CE; max-width: 62ch; margin: 0 0 1.25rem; }
/* The CTA's copy arrives as separate sibling blocks, so the grid would deal
   them alternately across both columns. Pin the copy to column one and let the
   contact panel span the full height of column two. */
.sayru-cta__copy { grid-column: 1; }
.sayru-cta__direct {
  grid-column: 2; align-self: start;
  border-left: 1px solid rgba(255,255,255,.18); padding-left: 2.5rem;
  display: flex; flex-direction: column; justify-content: center;
}
/* Labels, not headings: a footer column title and a contact
   label were sitting in the document outline as h4 and h3 under
   the CTA's h2, which is not the structure of the page. */
.sayru-cta__direct .sayru-cta__label {
  color: #9FD3BF; font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 .9rem; font-weight: 500;
}
.sayru-cta__direct p { color: #E8F1EC; font-size: .9375rem; line-height: 1.85; margin: 0; }
.sayru-cta__direct a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.sayru-cta__direct a:hover { border-bottom-color: #fff; }
@media (max-width: 782px) {
  .sayru-cta { grid-template-columns: 1fr; gap: 2rem 0; }
  .sayru-cta__copy { grid-column: 1; }
  .sayru-cta__direct {
    grid-column: 1; grid-row: auto;
    border-left: none; border-top: 1px solid rgba(255,255,255,.18);
    padding-left: 0; padding-top: 1.75rem;
  }
}

/* ---------- WooCommerce catalogue ---------- */

/* Archive header: WooCommerce ships its own title markup, so it needs the
   theme's heading treatment applied rather than inherited. */
.woocommerce-products-header { margin-bottom: var(--wp--preset--spacing--40); }
.woocommerce-products-header__title,
.woocommerce .page-title,
.woocommerce h1.page-title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--h-1);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.06;
  margin: 0 0 .75rem;
}
.woocommerce-products-header .term-description,
.woocommerce-products-header p {
  font-size: var(--wp--preset--font-size--lead);
  color: var(--wp--preset--color--ink-soft);
  max-width: 62ch; margin: 0;
}

.woocommerce .woocommerce-breadcrumb {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-bottom: var(--wp--preset--spacing--30);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--wp--preset--color--brand); text-decoration: none; }

/* Result count and ordering: quiet, they are utilities not content. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  font-size: .875rem; color: var(--wp--preset--color--muted);
}
.woocommerce .woocommerce-ordering select {
  font-family: inherit; font-size: .875rem; padding: .4rem .6rem;
  border: 1px solid var(--sayru-line); border-radius: 3px; background: #fff;
}

/* The empty-catalogue notice ships as a blue browser-default alert. */
.woocommerce-info, .woocommerce-message, .woocommerce-error {
  border-top: none; border-left: 3px solid var(--wp--preset--color--brand);
  background: var(--wp--preset--color--mist); color: var(--wp--preset--color--ink);
  padding: 1rem 1.25rem; border-radius: 0 3px 3px 0;
}
.woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { display: none; }

/* Archive header - WooCommerce leaves its own header empty under a block
   theme, so the theme outputs the title and description itself. */
.sayru-archive-head { margin-bottom: var(--wp--preset--spacing--40); }
.sayru-archive-head h1 {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--h-1);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.06;
  margin: 0 0 .6rem;
}
.sayru-archive-head p {
  font-size: var(--wp--preset--font-size--lead);
  color: var(--wp--preset--color--ink-soft);
  margin: 0; max-width: 68ch;
}

/* Category chips above the grid */
.sayru-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--wp--preset--spacing--40); }
.sayru-cats a {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .5rem .85rem; border: 1px solid var(--sayru-line); border-radius: 2px;
  background: #fff; color: var(--wp--preset--color--ink-soft); text-decoration: none;
  transition: border-color .18s var(--sayru-ease), color .18s var(--sayru-ease);
}
.sayru-cats a:hover { border-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--brand); }
.sayru-cats a[aria-current="page"] {
  background: var(--wp--preset--color--brand); border-color: var(--wp--preset--color--brand); color: #fff;
}

.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.75rem; margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important;
  border: 1px solid var(--sayru-line); background: var(--wp--preset--color--white);
  border-radius: 4px; overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s var(--sayru-ease), transform .2s var(--sayru-ease);
}
.woocommerce ul.products li.product:hover {
  box-shadow: var(--wp--preset--shadow--lift); transform: translateY(-2px);
}
.woocommerce ul.products li.product a img { margin: 0; aspect-ratio: 1; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: .9375rem !important; font-weight: 500; line-height: 1.5;
  padding: .9rem 1rem 1.1rem !important; margin: 0 !important; color: var(--wp--preset--color--ink);
}

/* ---------- Single product: gallery | specification | enquiry rail ----------
   A trade buyer wants the pouch, the spec and the way to ask for a price in
   one view. The reference site puts all three side by side; so does this.     */

/* Gallery: the main image takes the whole column and the thumbnail strip sits
   under it. A 68px rail down the left cost the main image a fifth of its width
   for six postage stamps nobody can read at that size. */
.woocommerce div.product div.images {
  width: auto !important; float: none !important; margin: 0 !important;
  display: grid; grid-template-columns: 1fr; gap: .75rem;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
  grid-column: 1; grid-row: 1; margin: 0;
}
.woocommerce div.product div.images img {
  /* border-box, or the 1px border is added outside the 100% width and the
     gallery viewport -- which clips -- eats the left and right edges of the
     frame while leaving the top and bottom visible. */
  box-sizing: border-box;
  border-radius: 3px; border: 1px solid var(--sayru-line); background: #fff;
}
.woocommerce div.product div.images .flex-control-thumbs {
  grid-column: 1; grid-row: 2;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: .6rem; margin: 0; padding: 0; list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs li { width: 100%; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs a,
.woocommerce div.product div.images .woocommerce-product-gallery__image { display: block; }
.woocommerce div.product div.images figure { margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img {
  opacity: .55; transition: opacity .15s var(--sayru-ease), border-color .15s var(--sayru-ease);
  cursor: pointer;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover {
  opacity: 1; border-color: var(--wp--preset--color--brand);
}

/* Summary column */
/* text-wrap: balance evens the line lengths, which on a long product name
   breaks early and leaves a hole down the right of the column. The title
   should use the width it has and wrap only when it runs out. */
.woocommerce div.product .product_title { text-wrap: pretty; }
.woocommerce div.product .product_title {
  font-size: 1.75rem; line-height: 1.22; margin: 0 0 .6rem; letter-spacing: -.015em;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  /* No measure cap: the summary column is the width the copy should fill.
     A 60ch box inside a 945px column left the right third of the row blank. */
  font-size: 1.0625rem; color: var(--wp--preset--color--ink-soft);
  margin-bottom: var(--wp--preset--spacing--30);
}

/* Enquiry rail */
.sayru-rail__inner {
  position: sticky; top: 1.5rem;
  border: 1px solid var(--sayru-line); border-top: 3px solid var(--wp--preset--color--brand);
  background: #fff; padding: 1.35rem 1.25rem; border-radius: 3px;
  box-shadow: var(--wp--preset--shadow--soft);
}
.sayru-rail__eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp--preset--color--brand); margin: 0 0 .4rem;
}
.sayru-rail__lead { font-size: .875rem; line-height: 1.6; color: var(--wp--preset--color--ink-soft); margin: 0 0 1rem; }
.sayru-rail__cta,
.sayru-rail__alt {
  display: block; text-align: center; text-decoration: none;
  font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .9375rem;
  padding: .75em 1em; border-radius: 3px; transition: background .15s var(--sayru-ease);
}
.sayru-rail__cta { background: var(--wp--preset--color--brand); color: #fff; }
.sayru-rail__cta:hover { background: var(--wp--preset--color--brand-deep); }
.sayru-rail__alt {
  margin-top: .5rem; border: 1px solid var(--sayru-line);
  color: var(--wp--preset--color--ink-soft); background: #fff;
}
.sayru-rail__alt:hover { border-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--brand); }
.sayru-rail__facts {
  margin: 1.15rem 0 0; padding-top: 1rem; border-top: 1px solid var(--sayru-line);
  display: grid; grid-template-columns: auto 1fr; gap: .45rem .8rem; font-size: .8125rem;
}
.sayru-rail__facts dt { color: var(--wp--preset--color--muted); white-space: nowrap; }
.sayru-rail__facts dd { margin: 0; color: var(--wp--preset--color--ink); }
.sayru-rail__direct {
  margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--sayru-line);
  font-size: .8125rem; line-height: 1.7;
}
.sayru-rail__direct a { color: var(--wp--preset--color--brand-deep); text-decoration: none; }
.sayru-rail__direct a:hover { text-decoration: underline; }

/* Tabs, full width beneath */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0; margin: 0 0 1.5rem; border-bottom: 1px solid var(--sayru-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none; border: none; border-radius: 0; margin: 0 1.75rem 0 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--wp--preset--font-family--display); font-weight: 600;
  font-size: .9375rem; color: var(--wp--preset--color--muted);
  padding: .6rem 0; display: block; border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--wp--preset--color--ink); border-bottom-color: var(--wp--preset--color--brand);
}
/* The description panel carries full-width detail imagery, so it runs at the
   body measure rather than a reading column; its prose keeps its own measure. */
/* The catalogue mu-plugin swaps add-to-cart for an enquiry link. The rail
   under the gallery already carries that call to action, so on the single
   product the link is a second identical CTA a few pixels away. */
.woocommerce div.product .sayru-inquiry { display: none; }

.woocommerce-Tabs-panel { max-width: none; }
/* The panel spans the body width, so the copy in it does too. Capping these
   at a reading measure was what left the right half of every product
   description empty. */
.woocommerce-Tabs-panel > p,
.woocommerce-Tabs-panel > ul,
.woocommerce-Tabs-panel > ol { max-width: none; }
/* The detail sections are paired, so each one gets half the row and neither
   ends up as a thin ribbon of text beside an empty half-page. */
.sayru-detail__pair {
  gap: clamp(2rem, 5vw, 4.5rem) !important;
  margin-block: clamp(1.75rem, 3.5vw, 2.75rem) !important;
}
.sayru-detail__pair h3 { margin-top: 0 !important; }
.sayru-detail__pair p { max-width: none; }
.sayru-detail__shots { gap: clamp(1rem, 2vw, 1.75rem) !important; }
.woocommerce-Tabs-panel img,
.woocommerce-Tabs-panel figure {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  height: auto;
}
.woocommerce-Tabs-panel .wp-block-image { text-align: center; }
.woocommerce-Tabs-panel .wp-block-columns { max-width: none; }
.woocommerce-Tabs-panel--description img { max-width: 100%; height: auto; display: block; margin-inline: auto; }

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
  font-size: var(--wp--preset--font-size--h-3); margin-bottom: var(--wp--preset--spacing--30);
  padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--sayru-line);
}

@media (max-width: 860px) {
  .woocommerce div.product div.images .flex-control-thumbs {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  }
  .sayru-rail__facts { grid-template-columns: auto 1fr; }
}

/* ---------- Footer ---------- */
.sayru-footer { background: var(--wp--preset--color--ink); color: #B3C0B9; }
/* The front page below its first two bands is laid out only when it comes
   near the screen. On a phone its 1,200 elements held the first paint back by
   two seconds of style and layout work; the intrinsic size keeps the scrollbar
   honest until each band renders. Not on the footer: a skipped footer has no
   background to measure, and contrast checkers read its light links as white
   on white. */
.home .wp-block-post-content > .alignfull:nth-child(n+3) { content-visibility: auto; contain-intrinsic-size: auto 700px; }
.sayru-footer a { color: #E4EDE8; text-decoration: none; }
.sayru-footer a:hover { text-decoration: underline; }
.sayru-footer .sayru-footer__label {
  color: #fff; font-size: .75rem; font-family: var(--wp--preset--font-family--mono);
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1rem; font-weight: 500;
}
/* Five tracks, not four: the product list needs two of them, and without
   the fifth the contact column drops to a row of its own. */
/* Four groups: the company and how to reach it in one column, then the three
   taxonomies the catalogue is organised by. End use has the most entries, so
   it takes two tracks and splits into two lists. */
.sayru-footer__cols {
  display: grid;
  grid-template-columns:
    minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2.5rem 2.25rem;
}
.sayru-footer__about ul { margin-bottom: 0; }
.sayru-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; font-size: .9375rem; line-height: 1.55; }
.sayru-footer__legal {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.5rem;
  font-size: .8125rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
@media (max-width: 1280px) {
  .sayru-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sayru-footer__about { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .sayru-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) { .sayru-footer__cols { grid-template-columns: 1fr; } }

/* ---------- Page header band ----------
   Every interior page opened with the eyebrow, the h1 and the lede stacked in
   a narrow left column, which left two thirds of a wide screen empty and made
   the page read as an unfinished document. The band pairs the title with the
   four facts a trade buyer checks first, so the width carries information
   rather than being padded out. */
.sayru-pagehead {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 0 clamp(2.5rem, 6vw, 6rem);
  align-items: end;
  background: var(--wp--preset--color--mist);
  border-bottom: 1px solid var(--sayru-line);
  padding-block: clamp(3rem, 6vw, 5.25rem);
}
.sayru-pagehead__title { min-width: 0; }
.sayru-pagehead__title > * { margin-block: 0; }
.sayru-pagehead__title .sayru-eyebrow { margin-bottom: .85rem; }
.sayru-pagehead__title h1 { margin-bottom: 1.15rem; text-wrap: balance; }
.sayru-pagehead__title .sayru-lede { max-width: none; }

.sayru-pagehead__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  padding-left: clamp(1.25rem, 2.5vw, 2.25rem);
  border-left: 1px solid var(--sayru-line);
}
.sayru-pagehead__facts > * { margin-block: 0 !important; }
.sayru-fact { display: flex; flex-direction: column; gap: .3rem; }
.sayru-fact em {
  font-style: normal;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-deep);
}
.sayru-fact strong {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--wp--preset--color--ink);
}

@media (max-width: 1024px) {
  .sayru-pagehead { grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
  .sayru-pagehead__facts { border-left: none; padding-left: 0; padding-top: 1.75rem;
                           border-top: 1px solid var(--sayru-line); }
}
@media (max-width: 560px) { .sayru-pagehead__facts { grid-template-columns: 1fr; } }

/* ---------- About: story layout ----------
   The company story was a single 60ch column pinned to the left edge of a
   full-width section. Two columns of running text use the same measure per
   line but actually occupy the page. */
.sayru-story__lead {
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sayru-story__lead p {
  font-size: 1.0625rem;
  line-height: 1.75;
  margin-block: 0;
}
.sayru-story__pair {
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--sayru-line);
}
.sayru-story__pair h2 { margin-top: 0; margin-bottom: .85rem; text-wrap: balance; }
.sayru-story__pair p { margin-block: 0; }
.sayru-story__close {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding: .35rem 0 .35rem 1.5rem;
  border-left: 3px solid var(--wp--preset--color--brand);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--wp--preset--color--ink-soft);
  max-width: 68ch;
}

.sayru-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .85rem 2rem;
}
.sayru-checklist li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--wp--preset--color--ink-soft);
}
.sayru-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--wp--preset--color--brand);
}
.sayru-checklist li strong { color: var(--wp--preset--color--ink); }
/* A five-item list under a full-width heading reads as a thin ribbon of text.
   Two columns once there is room for them. */
.sayru-section > .sayru-checklist {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* The 78ch reading measure applies to running text, not to a two-column
     list -- it was holding this to 735px inside a 1504px band. */
  max-width: none !important;
}
/* Same reason: these lists are grids of cards, not paragraphs of prose. */
.sayru-section > .sayru-picks__grid,
.sayru-section > .sayru-services__grid,
.sayru-section > .sayru-apps,
.sayru-section > .sayru-family__key,
.sayru-section > .sayru-team__grid,
.sayru-picks > .sayru-picks__grid,
.sayru-services > .sayru-services__grid { max-width: none !important; }
/* A heading that opens a sub-section needs the same air above it as below. */
.sayru-section > .wp-block-heading + .sayru-checklist { margin-top: 1.25rem; }
.sayru-section > .sayru-checklist + .wp-block-heading,
.sayru-checklist + .wp-block-heading { margin-top: var(--wp--preset--spacing--50); }
@media (max-width: 780px) { .sayru-section > .sayru-checklist { grid-template-columns: 1fr; } }

/* ---------- Contact sidebar ----------
   The address card ran out halfway down a column the form kept filling, so
   the right of the page went blank for 300px. These two cards answer the
   questions a buyer has while filling the form in. */
.sayru-nextcard, .sayru-hourscard {
  margin-top: 1.5rem;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--sayru-line);
  border-radius: 3px;
  background: var(--wp--preset--color--paper);
}
.sayru-nextcard .sayru-eyebrow,
.sayru-hourscard .sayru-eyebrow { margin: 0 0 1rem; }
.sayru-next { list-style: none; margin: 0; padding: 0; counter-reset: nx; display: grid; gap: 1.15rem; }
.sayru-next li { counter-increment: nx; position: relative; padding-left: 2.1rem; }
.sayru-next li::before {
  content: counter(nx, decimal-leading-zero);
  position: absolute; left: 0; top: .1em;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .75rem; color: var(--wp--preset--color--brand); font-weight: 500;
}
.sayru-next b {
  display: block; font-family: var(--wp--preset--font-family--display);
  font-size: .9375rem; font-weight: 600; margin-bottom: .2rem;
}
.sayru-next span { display: block; font-size: .875rem; line-height: 1.6; color: var(--wp--preset--color--muted); }
.sayru-hourscard p { margin: 0; font-size: .875rem; line-height: 1.7; color: var(--wp--preset--color--muted); }

/* The catalogue header now uses the same band as the static pages, but it is
   already inside the shop's own padded wrapper, so it supplies the band's
   background across the full row rather than inside the content box. */
.sayru-archive-head.sayru-pagehead {
  background: none;
  border-bottom: 1px solid var(--sayru-line);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: var(--wp--preset--spacing--40);
}
.sayru-archive-head.sayru-pagehead h1 { margin: 0 0 .9rem; text-wrap: balance; }
.sayru-archive-head.sayru-pagehead p:not(.sayru-fact) {
  margin: 0;
  /* A step below the lead size. The range descriptions run to two or three
     lines now, and at the lead size they competed with the heading above
     them instead of reading as the note under it. */
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--wp--preset--color--ink-soft);
}


/* ---------- Header, small screens ----------
   The masthead row wrapped, dropping the toggle and the quote button onto a
   second line pinned to the left with the whole right half empty. */
@media (max-width: 860px) {
  .sayru-header > .alignwide { flex-wrap: nowrap; gap: 1rem; }
  .sayru-header .wp-block-site-logo { flex: 0 0 auto; }
  .sayru-header .wp-block-site-logo img { width: 116px; }
  .sayru-header .wp-block-buttons .wp-block-button__link { padding: .55rem 1rem; font-size: .8125rem; }
}
@media (max-width: 460px) {
  /* The navigation overlay carries the same call to action, so the button in
     the bar is a duplicate that squeezes the toggle. */
  .sayru-header .wp-block-buttons { display: none; }
}

/* Seven formats over two columns leave one empty cell showing the grid's own
   line colour. The odd one out takes the full row instead. */
@media (max-width: 780px) {
  .sayru-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Catalogue pagination ----------
   woocommerce-layout.css carried these styles and we drop that sheet, so the
   pager was sitting straight under the last row of cards with no air above it
   and no styling of its own. */
.woocommerce nav.woocommerce-pagination {
  margin-top: var(--wp--preset--spacing--50);
  padding-top: var(--wp--preset--spacing--40);
  border-top: 1px solid var(--sayru-line);
  text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex; flex-wrap: wrap; justify-content: center;
  gap: .375rem; list-style: none; margin: 0; padding: 0; border: none;
}
.woocommerce nav.woocommerce-pagination ul li { border: none; margin: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0 .6rem;
  border: 1px solid var(--sayru-line); border-radius: 3px;
  background: var(--wp--preset--color--paper);
  font-size: .9375rem; line-height: 1; text-decoration: none;
  color: var(--wp--preset--color--brand);
  transition: background .18s var(--sayru-ease), border-color .18s var(--sayru-ease);
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--wp--preset--color--brand-tint);
  border-color: var(--wp--preset--color--brand);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--wp--preset--color--brand);
  border-color: var(--wp--preset--color--brand);
  color: #fff; font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li span.dots {
  border-color: transparent; background: none; color: var(--wp--preset--color--muted);
}

/* The archive grid is auto-fill, which suits an open-ended catalogue. The
   related row holds exactly six, so pin it to six tracks and it fills the
   width in one clean row instead of leaving trailing blanks. */
.woocommerce div.product .related ul.products,
.woocommerce div.product .upsells ul.products {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 1400px) {
  .woocommerce div.product .related ul.products,
  .woocommerce div.product .upsells ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .woocommerce div.product .related ul.products,
  .woocommerce div.product .upsells ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .woocommerce div.product .related ul.products,
  .woocommerce div.product .upsells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Products mega menu ----------
   Sixteen categories as one vertical list would run past the fold, so the
   panel lays them out three across. The first item is the whole catalogue and
   spans the row, since that is the fallback when nothing else fits. */
@media (min-width: 861px) {
  .sayru-header .wp-block-navigation .sayru-megamenu > .wp-block-navigation__submenu-container {
    display: grid;
    /* Wide enough for the longest name -- "Cosmetic and Personal Care
       Packaging" -- on one line. It needs about 261px including the link's
       own padding, and 15rem columns left it eleven pixels of margin, which
       any difference in font rendering swallowed. auto-fit rather than a
       fixed three, so a narrow window drops to two columns instead of
       squeezing the labels back onto two lines. */
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: .1rem 2rem;
    width: max-content;
    max-width: min(64rem, 94vw);
    min-width: 0;
    padding: 1.4rem 1.6rem 1.6rem;
    background: var(--wp--preset--color--paper);
    border: 1px solid var(--sayru-line);
    border-radius: 4px;
    box-shadow: 0 18px 44px rgba(13, 61, 29, .13);
    /* Anchored to the item's left edge. Centring it pushed the panel past the
       left of the viewport; core's items-justified-right rule then pinned it
       to the right, so it hung back over the logo. !important settles it. */
    left: 0 !important;
    right: auto !important;
    transform: none;
  }
  .sayru-header .wp-block-navigation .sayru-megamenu
    > .wp-block-navigation__submenu-container > li.sayru-navhead:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}
.sayru-header .wp-block-navigation .sayru-megamenu
  > .wp-block-navigation__submenu-container > li > a {
  display: block;
  padding: .45rem .6rem;
  border-radius: 3px;
  font-family: var(--wp--preset--font-family--body);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--wp--preset--color--ink-soft);
  white-space: normal;
  text-wrap: balance;
  transition: background .16s var(--sayru-ease), color .16s var(--sayru-ease);
}
.sayru-header .wp-block-navigation .sayru-megamenu
  > .wp-block-navigation__submenu-container > li > a:hover {
  background: var(--wp--preset--color--brand-tint);
  color: var(--wp--preset--color--brand-deep);
}
/* Materials sit under the formats in the same dropdown. Forcing the first one
   into column 1 starts a fresh row, so the two groups read as two groups
   without needing a heading the block editor cannot give them. */
@media (min-width: 861px) {
  .sayru-header .wp-block-navigation .sayru-megamenu
    > .wp-block-navigation__submenu-container > li.sayru-navhead {
    grid-column: 1 / -1;
    margin: .85rem 0 .15rem;
    padding: .7rem .6rem 0;
    border-top: 1px solid var(--sayru-line);
    font-family: var(--wp--preset--font-family--mono);
    font-size: .625rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted);
  }
  .sayru-header .wp-block-navigation .sayru-megamenu
    > .wp-block-navigation__submenu-container > li.sayru-navapp > a,
  .sayru-header .wp-block-navigation .sayru-megamenu
    > .wp-block-navigation__submenu-container > li.sayru-navmat > a {
    color: var(--wp--preset--color--ink);
  }
}

/* The block's own arrow sits too tight against a 600-weight label. */
.sayru-header .wp-block-navigation .sayru-megamenu > a .wp-block-navigation__submenu-icon { margin-left: .3rem; }

/* A plain dropdown opened level with the nav rather than with the item it
   belongs to, because the mega menu needs its item positioned statically and
   that rule was catching every item. These anchor to their own parent. */
@media (min-width: 861px) {
  .sayru-header .wp-block-navigation .wp-block-navigation-submenu:not(.sayru-megamenu) {
    position: relative;
  }
  .sayru-header .wp-block-navigation .wp-block-navigation-submenu:not(.sayru-megamenu)
    > .wp-block-navigation__submenu-container {
    left: 0;
    top: 100%;
    width: max-content;
    min-width: 0;
    padding: .55rem;
    background: var(--wp--preset--color--paper);
    border: 1px solid var(--sayru-line);
    border-radius: 4px;
    box-shadow: 0 18px 44px rgba(13, 61, 29, .13);
  }
  .sayru-header .wp-block-navigation .wp-block-navigation-submenu:not(.sayru-megamenu)
    > .wp-block-navigation__submenu-container > li > a {
    display: block;
    padding: .5rem .7rem;
    border-radius: 3px;
    font-family: var(--wp--preset--font-family--body);
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--wp--preset--color--ink-soft);
    white-space: nowrap;
  }
  .sayru-header .wp-block-navigation .wp-block-navigation-submenu:not(.sayru-megamenu)
    > .wp-block-navigation__submenu-container > li > a:hover {
    background: var(--wp--preset--color--brand-tint);
    color: var(--wp--preset--color--brand-deep);
  }
}

/* The enquiry panel used to sit under the gallery in the left column, where it
   ran on past the bottom of the specification table and left the right half of
   that row blank. As a full-width band it carries the same content across the
   page: the offer, the commercial facts, and the way to ask. */
.woocommerce div.product > .sayru-rail { width: 100%; }
.sayru-rail__inner {
  padding: 1.75rem clamp(1.5rem, 2.5vw, 2.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(15rem, 19rem);
  gap: 0 clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
/* Three groups, not six loose siblings: the grid was sizing its rows off the
   tallest cell, which pushed the lead a button's height away from its label. */
.sayru-rail__intro .sayru-rail__eyebrow { margin-top: 0; }
.sayru-rail__intro .sayru-rail__lead { margin-bottom: 0; font-size: .9375rem; }
.sayru-rail__facts { margin: 0; }
.sayru-rail__actions { display: grid; gap: .5rem; }
.sayru-rail__actions .sayru-rail__alt { margin-top: 0; }
.sayru-rail__direct { margin: .35rem 0 0; }
@media (max-width: 1100px) {
  .sayru-rail__inner { grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); }
  .sayru-rail__intro { grid-column: 1; }
  .sayru-rail__facts { grid-column: 1; margin-top: 1.25rem; }
  .sayru-rail__actions { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 760px) {
  .sayru-rail__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .sayru-rail__inner > * { grid-column: 1 !important; grid-row: auto !important; margin-top: 0; }
}

/* ---------- Breadcrumb ----------
   One trail for the whole site, printed under the header rather than inside
   each template, so a page and a product both get it in the same place. */
.sayru-crumbs {
  border-bottom: 1px solid var(--sayru-line);
  background: var(--wp--preset--color--paper);
}
.sayru-crumbs__inner {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding: .85rem var(--wp--style--root--padding-right, 1rem) .85rem var(--wp--style--root--padding-left, 1rem);
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1rem .55rem;
}
.sayru-crumbs a { color: var(--wp--preset--color--brand); text-decoration: none; }
.sayru-crumbs a:hover { text-decoration: underline; }
.sayru-crumbs__sep { color: var(--sayru-line); }
.sayru-crumbs [aria-current="page"] { color: var(--wp--preset--color--ink-soft); }

/* ---------- FAQ accordion ----------
   Two columns, flowing row by row. A masonry-style multi-column layout looks
   tidier closed but reflows the whole list every time an item opens; this one
   stays put. align-items: start stops an opened answer stretching the item
   beside it. */
.sayru-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.sayru-faq .wp-block-details {
  border-bottom: 1px solid var(--sayru-line);
  padding: 0;
  margin: 0;
  background: none;
}
.sayru-faq .wp-block-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.25rem 1.15rem 0;
  position: relative;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--wp--preset--color--ink);
  transition: color .16s var(--sayru-ease);
}
.sayru-faq .wp-block-details > summary::-webkit-details-marker { display: none; }
.sayru-faq .wp-block-details > summary::marker { content: ""; }
.sayru-faq .wp-block-details > summary:hover { color: var(--wp--preset--color--brand); }
.sayru-faq .wp-block-details > summary:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand);
  outline-offset: 3px;
}
/* The plus turns into a minus: two bars, one of which rotates away. */
.sayru-faq .wp-block-details > summary::before,
.sayru-faq .wp-block-details > summary::after {
  content: "";
  position: absolute;
  right: .35rem;
  top: 1.65rem;
  width: 13px;
  height: 1.5px;
  background: var(--wp--preset--color--brand);
  transition: transform .22s var(--sayru-ease), opacity .22s var(--sayru-ease);
}
.sayru-faq .wp-block-details > summary::after { transform: rotate(90deg); }
.sayru-faq .wp-block-details[open] > summary::after { transform: rotate(0deg); opacity: 0; }
.sayru-faq .wp-block-details[open] > summary { color: var(--wp--preset--color--brand-deep); }
.sayru-faq .wp-block-details > :not(summary) {
  margin: 0 0 1.3rem;
  padding-right: 2.25rem;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--wp--preset--color--ink-soft);
}
@media (max-width: 820px) {
  .sayru-faq__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sayru-faq .wp-block-details > summary::before,
  .sayru-faq .wp-block-details > summary::after { transition: none; }
}

/* ---------- Accessibility ----------
   The brand green is the logo colour and stays the identity colour, but at
   4.22:1 on white it fails AA for text under 18px. A darker green is used
   wherever the green is carrying small text or a button label; large graphic
   uses keep the original. */
:root {
  --sayru-brand-text: #1B7236;
}

.sayru-skip {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 999;
  padding: .75rem 1.15rem;
  background: var(--wp--preset--color--paper);
  border: 2px solid var(--sayru-brand-text);
  border-radius: 3px;
  color: var(--sayru-brand-text);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
}
.sayru-skip:focus { top: 1rem; }
#sayru-main:focus { outline: none; }

/* These land before the component blocks further down the sheet, so each one
   is given the extra class it needs to still win the cascade. */
.sayru-eyebrow.sayru-eyebrow,
.sayru-crumbs a,
.sayru-rail__eyebrow.sayru-rail__eyebrow,
.sayru-creds .sayru-creds__head p,
.sayru-steps .sayru-step::before,
.sayru-fact em,
.sayru-next li::before { color: var(--sayru-brand-text); }

.wp-block-button__link,
.wp-element-button,
.sayru-rail__cta.sayru-rail__cta,
input.wpcf7-submit,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background-color: var(--sayru-brand-text);
}
.wp-block-button__link:hover,
.wp-element-button:hover,
input.wpcf7-submit:hover,
.sayru-rail__cta.sayru-rail__cta:hover { background-color: var(--wp--preset--color--brand-deep); }
.wp-block-button.is-style-outline .wp-block-button__link { background-color: transparent; }

.woocommerce nav.woocommerce-pagination ul li a { color: var(--sayru-brand-text); }
.woocommerce nav.woocommerce-pagination ul li span.current { border-color: var(--sayru-brand-text); }

/* A link inside running text must be distinguishable without colour. The dark
   bands are where this failed: pale link on a pale-on-dark paragraph. */
.sayru-cta p a,
.sayru-footer p a,
.sayru-footer li a,
.sayru-footer address a,
.sayru-rail__direct a,
.sayru-topbar a,
.woocommerce-Tabs-panel p a,
.sayru-story__close a,
.sayru-faq .wp-block-details > :not(summary) a {
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* Product cards are <article> now; the element must not change the grid. */
.woocommerce ul.products li.product > .sayru-card { display: contents; }

/* The catalogue FAQ is echoed by a template hook rather than rendered from
   blocks, so it needs the band treatment applied to the plain element. */
/* Full bleed without 100vw: that includes the scrollbar and pushed the page
   1688px wide inside a 1600px viewport. Pulling out by the container's own
   padding lands exactly on the edge instead. */
/* Full-bleed background without moving the box.
   Pulling the element out with negative margins meant guessing the container
   chain: on a product page that is main's 44px padding plus a 4px centring
   offset, so the band sat 4px short of the edge. Painting the background
   outwards instead leaves the box exactly where the page's own content sits,
   so the FAQ lines up with everything above it and nothing can overflow. */
.sayru-faq--bleed.sayru-faq--bleed {
  /* Doubled class: the full-bleed padding rule for .sayru-section is declared
     later in this file, so a single-class selector would lose to it. */
  margin-inline: 0;
  padding-inline: 0;
  margin-top: var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--mist);
  box-shadow: 0 0 0 100vmax var(--wp--preset--color--mist);
  clip-path: inset(0 -100vmax);
}
.sayru-faq--bleed > * {
  max-width: none;
  margin-inline: 0;
}
section.sayru-faq .sayru-sectionhead h2 { margin: 0; }
section.sayru-faq .sayru-faq__grid > details > p {
  margin: 0 0 1.3rem;
  padding-right: 2.25rem;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--wp--preset--color--ink-soft);
}

/* The archive head's two columns were sized for a page title plus a lede. A
   category description is shorter, so the title column kept width it never
   used and the gap read as a hole. */
.sayru-archive-head.sayru-pagehead {
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: 0 clamp(2rem, 4vw, 4rem);
  /* The page-head band aligns its two columns on the baseline, which works
     when the title column carries a lede. A listing header has only a title,
     so bottom alignment pushed the h1 down past a two-row facts rail. */
  align-items: start;
}
/* No measure cap: capping it left the rest of the column empty and the
   gap before the facts read as a hole. */
.sayru-archive-head.sayru-pagehead p:not(.sayru-fact) { max-width: none; }
.sayru-archive-head .sayru-lede { margin: .9rem 0 0; }

/* ---------- Catalogue floors ----------
   One band per category: the name, how deep the range is, a link into it, and
   the five newest products across a single row. */
.sayru-floors { display: grid; gap: var(--wp--preset--spacing--60); }
.sayru-floor { scroll-margin-top: 5rem; }
.sayru-floor__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1.1rem;
  padding-bottom: .9rem;
  margin-bottom: var(--wp--preset--spacing--30);
  border-bottom: 1px solid var(--sayru-line);
}
.sayru-floor__head h2 {
  margin: 0;
  font-size: var(--wp--preset--font-size--h-3);
  line-height: 1.15;
}
.sayru-floor__head h2 a { color: inherit; text-decoration: none; }
.sayru-floor__head h2 a:hover { color: var(--sayru-brand-text); }
.sayru-floor__count {
  margin: 0;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.sayru-floor__all {
  margin-left: auto;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: .875rem;
  color: var(--sayru-brand-text);
  text-decoration: none;
}
.sayru-floor__all:hover { text-decoration: underline; }
/* A literal arrow. Writing it as the CSS escape 92 in a Python string
   made  an octal escape, so the sheet shipped a control character. */
.sayru-floor__all::after { content: " →"; }
.woocommerce ul.products.sayru-floor__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
}
@media (max-width: 1200px) { .woocommerce ul.products.sayru-floor__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .woocommerce ul.products.sayru-floor__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .woocommerce ul.products.sayru-floor__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Product names in a listing are link labels, not headings. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: block;
}

/* ---------- Format grid with previews ----------
   Sixteen formats, eight across, each a link into its range. A hover preview
   of each format's newest products used to live under this grid; it was
   removed because hover does not exist on a phone. */
.sayru-formats__grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 1px;
  background: var(--sayru-line);
  border: 1px solid var(--sayru-line);
}
.sayru-format {
  background: var(--wp--preset--color--paper);
  padding: 1.6rem .75rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: background .18s var(--sayru-ease);
}
.sayru-format:hover,
.sayru-format:focus-visible { background: var(--wp--preset--color--brand-tint); }
.sayru-format__icon svg {
  width: 46px; height: 46px; display: block;
  stroke: var(--wp--preset--color--ink); fill: none; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.sayru-format:hover .sayru-format__icon svg { stroke: var(--sayru-brand-text); }
/* The material band reuses the format tiles, but five across rather than
   eight: fewer, wider cells suit names that run to three words. */
.sayru-materials__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Nine shapes, so a row of five and a row of four rather than a ragged eight. */
.sayru-styles__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* The row under the material tiles. The active tile is marked so the link
   between what the pointer is on and what is shown is visible without motion. */
.sayru-materials .sayru-format.is-current {
  background: var(--wp--preset--color--brand-tint);
  box-shadow: inset 0 -3px 0 var(--sayru-brand-text);
}
.sayru-materials .sayru-format.is-current .sayru-format__icon svg { stroke: var(--sayru-brand-text); }
.sayru-materials__panels { margin-top: 1.5rem; }
.sayru-matrow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem;
}
/* An explicit display beats the hidden attribute's own display:none, which is
   why all five rows were stacking instead of one showing at a time. */
.sayru-matrow[hidden] { display: none; }
.sayru-matcard { display: block; text-decoration: none; color: inherit; }
.sayru-matcard img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 10px; background: #fff;
}
.sayru-matcard span {
  display: block; margin-top: .6rem; font-size: .875rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sayru-matcard:hover span { color: var(--sayru-brand-text); text-decoration: underline; }
@media (max-width: 1100px) { .sayru-matrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sayru-matrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .sayru-styles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sayru-styles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sayru-styles .sayru-format { padding-inline: 1rem; }
@media (max-width: 1100px) { .sayru-materials__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sayru-materials__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sayru-materials .sayru-format { padding-inline: 1rem; }
.sayru-format__label {
  font-family: var(--wp--preset--font-family--display);
  font-size: .8125rem; font-weight: 600; line-height: 1.3;
}

@media (max-width: 1300px) { .sayru-formats__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .sayru-formats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .sayru-formats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The copy sits under the heading and spans the band. Its two paragraphs run
   side by side so the row is full width without any line reaching 200
   characters. */
.sayru-sectionhead--split { max-width: none; }
.sayru-sectionhead--split .sayru-sectionhead__title > * { margin-block: 0; }
.sayru-sectionhead--split .sayru-sectionhead__copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: 1.15rem;
  max-width: none;
}
.sayru-sectionhead--split .sayru-sectionhead__copy p { margin-block: 0; max-width: none; }
@media (max-width: 900px) {
  .sayru-sectionhead--split .sayru-sectionhead__copy { grid-template-columns: 1fr; gap: .9rem; }
}

/* The catalogue header carries no lede, so the band's page-sized top padding
   left an empty strip under the breadcrumb. */
.sayru-archive-head.sayru-pagehead.sayru-pagehead {
  /* Doubled class again: .sayru-pagehead's own padding is declared later. */
  padding-block: clamp(1.25rem, 2vw, 1.75rem) clamp(1.5rem, 2.5vw, 2.25rem);
}
/* The listing templates set padding-top:0 on main directly -- an inline style
   beats any rule here, which is why this is done in the template and not with
   a selector. The breadcrumb above already separates the header. */

/* These grids are lists now, for the count a screen reader announces. The
   markers and indent that come with a list are not wanted. */
.sayru-apps, .sayru-formats__grid { list-style: none; margin: 0; padding: 0; }
.sayru-apps > li, .sayru-formats__grid > li { display: contents; }

/* Sixteen categories in the footer: two columns of eight rather than one
   column that runs past the bottom of the block. */
.sayru-footer__products { grid-column: auto; }
.sayru-footer__cats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Same row gap as every other list in the footer, so the columns read as
     one block rather than two rhythms side by side. */
  gap: .55rem 2.25rem;
}
@media (max-width: 860px) {
}
@media (max-width: 520px) {
  .sayru-footer__products { grid-column: 1; }
}

/* The two other ways into the catalogue, offered above the floors. */
.sayru-crossnav {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--sayru-line);
}
.sayru-crossnav__group h2 { font-size: 1.0625rem; margin: 0 0 .35rem; }
.sayru-crossnav__group > p {
  margin: 0 0 1rem; font-size: .9375rem; line-height: 1.6;
  color: var(--wp--preset--color--muted);
}
.sayru-crossnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sayru-crossnav li a {
  display: flex; align-items: baseline; gap: .45rem;
  padding: .5rem .85rem; border-radius: 99px;
  border: 1px solid var(--sayru-line); background: var(--wp--preset--color--paper);
  text-decoration: none; color: inherit; font-size: .875rem; line-height: 1.3;
}
.sayru-crossnav li a:hover { border-color: var(--sayru-brand-text); color: var(--sayru-brand-text); }
.sayru-crossnav li a span {
  font-family: var(--wp--preset--font-family--mono); font-size: .625rem;
  color: var(--wp--preset--color--muted);
}
.sayru-crossnav li a:hover span { color: inherit; }
@media (max-width: 780px) { .sayru-crossnav { grid-template-columns: 1fr; } }

/* ---------- Category range copy ----------
   The prose column is capped at a readable measure, and the width that would
   otherwise sit empty beside it carries the specification panel, so the
   section fills the page without padding the sentences out. */
.sayru-catcopy__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.sayru-catcopy__main > :first-child { margin-top: 0; }
.sayru-catcopy__main > :last-child { margin-bottom: 0; }
.sayru-catcopy__main p { margin: 0 0 1.05rem; line-height: 1.72; }
.sayru-catcopy__main h3 {
  font-size: 1.1875rem; line-height: 1.3; margin: 2rem 0 .75rem;
  letter-spacing: -.01em;
}
.sayru-catcopy__main ul, .sayru-catcopy__main ol { margin: 0 0 1.15rem; padding-left: 1.2rem; }
.sayru-catcopy__main li { margin-bottom: .5rem; line-height: 1.65; }
.sayru-catcopy__main table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.3rem;
  font-size: .9375rem;
}
.sayru-catcopy__main caption {
  text-align: left; padding-bottom: .6rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp--preset--color--slate, #5C6B62);
}
.sayru-catcopy__main th, .sayru-catcopy__main td {
  text-align: left; padding: .6rem .85rem .6rem 0;
  border-bottom: 1px solid var(--wp--preset--color--line, #DCE3DE);
  vertical-align: top;
}
.sayru-catcopy__main thead th {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
}

.sayru-catcopy__aside {
  position: sticky; top: 1.5rem;
  background: var(--wp--preset--color--mist, #F2F6F3);
  border: 1px solid var(--wp--preset--color--line, #DCE3DE);
  border-radius: 12px; padding: 1.5rem 1.6rem;
}
.sayru-catcopy__aside h3 {
  margin: 0 0 1rem; font-size: .75rem; font-weight: 500;
  font-family: var(--wp--preset--font-family--mono);
  letter-spacing: .12em; text-transform: uppercase;
}
.sayru-catcopy__spec { width: 100%; border-collapse: collapse; font-size: .875rem; }
.sayru-catcopy__spec th, .sayru-catcopy__spec td {
  text-align: left; vertical-align: top; padding: .55rem 0; line-height: 1.55;
  border-top: 1px solid var(--wp--preset--color--line, #DCE3DE);
}
.sayru-catcopy__spec tr:first-child th, .sayru-catcopy__spec tr:first-child td { border-top: 0; padding-top: 0; }
.sayru-catcopy__spec th { width: 38%; padding-right: 1rem; font-weight: 600; }
.sayru-catcopy__spec td { color: var(--wp--preset--color--slate, #5C6B62); }

.sayru-catcopy__related { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--wp--preset--color--line, #DCE3DE); }
.sayru-catcopy__related h3 { margin: 0 0 .75rem; }
.sayru-catcopy__related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .9375rem; }
.sayru-catcopy__cta { margin: 1.35rem 0 0; }
.sayru-catcopy__cta a {
  display: inline-block; padding: .7rem 1.15rem; border-radius: 8px;
  background: var(--wp--preset--color--brand-text, #1B7236); color: #fff;
  text-decoration: none; font-weight: 600; font-size: .9375rem;
}
.sayru-catcopy__cta a:hover { background: var(--wp--preset--color--brand-dark, #0D3D1D); }

@media (max-width: 900px) {
  .sayru-catcopy__grid { grid-template-columns: 1fr; }
  .sayru-catcopy__aside { position: static; }
}

/* ---------- One range, six formats ---------- */
.sayru-family .sayru-sectionhead {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .75rem clamp(2rem, 4vw, 3.5rem); align-items: end;
}
.sayru-family .sayru-sectionhead > .sayru-eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.sayru-family .sayru-sectionhead > h2 { margin: 0; }
.sayru-family__lead { max-width: none; margin: 0; line-height: 1.7; }
@media (max-width: 860px) { .sayru-family .sayru-sectionhead { grid-template-columns: 1fr; } }
.sayru-family__figure { margin: 0; }
.sayru-family__figure img { display: block; width: 100%; height: auto; border-radius: 12px; }
/* The numbers are printed on the photograph, so the key sits directly under it
   and reads left to right in the same order the packs stand. */
.sayru-family__key {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem; list-style: none; margin: 1.5rem 0 0; padding: 0;
}
.sayru-family__key a {
  display: flex; align-items: baseline; gap: .55rem;
  text-decoration: none; color: inherit; font-size: .9375rem; line-height: 1.4;
  padding-top: .85rem; border-top: 2px solid var(--wp--preset--color--line, #DCE3DE);
}
.sayru-family__key a:hover { border-top-color: var(--wp--preset--color--brand-text, #1B7236); }
.sayru-family__key a:hover .sayru-family__no { background: var(--wp--preset--color--brand-text, #1B7236); color: #fff; }
.sayru-family__no {
  flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: var(--wp--preset--color--ink, #10231A); color: #fff;
  font-family: var(--wp--preset--font-family--mono); font-size: .75rem;
  transition: background .15s ease;
}
@media (max-width: 900px) { .sayru-family__key { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sayru-family__key { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Everything under one roof ---------- */
/* Same section padding and width as its neighbours, so the band reads as one
   of the page's sections rather than as an insert. The photograph fills its
   column at its own resolution instead of being stretched across the page. */
.sayru-inhouse__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem); align-items: stretch;
}
.sayru-section > .sayru-inhouse__grid { max-width: none !important; }
.sayru-inhouse__panel {
  background: var(--wp--preset--color--brand-dark, #0D3D1D); color: #E4EDE8;
  border-radius: 14px; padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex; flex-direction: column;
}
.sayru-inhouse__panel h2 { color: #fff; margin: .5rem 0 1rem; }
.sayru-inhouse__panel .sayru-eyebrow { color: #9FD3BF; }
.sayru-inhouse__panel p { line-height: 1.7; margin: 0; }
.sayru-inhouse__steps {
  list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .6rem;
  font-size: .9375rem;
}
.sayru-inhouse__steps li { padding-left: 1.5rem; position: relative; line-height: 1.5; }
.sayru-inhouse__steps li::before { content: "→"; position: absolute; left: 0; color: #9FD3BF; }
/* Written against the panel so it outranks the panel's own p { margin: 0 },
   which was cancelling the auto margin and leaving the button mid-panel. */
.sayru-inhouse__panel .sayru-inhouse__cta { display: flex; margin-top: auto; padding-top: 1.75rem; }
.sayru-inhouse__cta a {
  display: inline-block; padding: .7rem 1.2rem; border-radius: 8px;
  background: #fff; color: var(--wp--preset--color--brand-dark, #0D3D1D);
  text-decoration: none; font-weight: 600; font-size: .9375rem;
}
.sayru-inhouse__cta a:hover { background: #9FD3BF; }
/* width is set so a figure stretched to the panel height cannot derive its
   width from the aspect ratio: it did, at 899px in a 690px column. */
.sayru-inhouse__figure { width: 100%; min-width: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; }
.sayru-inhouse__figure picture { display: block; height: 100%; }
.sayru-inhouse__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .sayru-inhouse__grid { grid-template-columns: 1fr; }
  .sayru-inhouse__figure { aspect-ratio: 16 / 9; }
}

/* ---------- The people who make it ---------- */
.sayru-team__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem); list-style: none; margin: 0; padding: 0;
}
.sayru-team__card img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  aspect-ratio: 460 / 560; object-fit: cover;
}
.sayru-team__role {
  margin: 1rem 0 .35rem; font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wp--preset--color--brand-text, #1B7236);
}
.sayru-team__card h3 { margin: 0 0 .5rem; font-size: 1.1875rem; line-height: 1.3; }
.sayru-team__card p { margin: 0; line-height: 1.65; font-size: .9375rem; }
.sayru-team__hall { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.sayru-team__hall img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  aspect-ratio: 2.2; object-fit: cover; object-position: center 46%;
}
.sayru-team__hall figcaption {
  margin-top: .75rem; font-size: .8125rem; line-height: 1.55;
  color: var(--wp--preset--color--slate, #5C6B62);
}
@media (max-width: 780px) { .sayru-team__grid { grid-template-columns: 1fr; } }

/* ---------- How we handle an enquiry ---------- */
.sayru-creed {
  background: var(--wp--preset--color--ink, #10231A); color: #E4EDE8;
  padding-block: clamp(3rem, 6vw, 5rem);
  padding-inline: max(calc((100% - var(--wp--style--global--wide-size)) / 2), var(--wp--style--root--padding-left, 1rem));
}
.sayru-creed__inner { max-width: 44rem; margin-inline: auto; text-align: center; position: relative; }
.sayru-creed blockquote { margin: 0; }
.sayru-creed blockquote p {
  margin: 0; color: #fff;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.45; letter-spacing: -.01em;
  text-wrap: balance;
}
.sayru-creed__inner::before {
  content: "\201C"; display: block; line-height: .8; margin-bottom: .35rem;
  font-family: var(--wp--preset--font-family--display);
  font-size: 4rem; color: rgba(159, 211, 191, .45);
}
.sayru-creed__by {
  margin: 1.5rem 0 0; font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7;
}

/* ---------- Ordering walkthrough ---------- */
.sayru-walkthrough__block { margin-top: clamp(2rem, 3.5vw, 2.75rem); }
.sayru-walkthrough__block h3 { margin: 0 0 .5rem; font-size: 1.1875rem; }
.sayru-walkthrough__block > p { margin: 0 0 1.1rem; max-width: 68ch; line-height: 1.7; }
.sayru-section > .sayru-walkthrough__block { max-width: none !important; }
.sayru-walkthrough__chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.sayru-walkthrough__chips a {
  display: block; padding: .55rem 1rem; border-radius: 99px;
  border: 1px solid var(--wp--preset--color--line, #DCE3DE);
  background: #fff; text-decoration: none; color: inherit; font-size: .9375rem;
}
.sayru-walkthrough__chips a:hover {
  border-color: var(--wp--preset--color--brand-text, #1B7236);
  color: var(--wp--preset--color--brand-text, #1B7236);
}
.sayru-walkthrough__shapes {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1rem; list-style: none; margin: 0; padding: 0;
}
.sayru-walkthrough__shapes a {
  display: grid; gap: .6rem; justify-items: center; text-align: center;
  padding: 1.15rem .5rem; border-radius: 10px;
  border: 1px solid var(--wp--preset--color--line, #DCE3DE);
  background: #fff; text-decoration: none; color: inherit; font-size: .8125rem;
}
.sayru-walkthrough__shapes a:hover { border-color: var(--wp--preset--color--brand-text, #1B7236); }
.sayru-walkthrough__shapes svg {
  width: 40px; height: 40px; fill: none;
  stroke: var(--wp--preset--color--brand-text, #1B7236); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.sayru-walkthrough__times {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin: 0; background: var(--wp--preset--color--line, #DCE3DE);
  border: 1px solid var(--wp--preset--color--line, #DCE3DE); border-radius: 10px; overflow: hidden;
}
.sayru-walkthrough__times > div { background: #fff; padding: 1.15rem 1.25rem; }
.sayru-walkthrough__times dt {
  font-family: var(--wp--preset--font-family--mono); font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp--preset--color--slate, #5C6B62); margin-bottom: .4rem;
}
.sayru-walkthrough__times dd { margin: 0; font-weight: 600; line-height: 1.45; }
@media (max-width: 900px) {
  .sayru-walkthrough__shapes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sayru-walkthrough__times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .sayru-walkthrough__shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Artwork journey ---------- */
.sayru-journey__grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem); list-style: none; margin: 0; padding: 0; counter-reset: none;
}
.sayru-section > .sayru-journey__grid { max-width: none !important; }
.sayru-journey__step { position: relative; }
.sayru-journey__no {
  display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%;
  background: var(--wp--preset--color--ink, #10231A); color: #fff;
  font-family: var(--wp--preset--font-family--mono); font-size: .75rem; margin-bottom: .85rem;
}
.sayru-journey__art {
  display: block; width: 100%; height: auto; background: #fff; border-radius: 10px;
  border: 1px solid var(--wp--preset--color--line, #DCE3DE);
  fill: none; stroke: #3E5C4B; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sayru-journey__art .is-fill { fill: #C7DED0; stroke: #3E5C4B; }
.sayru-journey__step h3 { margin: .9rem 0 .4rem; font-size: 1.0625rem; line-height: 1.3; }
.sayru-journey__step p { margin: 0; font-size: .875rem; line-height: 1.6; }
@media (max-width: 1000px) { .sayru-journey__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sayru-journey__grid { grid-template-columns: 1fr; } }

/* ---------- Gravure press schematic ---------- */
.sayru-press__figure { margin: 0; }
.sayru-press__svg {
  display: block; width: 100%; height: auto;
  background: var(--wp--preset--color--mist, #F2F6F3);
  border: 1px solid var(--wp--preset--color--line, #DCE3DE); border-radius: 12px;
  padding: 1rem 0;
  fill: none; stroke: #3E5C4B; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sayru-press__web { stroke: var(--wp--preset--color--brand-text, #1B7236); stroke-width: 2.5; }
.sayru-press__air { stroke: #9BB3A5; stroke-width: 1.5; stroke-dasharray: 3 4; }
.sayru-press__reel { fill: #fff; }
.sayru-press__station circle { fill: #fff; }
.sayru-press__no, .sayru-press__label {
  stroke: none; fill: #3E5C4B; font-family: monospace; font-size: 15px;
}
.sayru-press__label { font-size: 16px; }
.sayru-press__figure figcaption {
  margin-top: .85rem; font-size: .8125rem; line-height: 1.6;
  color: var(--wp--preset--color--slate, #5C6B62); max-width: 82ch;
}
.sayru-press__table { margin-top: clamp(2rem, 4vw, 3rem); }
.sayru-section > .sayru-press__table, .sayru-section > .sayru-press__figure { max-width: none !important; }
.sayru-press__table h3 { margin: 0 0 1rem; font-size: 1.1875rem; }
.sayru-press__table table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.sayru-press__table th, .sayru-press__table td {
  text-align: left; padding: .8rem 1rem .8rem 0; vertical-align: top;
  border-bottom: 1px solid var(--wp--preset--color--line, #DCE3DE); line-height: 1.55;
}
.sayru-press__table thead th {
  font-family: var(--wp--preset--font-family--mono); font-weight: 500;
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
}
.sayru-press__table tbody th { width: 24%; font-weight: 600; }
@media (max-width: 700px) { .sayru-press__table table, .sayru-press__table tbody, .sayru-press__table tr, .sayru-press__table th, .sayru-press__table td { display: block; width: auto; } .sayru-press__table thead { display: none; } .sayru-press__table tbody th { border-bottom: 0; padding-bottom: .2rem; } }

/* ---------- Topic pages ---------- */
.sayru-flowtable { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.sayru-flowtable caption {
  text-align: left; padding-bottom: .75rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp--preset--color--slate, #5C6B62);
}
.sayru-flowtable th, .sayru-flowtable td {
  text-align: left; vertical-align: top; padding: .8rem 1.25rem .8rem 0;
  border-bottom: 1px solid var(--wp--preset--color--line, #DCE3DE); line-height: 1.55;
}
.sayru-flowtable thead th {
  font-family: var(--wp--preset--font-family--mono); font-weight: 500;
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
}
.sayru-flowtable tbody th { width: 15%; font-weight: 600; white-space: nowrap; }
.sayru-flownote { margin: 1.25rem 0 0; max-width: 78ch; line-height: 1.7; }
@media (max-width: 780px) {
  .sayru-flowtable, .sayru-flowtable tbody, .sayru-flowtable tr,
  .sayru-flowtable th, .sayru-flowtable td { display: block; width: auto; }
  .sayru-flowtable thead { display: none; }
  .sayru-flowtable tbody th { border-bottom: 0; padding-bottom: .2rem; white-space: normal; }
}

.sayru-artcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.sayru-artcols h3 { margin: 0 0 .75rem; font-size: 1.0625rem; }
.sayru-artcols ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .55rem; }
.sayru-artcols li { line-height: 1.6; font-size: .9375rem; }
@media (max-width: 860px) { .sayru-artcols { grid-template-columns: 1fr; } }

.sayru-crossover { margin: 0 0 1.25rem; padding-left: 1.15rem; display: grid; gap: .7rem; }
.sayru-crossover li { line-height: 1.65; }

.sayru-crosslink {
  margin: 0; padding: 1.15rem 1.4rem; border-radius: 10px;
  background: var(--wp--preset--color--mist, #F2F6F3);
  border: 1px solid var(--wp--preset--color--line, #DCE3DE); line-height: 1.6;
}
.sayru-crosslink a { font-weight: 600; }

/* ---------- Product selling points ---------- */
/* One column, because the panel that used to sit beside it repeated the
   breadcrumb and the specification table. Running text is held near 68
   characters: full width across a desktop is what made this section hard to
   read, since the eye loses the line it is on when it travels that far back. */
.sayru-prodcopy__body { display: block; }
.sayru-section > .sayru-prodcopy__body { max-width: none !important; }
.sayru-prodcopy__main {
  /* Width is set by the grid on the product page; nothing to cap here. */
  max-width: none;
}
.sayru-prodcopy__main > :first-child { margin-top: 0; }
.sayru-prodcopy__main p { margin: 0 0 1.15rem; line-height: 1.75; }
/* Enough space above a subheading that it groups with the text it introduces
   rather than floating between two blocks. */
.sayru-prodcopy__main h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  margin: 2.5rem 0 .85rem;
}
.sayru-prodcopy__main ul { margin: 0 0 1.25rem; padding-left: 1.2rem; }
.sayru-prodcopy__main li { margin-bottom: .7rem; line-height: 1.7; }
.sayru-prodcopy__main li:last-child { margin-bottom: 0; }

/* ---------- Top picks ---------- */
/* The placeholder now renders inside a full-width group, so the section's
   own full-bleed padding lines the content up with the rest of the page. */
.sayru-picks { background: var(--wp--preset--color--ink); color: #EAF1EC; }
.sayru-picks__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; margin-bottom: var(--wp--preset--spacing--40); }
.sayru-picks__head h2 { margin: 0; color: #fff; }
.sayru-picks__head p { margin: 0; color: #A9BDB1; font-size: .9375rem; }
.sayru-picks__more { margin-left: auto; color: #9FD3BF; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.sayru-picks__more::after { content: " →"; }
.sayru-picks__more:hover { text-decoration: underline; }
/* One row that scrolls, rather than two rows that wrap. The viewport is the
   scrolling box; the arrows sit outside it in the band's own side padding,
   which is the space the grid was leaving empty anyway. */
.sayru-picks__scroller { position: relative; }
.sayru-picks__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: -0.25rem;
  padding-inline: 0.25rem;
}
.sayru-picks__viewport::-webkit-scrollbar { display: none; }
.sayru-picks__viewport:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 4px; }
.sayru-picks__grid {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 1.25rem;
}
.sayru-picks__grid > li {
  flex: 0 0 calc((100% - 5rem) / 5);
  scroll-snap-align: start;
}
.sayru-picks__arrow {
  position: absolute; top: calc((100% - 3.5rem) / 2); transform: translateY(-50%);
  width: 4rem; height: 4rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4); background: rgba(16, 35, 26, .92);
  cursor: pointer; z-index: 2; padding: 0;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.sayru-picks__arrow::before {
  content: ""; display: block; width: .95rem; height: .95rem; margin: 0 auto;
  border-top: 3px solid #fff; border-right: 3px solid #fff;
}
.sayru-picks__arrow.is-prev { left: -4.75rem; }
.sayru-picks__arrow.is-next { right: -4.75rem; }
.sayru-picks__arrow.is-prev::before { transform: translateX(3px) rotate(-135deg); }
.sayru-picks__arrow.is-next::before { transform: translateX(-3px) rotate(45deg); }
.sayru-picks__arrow:hover:not(:disabled) {
  background: var(--wp--preset--color--brand); border-color: transparent;
  transform: translateY(-50%) scale(1.06);
}
.sayru-picks__arrow:disabled { opacity: .28; cursor: default; }
/* Once the band's own side padding is not wide enough to hold them, the
   arrows sit over the first and last card rather than off the page. */
@media (max-width: 1720px) {
  .sayru-picks__arrow.is-prev { left: -1rem; }
  .sayru-picks__arrow.is-next { right: -1rem; }
}
@media (max-width: 1100px) { .sayru-picks__grid > li { flex-basis: calc((100% - 2.5rem) / 3); } }
@media (max-width: 780px) {
  /* One card at a time, swiped. The arrows would be a smaller tap target than
     the swipe they replace, so they go. */
  .sayru-picks__grid > li { flex-basis: 100%; }
  .sayru-picks__arrow { display: none; }
}
.sayru-pick { display: block; text-decoration: none; color: inherit; }
.sayru-pick img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: #fff; display: block; }
.sayru-pick__range { display: block; margin-top: .6rem; font-family: var(--wp--preset--font-family--mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: #9FD3BF; }
.sayru-pick__name { display: block; margin-top: .2rem; font-size: .9375rem; line-height: 1.45; color: #EAF1EC; min-height: 2.9em; }
.sayru-pick:hover .sayru-pick__name { color: #fff; text-decoration: underline; }
@media (max-width: 1200px) { .sayru-picks__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .sayru-picks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .sayru-picks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Facts band over a photograph ---------- */
.sayru-band { background-size: cover; background-position: center; color: #fff; }
.sayru-band__inner {
  max-width: var(--wp--style--global--wide-size); margin-inline: auto;
  padding: clamp(3rem, 6vw, 5rem) var(--wp--style--root--padding-right, 1rem)
           clamp(3rem, 6vw, 5rem) var(--wp--style--root--padding-left, 1rem);
}
.sayru-band__lead { margin: 0 0 1.75rem; font-size: 1.0625rem; line-height: 1.75; max-width: 72ch; color: #EAF1EC; }
.sayru-band__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.sayru-fact-pill {
  padding: .5rem .95rem; border-radius: 999px; font-size: .875rem;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #EAF1EC;
}
.sayru-fact-pill.is-key { background: rgba(255,255,255,.92); color: var(--wp--preset--color--brand-deep); font-weight: 600; border-color: transparent; }
.sayru-fact-pill.is-key::after { content: " ✓"; }

/* ---------- Service promises ---------- */
.sayru-services__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 5vw, 4rem); }
.sayru-service { display: flex; gap: 1.15rem; align-items: flex-start; }
.sayru-service__icon svg { width: 40px; height: 40px; flex: 0 0 40px; stroke: var(--sayru-brand-text); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sayru-service h3 { margin: 0 0 .35rem; font-size: 1.0625rem; }
.sayru-service p { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--wp--preset--color--muted); }
@media (max-width: 780px) { .sayru-services__grid { grid-template-columns: 1fr; } }

/* These three bands are echoed straight into a full-width wrapper, so they do
   not sit inside the padded entry-content the .sayru-section padding formula
   assumes. That formula then adds the root padding a second time and pushed
   them 44px in from every other section. Here the inset is stated directly:
   centre the content column, but never closer to the edge than the page's own
   gutter. */
.wp-block-group.alignfull:has(> .sayru-picks),
.wp-block-group.alignfull:has(> .sayru-services),
.wp-block-group.alignfull:has(> .sayru-band) { padding-inline: 0; }

/* Every section echoed into a full-width wrapper needs the same correction,
   not just the first three that hit it. Without this they sit 44px in from
   the sections above and below, which reads as a narrower column rather than
   as a deliberate inset. */
.sayru-picks.sayru-picks,
.sayru-services.sayru-services,
.sayru-family.sayru-family,
.sayru-inhouse.sayru-inhouse,
.sayru-team.sayru-team,
.sayru-walkthrough.sayru-walkthrough,
.sayru-journey.sayru-journey,
.sayru-press.sayru-press,
.sayru-catcopy.sayru-catcopy {
  padding-inline: max(
    calc((100% - var(--wp--style--global--wide-size)) / 2),
    var(--wp--style--root--padding-left, 1rem)
  );
}

/* ---------- Utility ---------- */
.sayru-lede {
  /* No max-width here on purpose. A narrower box inside a constrained layout
     gets auto-centred by WordPress, and forcing the margin to zero instead
     threw it to the far left of the wide container. The content width is
     already a sensible measure, so let the layout govern. */
  font-size: var(--wp--preset--font-size--lead);
  color: var(--wp--preset--color--ink-soft);
}
.sayru-rule { border: none; border-top: 1px solid var(--sayru-line); margin-block: var(--wp--preset--spacing--50); }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---------- Enquiry form ----------
   The only conversion point on the site. It was rendering as raw browser
   defaults while everything around it was designed, which reads as neglect
   exactly where a buyer is deciding whether to trust the company.          */

.wpcf7 { max-width: none; }
.wpcf7-form p { margin: 0 0 1.15rem; }
.wpcf7-form label {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
  color: var(--wp--preset--color--ink-soft); margin-bottom: .35rem;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: .9375rem; color: var(--wp--preset--color--ink);
  background: #fff;
  border: 1px solid var(--sayru-line); border-radius: 3px;
  padding: .68rem .85rem; margin-top: .3rem;
  transition: border-color .15s var(--sayru-ease), box-shadow .15s var(--sayru-ease);
}
.wpcf7-form textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.wpcf7-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23647368' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 11px;
  padding-right: 2.4rem;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--brand);
  box-shadow: 0 0 0 3px var(--wp--preset--color--brand-tint);
}
.wpcf7-form input[type="submit"] {
  font-family: var(--wp--preset--font-family--display);
  font-size: .9375rem; font-weight: 600; letter-spacing: .01em;
  background: var(--sayru-brand-text); color: #fff;
  border: none; border-radius: 3px; padding: .85em 2.4em; cursor: pointer;
  transition: background .15s var(--sayru-ease);
}
.wpcf7-form input[type="submit"]:hover { background: var(--wp--preset--color--brand-deep); }
.wpcf7-not-valid-tip { font-size: .8125rem; color: var(--wp--preset--color--amber); margin-top: .3rem; }
.wpcf7 form .wpcf7-response-output {
  margin: 1.25rem 0 0; padding: .85rem 1rem; border-radius: 3px;
  border: 1px solid var(--sayru-line); border-left: 3px solid var(--wp--preset--color--brand);
  background: var(--wp--preset--color--mist); font-size: .9rem;
}

/* Two-up on the short fields so the form does not read as an endless column. */
@media (min-width: 700px) {
  .sayru-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
  .sayru-form-grid .sayru-form-wide { grid-column: 1 / -1; }
}

/* ---------- Credentials band ----------
   Fifteen active certifications is the strongest single proof this company
   has. Shown as a row of small faded logos it read as decoration; shown as a
   plate of named marks it reads as an audit trail.                         */

.sayru-creds { background: var(--wp--preset--color--mist); }
.sayru-creds__head { margin-bottom: var(--wp--preset--spacing--40); }
.sayru-creds__head p {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wp--preset--color--brand); margin: 0 0 .5rem;
}
.sayru-creds__head h2 { font-size: var(--wp--preset--font-size--h-3); margin: 0 0 .5rem; }
.sayru-creds__head span {
  /* No 62ch cap: the line is short enough to sit on one row across the band,
     and capping it left two thirds of the row empty. */
  display: block; color: var(--wp--preset--color--muted);
  font-size: .9375rem; max-width: none; margin: 0;
}
.sayru-certs {
  /* Sixteen marks: eight across fills two complete rows with no gaps. */
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 1px; background: var(--sayru-line);
  border: 1px solid var(--sayru-line); border-radius: 3px; overflow: hidden;
}
@media (max-width: 1400px) { .sayru-certs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .sayru-certs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .sayru-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sayru-certs figure {
  margin: 0; background: #fff; padding: 1.35rem .75rem 1.1rem;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  min-height: 148px; justify-content: center;
}
.sayru-certs img {
  /* 42px marks floated in a 300px cell and read as thumbnails of a logo rather
     than as the certification itself. */
  height: 58px; width: auto; max-width: 84%; object-fit: contain;
  opacity: 1; filter: none;
}
.sayru-certs figcaption {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .65rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--wp--preset--color--muted); text-align: center; line-height: 1.35;
}

/* ---------- Typographic polish ---------- */
.sayru-sectionhead h2 { margin-bottom: .55rem; }
.sayru-section > .wp-block-group + .wp-block-group { margin-top: 0; }
h2 + p, h3 + p { margin-top: .5rem; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 3.2em; }

/* Specification block heading (the table itself is styled below). */
.sayru-spec { margin-top: var(--wp--preset--spacing--30); }
.sayru-spec__title {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp--preset--color--muted); margin: 0 0 .7rem; font-weight: 500;
}

/* ---------- One column width for the whole site ----------
   Sections were mixing two widths: some laid out at the content measure and
   centred, others at the wide measure. That is what produced the "some pages
   wide, some narrow, big gaps at the sides" reading.

   Every section is now a single centred column at the wide measure, and every
   child aligns to its left edge. Running text keeps a readable line length of
   its own, but stays on that same left edge instead of being re-centred.     */

/* One column width for the whole site.

   Grid item alignment turned out to be too easy for other rules to fight, so
   the column is made with padding instead: the section stays a normal block at
   full width, and symmetric padding pulls its content onto the wide measure.
   Children then start at the padding edge with nothing to override.          */

/* Full-bleed sections are pulled out to the viewport edge with negative
   margins, so their percentage basis is the inner column, not the window.
   Adding the root padding back gives the exact wide-column edge without
   resorting to 100vw, which would count the scrollbar and overflow. */
.sayru-section {
  padding-inline: max(
    calc(
      (100% - var(--wp--style--global--wide-size)) / 2
      + var(--wp--style--root--padding-left, 0px)
    ),
    clamp(1rem, 3vw, 2.75rem)
  );
}
/* The archive header already sits at the wide measure; it needs no inset. */
.sayru-archive-head { padding-inline: 0; }

/* Nor does anything else printed into the archive wrapper. That wrapper is
   already the site's main width, so the inset formula on .sayru-section and
   .sayru-catcopy adds the root padding a second time and sets their contents
   44px inside the product grid and the header above them. The archive head and
   the FAQ were corrected one at a time; this covers the rest and anything
   added later. */
.sayru-woo-content > .sayru-section,
.sayru-woo-content > .sayru-catcopy.sayru-catcopy {
  padding-inline: 0;
}
.sayru-section > *,
.sayru-archive-head > * {
  max-width: none !important;
  margin-inline: 0 !important;
}
/* Reading measure, left-aligned on that same edge. */
.sayru-section > p,
.sayru-section > ul,
.sayru-section > ol,
.sayru-section > .sayru-lede,
.sayru-archive-head > p {
  max-width: 78ch !important;
}
.sayru-section > .wp-block-heading { max-width: 34ch !important; }

/* Nested groups already carry alignwide; stop them being constrained twice. */
.sayru-section > .wp-block-group { max-width: none; width: 100%; }

/* ---------- Product page ----------
   The gallery and the specification share the top row. Everything printed
   after them is a band across the full width, stacked in the order it is
   printed.

   This used to be a list of named grid areas, one per section, which meant any
   section without a name of its own was auto-placed into whichever column
   happened to be free. That is how the selling points ended up sitting beside
   the related packs with a void above both of them, and how the reading order
   stopped matching the order the sections are written in. Spanning every child
   by default and pulling back only the two that share the top row cannot come
   apart the same way when a section is added.                                */

.woocommerce div.product {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  column-gap: 3rem;
  row-gap: 0;
  align-items: start;
}
.woocommerce div.product > * { grid-column: 1 / -1; }
.woocommerce div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
.woocommerce div.product > .summary { grid-column: 2; grid-row: 1; }

/* The bands set their own vertical rhythm, so the grid adds none between them
   and the top row keeps a gap of its own. */
.woocommerce div.product > .woocommerce-product-gallery,
.woocommerce div.product > .summary { margin-bottom: var(--wp--preset--spacing--50); }

/* Every band gets the same vertical room, so the page keeps one rhythm rather
   than each section setting its own. */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .sayru-near {
  padding-block: var(--wp--preset--spacing--60);
}
/* The call to action is a bar, not a chapter: the room a reading band needs
   above and below it left this one floating in the middle of an empty strip. */
.woocommerce div.product > .sayru-rail {
  padding-block: var(--wp--preset--spacing--40);
}

/* The four points sit side by side across the band. Set as one flowing column
   they came to about a third of the width with the rest of the section empty;
   as blocks they fill it, and each lands at a width that still reads. */
/* Inside the description tab the panel is already at the main width, so the
   section adds no inset of its own and lines up with the prose above it. */
.woocommerce div.product .sayru-prodcopy.sayru-section {
  padding-inline: 0;
  padding-block: var(--wp--preset--spacing--30) 0;
  border-top: 0;
}
.woocommerce div.product .sayru-prodcopy__main {
  /* auto-fit rather than a fixed count: with the two duplicated points now
     left to the shared block, a three-column rule left the last one empty.
     The tracks that have nothing in them collapse and the rest stretch, so
     however many points a product yields they fill the row. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); /* min(): a phone is narrower than 24rem */
  gap: clamp(1.75rem, 3vw, 3rem);
  align-items: start;
  max-width: none;
}
.woocommerce div.product .sayru-prodcopy__block {
  break-inside: avoid;
}
.woocommerce div.product .sayru-prodcopy__block > :first-child { margin-top: 0; }
.woocommerce div.product .sayru-prodcopy__block > :last-child { margin-bottom: 0; }
/* These blocks sit in the same panel as the shared ones below them, so they
   take the same heading size and the same plain treatment. A rule over two of
   the six read as a difference in kind that is not there. */
.woocommerce div.product .sayru-prodcopy__block h3 {
  margin-top: 0;
  font-size: 1.25rem;
  line-height: 1.15;
}

/* Two accent bands, not five: the call to action after the specification, and
   the questions after the reading. Content, accent, content, accent, content
   gives the page a shape without striping it. The ground is painted past the
   element with a spread shadow rather than a 100vw width, which would count
   the scrollbar and push the page sideways. */
.woocommerce div.product > .sayru-rail {
  background: var(--wp--preset--color--mist);
  box-shadow: 0 0 0 100vmax var(--wp--preset--color--mist);
  clip-path: inset(0 -100vmax);
}


/* ---------- One spine for everything below the gallery ----------
   The bands were as wide as the page, so a paragraph ran to about a hundred
   and eighty characters and the eye lost its place returning to the next line,
   while a heading spanned the full width above a column of text a third as
   wide. Giving every band the same centred column and every run of text the
   same measure inside it is what makes the page read as one document rather
   than a stack of unrelated blocks.                                          */

.woocommerce div.product {
  /* The site has one main width, set in theme.json, and the product page uses
     it like every other page. An invented value here made this page the only
     one whose content sat on a different edge to the header above it. */
  --sayru-main: var(--wp--style--global--wide-size);
  --sayru-read: 72ch;
}

/* The bands take their inset from one place here, so .sayru-section's own
   padding is switched off rather than competing with it -- the two together
   were what produced three different left edges down one page. */
.woocommerce div.product > .sayru-faq,
.woocommerce div.product > .sayru-near {
  padding-inline: 0;
}

/* One column, one left edge, one width, for every band. The !important is
   answering .sayru-section's own !important reset, which is declared for the
   full-bleed sections elsewhere in this file. */
.woocommerce div.product > .sayru-rail > *,
.woocommerce div.product > .woocommerce-tabs > *,
.woocommerce div.product > .sayru-near > *,
.woocommerce div.product > .sayru-faq > * {
  max-width: var(--sayru-main) !important;
  margin-inline: auto !important;
  width: auto;
}

/* The band already carries the tinted ground, so the card inside it needs no
   inset, border or shadow of its own -- with content-box sizing that inset put
   its edges 36px outside every other band on the page.

   Two columns, not three: the middle one held a list of facts that the
   specification table above states in full, and once that came out the grid
   was still reserving room for it. */
.woocommerce div.product > .sayru-rail > .sayru-rail__inner {
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-inline: 0;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  position: static;
}
.woocommerce div.product .sayru-rail__lead { font-size: 1rem; max-width: 46ch; }

@media (max-width: 860px) {
  .woocommerce div.product > .sayru-rail > .sayru-rail__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The description opens with prose and continues in two-up blocks. Capping the
   prose at a reading measure left it against the left edge with two thirds of
   the band empty beside it, so it runs in the same two columns as the blocks
   that follow and the whole panel keeps one rhythm. */
.woocommerce div.product .woocommerce-Tabs-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 3.5rem);
  /* One gap between rows, set here. The blocks each carried their own bottom
     margin, so where two met the space doubled and the panel drifted apart
     towards the end. */
  row-gap: var(--wp--preset--spacing--40);
  align-items: start;
}
.woocommerce div.product .woocommerce-Tabs-panel > * {
  margin-block: 0;
}
/* .sayru-detail__pair sets its own vertical margin with !important, from when
   these blocks stacked in normal flow. Beside the panel's row gap it doubled
   the space, and the panel drifted further apart the further down it went. */
.woocommerce div.product .woocommerce-Tabs-panel > .sayru-detail__pair {
  margin-block: 0 !important;
}
.woocommerce div.product .woocommerce-Tabs-panel > * {
  grid-column: 1 / -1;
}
/* A separator has no width of its own, so as a grid item it collapsed to nothing. */
.woocommerce div.product .woocommerce-Tabs-panel > hr {
  width: 100%;
  justify-self: stretch;
}
.woocommerce div.product .woocommerce-Tabs-panel > p {
  grid-column: auto;
  max-width: none;
}
.woocommerce div.product .sayru-sectionhead > p {
  max-width: var(--sayru-read);
}

@media (max-width: 860px) {
  .woocommerce div.product .woocommerce-Tabs-panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A heading that spans further than the text under it reads as a banner rather
   than as the title of what follows. */
.woocommerce div.product .sayru-sectionhead > h2,
.woocommerce div.product .woocommerce-Tabs-panel > h2,
.woocommerce div.product .woocommerce-Tabs-panel > h3 {
  max-width: 30ch;
}

/* Inside the description the two-up blocks now sit on a narrower column, so
   the difference in their heights stops reading as a hole in the page. */
.woocommerce div.product .woocommerce-Tabs-panel .wp-block-columns {
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.woocommerce div.product .woocommerce-Tabs-panel .wp-block-column > :first-child {
  margin-top: 0;
}

@media (max-width: 860px) {
  .woocommerce div.product .woocommerce-Tabs-panel .wp-block-columns {
    flex-wrap: wrap;
  }
}

.sayru-rail__inner { position: static; }

/* ---------- Specification, two rows across ---------- */
.woocommerce table.shop_attributes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2px;
  border: 1px solid var(--sayru-line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--sayru-line);
}
.woocommerce table.shop_attributes tbody { display: contents; }
.woocommerce table.shop_attributes tr {
  display: grid;
  grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
  background: #fff;
  border: none;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
  border: none;
  border-bottom: 1px solid var(--sayru-line);
  padding: .6rem .9rem;
  font-size: .875rem;
  line-height: 1.55;
  font-style: normal;
  display: flex;
  align-items: center;
}
.woocommerce table.shop_attributes th {
  width: auto;
  background: var(--wp--preset--color--mist);
  font-weight: 500;
  color: var(--wp--preset--color--ink-soft);
}
.woocommerce table.shop_attributes tr:last-child th,
.woocommerce table.shop_attributes tr:last-child td,
.woocommerce table.shop_attributes tr:nth-last-child(2):nth-child(odd) th,
.woocommerce table.shop_attributes tr:nth-last-child(2):nth-child(odd) td {
  border-bottom: none;
}

@media (max-width: 1024px) {
  .woocommerce table.shop_attributes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .woocommerce div.product {
    grid-template-columns: minmax(0, 1fr);
  }
  .woocommerce div.product > .woocommerce-product-gallery,
  .woocommerce div.product > .summary {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* -------------------------------------------------------------------------
 * Glossary
 *
 * A definition list rather than a table: the terms are read by scanning for
 * one of them, not by comparing rows against each other. The term sits in its
 * own column on a wide screen so the eye can run down it, and stacks above the
 * definition once there is no room for two columns.
 * ---------------------------------------------------------------------- */
.sayru-glossary {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--sayru-line);
}
.sayru-glossary dt {
  grid-column: 1;
  padding: 0.9rem 1.5rem 0.9rem 0;
  font-weight: 600;
  line-height: 1.35;
  border-bottom: 1px solid var(--sayru-line);
}
.sayru-glossary dd {
  grid-column: 2;
  margin: 0;
  padding: 0.9rem 0;
  line-height: 1.6;
  border-bottom: 1px solid var(--sayru-line);
}
.sayru-glossary dd a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (max-width: 700px) {
  .sayru-glossary {
    grid-template-columns: 1fr;
  }
  /* Stacked, the term keeps the rule above it and the definition below keeps
     the one that closes the pair, so the two still read as one entry. */
  .sayru-glossary dt {
    padding: 0.9rem 0 0.2rem;
    border-bottom: 0;
  }
  .sayru-glossary dd {
    padding: 0 0 0.9rem;
  }
}

/* The pack an enquiry arrived from, shown at the top of the contact page. */
.sayru-packnotice {
  margin: 0 0 1.5rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--sayru-line);
  border-left: 3px solid var(--wp--preset--color--brand, currentColor);
  background: var(--wp--preset--color--brand-tint, transparent);
  font-size: 0.95rem;
}
.sayru-packnotice span {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* -------------------------------------------------------------------------
 * Cross-links between the three ways the catalogue is sliced
 * ---------------------------------------------------------------------- */
.sayru-xl__lead {
  max-width: 60ch;
  margin: 0.5rem 0 0;
  /* Opacity over the ink read at 3:1; the muted token holds 4.9:1 on white. */
  color: var(--wp--preset--color--muted);
  font-size: 0.95rem;
}
.sayru-xl__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 1.75rem;
}
.sayru-xl__h {
  margin: 0 0 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.sayru-xl__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.sayru-xl__list a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--sayru-line);
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.3;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sayru-xl__list a:hover,
.sayru-xl__list a:focus-visible {
  border-color: currentColor;
  background: var(--wp--preset--color--brand-tint, transparent);
}
/* The overlap count is context, not the label, so it stays quieter. */
.sayru-xl__n {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--muted);
}

@media (max-width: 700px) {
  .sayru-xl__cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sayru-xl__list a { transition: none; }
}

/* Nearby packs, under a product. */
.sayru-near__grid {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.sayru-near__link {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
}
.sayru-near__img {
  display: block;
  overflow: hidden;
  border: 1px solid var(--sayru-line);
  background: #fff;
  aspect-ratio: 1 / 1;
}
.sayru-near__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.sayru-near__link:hover .sayru-near__img img,
.sayru-near__link:focus-visible .sayru-near__img img {
  transform: scale(1.03);
}
.sayru-near__name {
  font-size: 0.92rem;
  line-height: 1.4;
}

@media (max-width: 900px) { .sayru-near__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .sayru-near__img img { transition: none; } }

/* Read next, under a hub page.

   The section spans the viewport, so .sayru-section's inset -- which adds the
   root padding to half the leftover width -- counts that padding twice and set
   this heading 44px inside every other heading on the page. Half the leftover
   width is the whole answer when the element is already full-bleed. */
.sayru-readnext.sayru-readnext {
  padding-inline: max(
    calc((100% - var(--wp--style--global--wide-size)) / 2),
    clamp(1rem, 3vw, 2.75rem)
  );
}

/* .sayru-section > ul caps lists at a reading measure, which is right for
   prose and wrong for a row of cards. That selector carries !important and a
   class plus an element, so matching it needs more than one class here. */
.sayru-section > ul.sayru-readnext__grid {
  max-width: none !important;
}
.sayru-readnext__grid {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.sayru-readnext__card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--sayru-line);
  background: #fff;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.sayru-readnext__card:hover,
.sayru-readnext__card:focus-visible {
  border-color: currentColor;
  transform: translateY(-2px);
}
.sayru-readnext__name { font-weight: 600; line-height: 1.35; }
.sayru-readnext__why { font-size: 0.9rem; line-height: 1.55; opacity: 0.75; }

@media (max-width: 860px) { .sayru-readnext__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sayru-readnext__card { transition: none; } }

/* -------------------------------------------------------------------------
 * Enquiry actions, under the specification
 *
 * Two buttons on one row, directly below the table a buyer reads to decide.
 * They replace the tinted band that used to sit under the product, which put
 * the same two actions a scroll further down with a wide empty strip between
 * its text and its buttons.
 * ---------------------------------------------------------------------- */
.sayru-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.sayru-actions__cta,
.sayru-actions__alt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.25rem;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sayru-actions__cta {
  /* White on the brand green is 4.2:1, short of AA for 15px text. */
  background: var(--wp--preset--color--brand-deep);
  color: #fff;
}
.sayru-actions__cta:hover,
.sayru-actions__cta:focus-visible { background: #0f4a21; }
.sayru-actions__alt {
  border: 1px solid var(--sayru-line);
  color: var(--wp--preset--color--ink);
  background: #fff;
}
.sayru-actions__alt:hover,
.sayru-actions__alt:focus-visible {
  border-color: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--brand);
}

@media (max-width: 480px) {
  .sayru-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .sayru-actions__cta, .sayru-actions__alt { transition: none; }
}

/* -------------------------------------------------------------------------
 * Legal pages
 *
 * Five short sections that used to run down a single column about a third of
 * the page wide, with the headings capped at a narrower measure than the
 * paragraphs beneath them, so one block of text finished on two different
 * right edges. Two columns of self-contained sections use the width and give
 * both headings and prose the same edge.
 * ---------------------------------------------------------------------- */
/* Doubled class: WordPress prints its own layout rules for a group after the
   theme stylesheet, so a single class loses the display it sets. */
.sayru-legal.sayru-legal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); /* min(): a phone is narrower than 24rem */
  gap: clamp(1.75rem, 3vw, 3rem) clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.sayru-legal .sayru-legal__item > * {
  max-width: none !important;
}
.sayru-legal .sayru-legal__item > :first-child { margin-top: 0; }
.sayru-legal .sayru-legal__item > :last-child { margin-bottom: 0; }
.sayru-legal .sayru-legal__item h2 { margin-bottom: 0.6rem; }
.sayru-legal .sayru-legal__item p { line-height: 1.75; }