/* ==========================================================================
   Wholesome Labs — Layout
   Header, footer, section rhythm, page shells.
   ========================================================================== */

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

.wl-section { padding-block: var(--wl-section); }
.wl-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.wl-section--flush-top { padding-top: 0; }
.wl-section--flush-bottom { padding-bottom: 0; }

/* A hairline that separates stacked full-width sections of the same colour. */
.wl-section--ruled { border-top: var(--wl-border); }

/* The eyebrow is inline-flex, so the auto inline margins that core's
   constrained layout uses to centre a section's prose column do nothing for it
   and it lands out on the section gutter instead. Giving it the column's width
   puts its left edge back in line with the heading underneath it. Scoped to
   direct children of a section so the centred eyebrow inside .wl-statement,
   which sits in its own inner wrapper, is left alone. */
/* Same alignment problem, different cause: .wl-lede caps itself at 62ch, which
   is narrower than the content column, so the constrained layout centres it and
   it sits indented from the heading above. Widening it to the column is worth
   the couple of extra characters per line. */
.wl-section > .wl-lede {
  max-width: var(--wp--style--global--content-size, 760px);
}
.wl-section > .wl-eyebrow {
  /* Block-level, because auto margins do not centre an inline-level box and
     .wl-eyebrow is inline-flex by default. */
  display: flex;
  width: 100%;
  max-width: var(--wp--style--global--content-size, 760px);
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   Content pages: the two tracks
   --------------------------------------------------------------------------

   page.html and single.html give post-content align:wide, so .entry-content is
   as wide as wideSize and core's constrained layout centres each child on the
   content size. That leaves a content page with two usable tracks: the 760px
   reading measure for prose, and the wider one below for things that are not
   prose and read badly squeezed into a text column.

   Everything in this block is scoped to .entry-content.alignwide, which only
   ever means page.html / single.html. front-page.html gives post-content
   align:full and composes its own full-bleed sections, so none of this reaches
   the home page.
   -------------------------------------------------------------------------- */

.entry-content.alignwide {
  /* The panel track. Wide enough that a three-up card row gets ~370px a card
     instead of ~235px, narrow enough that a panel still reads as part of the
     same document as the prose above it. */
  --wl-panel: 1180px;

  /* The offset core's constrained layout uses to centre a content-size child.
     Anything inline-level has to be shifted across by hand instead (see
     below), and this keeps that shift tied to the real column. Collapses to 0
     once the track is narrower than the column, i.e. on small screens. */
  --wl-col-inset: calc(
    (100% - min(var(--wp--style--global--content-size, 760px), 100%)) / 2
  );
}

/* Inline-level children of a constrained layout.

   Auto inline margins do not centre an inline-level box, so .wl-eyebrow
   (inline-flex) and .wl-faq-section (inline-block, so the pill shrink-wraps
   its label) both ignore the centring and sit on the left edge of the wide
   track. While post-content was itself 760px wide that edge *was* the text
   column and nothing looked wrong; at wide it is ~370px out on its own. */
.entry-content.alignwide > .wl-eyebrow {
  display: flex;
  width: 100%;
  max-width: var(--wp--style--global--content-size, 760px);
  margin-inline: auto;
}

.entry-content.alignwide > .wl-faq-section {
  /* Stays inline-block — the pill has to hug its label — so it takes the
     offset by hand rather than relying on the auto margins.

     !important because core's constrained layout writes
     `margin-left: auto !important` on every child, and the only way past an
     important declaration is another one. This selector outranks core's on
     specificity, which is what decides between two important declarations in
     the same origin, so the override holds wherever core's rule is printed. */
  margin-inline-start: var(--wl-col-inset) !important;
}

/* .wl-lede caps itself at 62ch, which is narrower than the column, so the
   constrained layout centres it and it sits indented under the heading it
   belongs to. Same fix as .wl-section > .wl-lede above. */
.entry-content.alignwide > .wl-lede {
  max-width: var(--wp--style--global--content-size, 760px);
}

/* The panel track: card grids, the COA table, the statement band.

   Card rows only qualify at three columns or more — that is where a 760px
   column squeezes each card down to ~235px and the copy starts breaking after
   three or four words. A two-up row already has ~370px a card at the reading
   measure, and widening it only leaves the cards half empty and sets a second
   left edge against the heading above them. */
.entry-content.alignwide
  > .wp-block-columns:has(.wl-card):has(> .wp-block-column:nth-child(3)),
.entry-content.alignwide > .wl-doclist,
.entry-content.alignwide > .wl-doclist__head,
.entry-content.alignwide > .wl-statement {
  max-width: min(var(--wl-panel), 100%);
  margin-inline: auto;
}

/* The statement band is authored alignfull, which on the home page means edge
   to edge. On a content page it is one panel inside a document, so it takes
   the panel width and the same corner radius as the cards under it. */
.entry-content.alignwide > .wl-statement {
  border-radius: var(--wl-radius-lg);
}


/* --------------------------------------------------------------------------
   Announcement bar
   --------------------------------------------------------------------------

   Printed on wp_body_open, so it sits above the sticky header and scrolls away
   with the page rather than eating a permanent strip of the viewport.
   -------------------------------------------------------------------------- */

.wl-announce {
  background: var(--wl-forest-deep);
  color: rgba(247, 243, 234, 0.9);
  font-size: 0.8125rem;
}

.wl-announce[hidden] { display: none; }

.wl-announce__inner {
  position: relative;
  max-width: var(--wp--style--global--wide-size, 1600px);
  margin-inline: auto;
  padding: 0.62rem var(--wl-gutter);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wl-announce__msg {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.8rem;
  line-height: 1.45;
}

/* The only moving thing in the bar, and small enough to read as punctuation
   rather than an alert. */
.wl-announce__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wl-gold);
  animation: wl-announce-pulse 3s var(--wl-ease) infinite;
}

@keyframes wl-announce-pulse {
  0%, 68%, 100% { box-shadow: 0 0 0 0 rgba(212, 178, 114, 0.5); }
  34%           { box-shadow: 0 0 0 6px rgba(212, 178, 114, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .wl-announce__dot { animation: none; }
}

.wl-announce a {
  color: var(--wl-gold);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.wl-announce a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wl-announce__close {
  position: absolute;
  right: calc(var(--wl-gutter) - 0.4rem);
  top: 50%;
  translate: 0 -50%;
  background: none;
  border: 0;
  padding: 0.2rem 0.4rem;
  font-size: 1.15rem;
  line-height: 1;
  color: rgba(247, 243, 234, 0.5);
  cursor: pointer;
}

.wl-announce__close:hover { color: var(--wl-ivory); }

/* On a phone the message wraps, so the bar has to earn its height: smaller
   type, tighter padding, and room kept clear of the close button. */
@media (max-width: 700px) {
  .wl-announce { font-size: 0.75rem; }

  .wl-announce__inner {
    padding-block: 0.5rem;
    padding-right: 2.5rem;
  }

  .wl-announce__msg { gap: 0.25rem 0.6rem; }
}


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

.wl-header {
  position: sticky;
  top: 0;
  z-index: 400;
  background: var(--wl-header-bg-alpha);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(214, 208, 197, 0.7);
  transition: border-color 0.3s var(--wl-ease), box-shadow 0.3s var(--wl-ease);
}

/* backdrop-filter makes an element a containing block for fixed-position
   descendants. The mobile navigation overlay is a fixed element inside this
   header, so with the filter applied it was clipped to the header's own height
   instead of covering the viewport. WordPress puts .has-modal-open on <html>
   while the overlay is open, so drop the filter for exactly that moment. */
.has-modal-open .wl-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
}
/* Toggled by site.js once the page scrolls past the header. */
.wl-header.is-stuck {
  border-bottom-color: var(--wl-stone);
  box-shadow: 0 8px 24px -20px rgba(36, 42, 38, 0.5);
}

/* WordPress's flow layout puts a block gap between the header row and the
   collapsed search panel, which silently added 24px to the top of every page. */
.wl-header > * { margin-block: 0; }

.wl-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: var(--wl-header-h);
  max-width: var(--wp--style--global--wide-size, 1240px);
  margin-inline: auto;
  padding-inline: var(--wl-gutter);
}

.wl-header__logo { flex: none; line-height: 0; }

/* The mark is the only place the full brand lockup appears above the fold, so
   it gets the room. Sized by height with width auto: the site-logo block prints
   a width attribute, and letting CSS drive the height instead means the logo
   scales from the source rather than being pinned to that number. */
.wl-header__logo img { max-height: 72px; width: auto; }

/* Primary navigation */
.wl-header__nav {
  flex: 1 1 auto;
  justify-content: center;
}

/* Spacing is the thing that makes six items read as six items rather than a
   row of words. The vw term does the work between the breakpoint and the wide
   cap; the minimum is what the nav needs to stay on one line at 1120px, which
   is where the inline nav now starts. */
.wl-header__nav .wp-block-navigation__container { gap: clamp(1.5rem, 2.6vw, 3rem); }

.wl-header__nav .wp-block-navigation-item__content {
  font-family: var(--wl-sans);
  font-size: 0.875rem;
  font-weight: 600;
  /* Tighter tracking than before, not looser. Letter-spacing that reads as
     refined at weight 500 reads as stretched at 600. */
  letter-spacing: 0.02em;
  color: var(--wl-ink);
  text-decoration: none;
  padding-block: 0.4rem;
  position: relative;
  transition: color 0.2s var(--wl-ease);
}

.wl-header__nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--wl-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s var(--wl-ease);
}

.wl-header__nav .wp-block-navigation-item__content:hover { color: var(--wl-forest); }
.wl-header__nav .wp-block-navigation-item__content:hover::after,
.wl-header__nav .current-menu-item .wp-block-navigation-item__content::after { transform: scaleX(1); }

/* Utility cluster: search, account, cart */
.wl-header__utils {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
}

.wl-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--wl-radius-pill);
  background: transparent;
  color: var(--wl-ink);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s var(--wl-ease), color 0.2s var(--wl-ease);
}

.wl-iconbtn:hover { background: rgba(168, 183, 154, 0.24); color: var(--wl-forest); }
.wl-iconbtn svg { width: 20px; height: 20px; display: block; }

/* WooCommerce account + mini-cart blocks, normalised into the icon row.
   Class names verified against the rendered WooCommerce 10.9 markup. */

.wl-header__search,
.wl-header__utils .wp-block-woocommerce-customer-account,
.wl-header__utils .wp-block-woocommerce-mini-cart,
.wl-header__utils .wc-block-mini-cart {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.wl-header__utils .wc-block-customer-account__link,
.wl-header__utils .wc-block-mini-cart__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--wl-radius-pill);
  background: transparent;
  color: var(--wl-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--wl-ease), color 0.2s var(--wl-ease);
}

.wl-header__utils .wc-block-customer-account__link:hover,
.wl-header__utils .wc-block-mini-cart__button:hover {
  background: rgba(168, 183, 154, 0.24);
  color: var(--wl-forest);
}

/* The account block ships a 30-unit viewBox; size it to match the 24-unit set. */
.wl-header__utils .wc-block-customer-account__link svg {
  width: 26px;
  height: 26px;
  display: block;
}

.wl-header__utils .wc-block-mini-cart__button svg,
.wl-header__utils .wc-block-mini-cart__icon {
  width: 21px;
  height: 21px;
  display: block;
}

/* Hide the mini cart's price label; the badge alone keeps the row calm. */
.wl-header__utils .wc-block-mini-cart__amount { display: none; }

.wl-header__utils .wc-block-mini-cart__badge {
  background: var(--wl-forest);
  color: var(--wl-ivory);
  font-family: var(--wl-sans);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.2rem 0.35rem;
  border-radius: var(--wl-radius-pill);
  border: 2px solid var(--wl-header-bg);
}
/* Search panel revealed by the search toggle. */
.wl-search-panel {
  display: grid;
  grid-template-rows: 0fr;
  border-top: 1px solid transparent;
  transition: grid-template-rows 0.32s var(--wl-ease), border-color 0.32s var(--wl-ease);
}

.wl-search-panel[data-open="true"] {
  grid-template-rows: 1fr;
  border-top-color: var(--wl-stone);
}

.wl-search-panel__inner {
  overflow: hidden;
  max-width: var(--wp--style--global--wide-size, 1240px);
  margin-inline: auto;
  padding-inline: var(--wl-gutter);
  width: 100%;
}

.wl-search-panel form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 1.25rem;
}

.wl-search-panel input[type="search"] {
  flex: 1;
  border: 0;
  border-bottom: 1px solid var(--wl-stone);
  border-radius: 0;
  background: transparent;
  font-family: var(--wl-serif);
  font-size: 1.375rem;
  padding: 0.5rem 0;
}

.wl-search-panel input[type="search"]:focus {
  box-shadow: none;
  border-bottom-color: var(--wl-forest);
}

/* Mobile navigation overlay (core/navigation overlayMenu). */
.wl-header__nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wl-ivory);
  padding: clamp(1.5rem, 6vw, 3rem);
}

.wl-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: 2rem;
}

.wl-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--wl-serif);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--wl-forest);
  padding-block: 0.5rem;
}

.wl-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }

.wl-header__nav .wp-block-navigation__responsive-container-open,
.wl-header__nav .wp-block-navigation__responsive-container-close {
  color: var(--wl-ink);
  padding: 0.5rem;
}

/* Six primary items plus a logo and three icons need room to sit on one line.
   WordPress switches core/navigation to its overlay at 600px, which leaves a
   band where the menu wraps onto two rows. Extend the overlay up so the header
   is either a full inline nav or a clean hamburger, never a wrapped
   half-measure.

   The threshold moved from 1023px to 1119px when the logo and nav grew. At the
   old one the items fitted only by sitting almost touching, which defeats the
   point of spacing them out — better to hand those widths a hamburger than an
   inline nav with no air in it. */
@media (min-width: 600px) and (max-width: 1119px) {
  .wl-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }

  .wl-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

@media (max-width: 1119px) {
  .wl-header__nav { flex: none; order: 3; }
  .wl-header__utils { order: 2; margin-left: auto; }
}

@media (max-width: 781px) {
  /* A 100px sticky bar costs too much of a phone screen. */
  :root { --wl-header-h: 78px; }

  .wl-header__logo img { max-height: 54px; }
  /* WordPress's flow layout puts a block gap between the header row and the
   collapsed search panel, which silently added 24px to the top of every page. */
.wl-header > * { margin-block: 0; }

.wl-header__inner { gap: 0.5rem; }
}

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

.wl-footer {
  background: var(--wl-forest-deep);
  color: rgba(247, 243, 234, 0.78);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 0;
  font-size: 0.875rem;
}

.wl-footer__inner {
  max-width: var(--wp--style--global--wide-size, 1240px);
  margin-inline: auto;
  padding-inline: var(--wl-gutter);
}

.wl-footer__top {
  display: grid;
  grid-template-columns: minmax(240px, 1.3fr) repeat(3, minmax(140px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 3rem;
}

.wl-footer__brand p {
  margin: 1.25rem 0 0;
  max-width: 34ch;
  line-height: 1.7;
  color: rgba(247, 243, 234, 0.68);
}

.wl-footer__logowrap { line-height: 0; }
.wl-footer__logo { display: inline-block; line-height: 0; }
.wl-footer__logo img { max-height: 66px; width: auto; }

.wl-footer h2,
.wl-footer h3,
.wl-footer .wl-footer__heading {
  font-family: var(--wl-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wl-gold);
  margin: 0 0 1.1rem;
}

.wl-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.wl-footer a {
  color: rgba(247, 243, 234, 0.78);
  text-decoration: none;
  transition: color 0.2s var(--wl-ease);
}

.wl-footer a:hover { color: var(--wl-ivory); text-decoration: underline; text-underline-offset: 3px; }

/* Research-use disclaimer band */
.wl-footer__disclaimer {
  border-top: 1px solid rgba(247, 243, 234, 0.14);
  padding-block: 1.75rem;
}

/* The FDA notice is a stated panel, not a run of small print.

   The words are unchanged — they are supplied legal copy. What changed is that
   they are now framed and labelled. Uniform grey small print at the bottom of
   a page reads as something being got out of the way; the same sentences in a
   panel that names itself read as something being declared, which is the
   posture a payment processor is looking for. */
.wl-footer__notice {
  margin-top: 1.05rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid rgba(247, 243, 234, 0.1);
  border-left: 3px solid var(--wl-gold);
  border-radius: var(--wl-radius);
  background: rgba(15, 30, 23, 0.34);
}

.wl-footer__notice-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.65rem;
  font-family: var(--wl-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wl-gold);
}

.wl-footer__notice-label svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--wl-gold);
}

/* No reading-measure cap in here, deliberately.

   A 92ch limit is right for prose the eye reads line by line. It is wrong
   inside a bordered panel: the text stopped 58% of the way across and left the
   right-hand third of the box empty, which reads as a layout fault rather than
   a considered measure, and it pushed the panel half as tall again as it needs
   to be. The panel edge is the boundary now. */
.wl-footer__legal { max-width: none; }

/* The load-bearing clauses. Brightened rather than made heavier — at this size
   weight alone does not separate them from the surrounding sentence. */
.wl-footer__legal strong {
  font-weight: 600;
  color: rgba(247, 243, 234, 0.9);
}

.wl-footer__disclaimer p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: rgba(247, 243, 234, 0.66);
}

.wl-footer__disclaimer p + p { margin-top: 0.7rem; }

/* The approved research-use line leads the block, so it carries a little
   more weight than the regulatory copy underneath it. */
.wl-footer__legal-lead {
  color: rgba(247, 243, 234, 0.86) !important;
  font-weight: 500;
}

/* Mostly upper-case, which is hard going at full brightness; a slightly
   quieter tone and looser tracking keeps it readable rather than shouty. */
.wl-footer__legal-strong {
  color: rgba(247, 243, 234, 0.58) !important;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
}

/* Assurance row.

   Selectors carry .wl-footer as well as the block, because the generic
   `.wl-footer ul` rule higher up is 0,1,1 and would otherwise win over a bare
   class. */
.wl-footer__trust {
  border-top: 1px solid rgba(247, 243, 234, 0.14);
  padding-block: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2.5rem;
}

.wl-footer .wl-footer__assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wl-footer .wl-footer__assurances li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.015em;
  color: rgba(247, 243, 234, 0.7);
}

.wl-footer__assurances svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--wl-sage);
}

/* Accepted-card marks.

   Every mark sits in a white tile. The four brand marks have wildly different
   proportions — Discover's is a bare wordmark six times as wide as it is tall,
   Amex's is a square — and set loose in a row they read as a mistake. Sizing
   them to a common height is what the network brand guidelines ask for anyway,
   so the tiles vary in width and the marks all read at the same weight.

   The width cap is what stops Discover from running three times the width of
   the others; it loses a little height in exchange, which is the better trade.

   Defined outside .wl-footer because the same component runs on the home page
   at a larger size. */
.wl-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wl-cards__item { margin: 0; }

.wl-cards__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding-inline: 0.45rem;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(31, 59, 46, 0.14);
}

/* Sized by height, width from the file's own ratio. Not `height: auto` — the
   theme's global img rule sets that, and in a flex tile it resolved the mark to
   zero and collapsed the tile to its padding. */
.wl-cards__tile img {
  display: block;
  height: 18px;
  width: auto;
  max-width: 78px;
  object-fit: contain;
}

/* The home page treatment. */
.wl-cards--large { gap: 0.65rem; }

.wl-cards--large .wl-cards__tile {
  height: 46px;
  padding-inline: 0.75rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px -3px rgba(31, 59, 46, 0.28);
}

.wl-cards--large .wl-cards__tile img {
  height: 28px;
  max-width: 118px;
}

/* On a phone the large row is 3px too wide and Discover drops to a second
   line on its own, which looks like an accident. Step the whole row back to
   the footer's metrics and all four sit together. */
@media (max-width: 560px) {
  .wl-cards--large .wl-cards__tile {
    height: 34px;
    padding-inline: 0.5rem;
    border-radius: 6px;
  }

  .wl-cards--large .wl-cards__tile img {
    height: 20px;
    max-width: 86px;
  }
}

/* The footer's generic `ul` rule is 0,1,1 and beats a single class, so the
   whole layout has to be restated here — including `display`. It sets
   `display: grid`, which quietly stacked the four marks one per line. */
.wl-footer .wl-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wl-footer .wl-cards li { margin: 0; }

.wl-pay {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.wl-pay__label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 243, 234, 0.45);
}

.wl-pay__mark img {
  display: block;
  height: 20px;
  width: auto;
  max-width: none;
}

.wl-pay__mark--text {
  font-size: 0.75rem;
  color: rgba(247, 243, 234, 0.7);
}

/* Bottom bar */
.wl-footer__bottom {
  border-top: 1px solid rgba(247, 243, 234, 0.14);
  padding-block: 1.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgba(247, 243, 234, 0.55);
}

.wl-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }

@media (max-width: 900px) {
  .wl-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .wl-footer__top { grid-template-columns: 1fr; gap: 2.25rem; }
  .wl-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Page shells
   -------------------------------------------------------------------------- */

/* Standard page header band used by content pages and archives. */
.wl-pagehead {
  background: linear-gradient(180deg, var(--wl-ivory-soft) 0%, var(--wl-ivory) 100%);
  border-bottom: var(--wl-border);
  padding-block: clamp(1.25rem, 2.6vw, 2.25rem);
  text-align: center;
}

.wl-pagehead__inner {
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--wl-gutter);
}

.wl-pagehead h1 {
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
}

.wl-pagehead p {
  margin: 0.6rem auto 0;
  max-width: 60ch;
  color: var(--wl-warm-gray);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* Long-form prose column used by policy and content pages. */
.wl-prose > * { margin-block: 1.15rem; }
.wl-prose > h2 { margin-block: 2.75rem 1rem; }
.wl-prose > h3 { margin-block: 2rem 0.75rem; }
.wl-prose > h2:first-child,
.wl-prose > h3:first-child { margin-top: 0; }

.wl-prose ul,
.wl-prose ol { padding-left: 1.35rem; }
.wl-prose li { margin-block: 0.55rem; }
.wl-prose li::marker { color: var(--wl-sage); }

/* Mobile navigation overlay sizing */
.wl-header__nav .wp-block-navigation__responsive-container.is-menu-open {
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
}
/* The band above already separates the header from the content, so the first
   section does not need full section padding on top as well. Together with the
   smaller band this halves the run-in before the first products on the shop. */
/* A filled panel is exempt from the trim below. That rule pulls the first
   section under the page header up to close a gap, which is right for an
   open section whose padding is just page whitespace. Inside a coloured box
   the padding is part of the component, so trimming one side alone leaves
   the wording sitting high with a dead band underneath it. */
.wl-pagehead + * .wl-statement.wl-section:first-child,
.wl-pagehead + .wl-statement.wl-section {
  padding-top: var(--wl-section);
}

.wl-pagehead + .wl-section,
.wl-pagehead + * .wl-section:first-child {
  padding-top: clamp(1.25rem, 2.6vw, 2.25rem);
}

/* Page header on small screens: the band is dominated by the intro copy rather
   than padding, so the saving here comes from type size, not more trimming. */
@media (max-width: 600px) {
  .wl-pagehead h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .wl-pagehead p { font-size: 0.9375rem; line-height: 1.6; }
}

/* core/shortcode runs wpautop() on its own content, so any shortcode that
   returns a block-level element leaves an empty paragraph next to it, carrying
   paragraph margins and opening a gap nobody asked for. */
.wl-main p:empty,
.wl-footer p:empty { display: none; }