/* Nature's Goods — theme styles. Ported from the approved mockup (mockups/site.css + page styles)
   onto WordPress block markup. Colours, fonts and sizes come from theme.json; these short names
   keep the mockup's rules readable. */

:root {
  --linen: var(--wp--preset--color--linen);
  --pebble: var(--wp--preset--color--pebble);
  --ash: var(--wp--preset--color--ash);
  --blush: var(--wp--preset--color--blush);
  --clay: var(--wp--preset--color--clay);
  --ink: var(--wp--preset--color--ink);
  --paper: var(--wp--preset--color--paper);
  /* Derived for small text: 5.9:1 on linen, 5.2:1 on blush */
  --ash-deep: var(--wp--preset--color--ash-deep);

  --step--1: 0.8125rem;
  --step-0: var(--wp--preset--font-size--base);
  --step-1: var(--wp--preset--font-size--step-1);
  --step-2: var(--wp--preset--font-size--step-2);
  --step-3: var(--wp--preset--font-size--step-3);
  --step-4: var(--wp--preset--font-size--step-4);
  --step-5: var(--wp--preset--font-size--step-5);
  --step-6: var(--wp--preset--font-size--step-6);

  --track-wide: var(--wp--custom--track-wide);
  --gutter: var(--wp--custom--gutter);
  --max: 80rem;
  --header-h: 5rem;
}

/* Components set display:grid/flex, which would otherwise override the hidden attribute */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
img { display: block; max-width: 100%; height: auto; }
body :where(figure) { margin: 0; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
/* Spacing resets below never take away the centring. */
:root body .wrap { margin-inline: auto; }
/* Full-width sections stack without gaps; each sets its own padding. */
body .sections > *, body .sections .wp-block-post-content > *, body .wp-site-blocks > * { margin-block: 0; }
/* Nothing between the header and the first section (newer WordPress adds block gaps around main). */
body .wp-site-blocks > main, body main.sections, body .sections > .wp-block-post-content { margin-block: 0 !important; padding-block: 0; }
body .hero > * { margin: 0; }

/* Display caps echo the logotype: light weight, wide tracking */
.is-style-display { font-weight: 300; text-transform: uppercase; letter-spacing: var(--track-wide); line-height: 1.15; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr-only, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
svg:has(> use) { fill: currentColor; }

/* ---------- Buttons ---------- */
.wp-block-buttons { gap: 1rem; }
.wp-element-button, .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem;
  text-decoration: none; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
}
.wp-block-button__link:active { transform: translateY(1px); }
.wp-block-button.is-style-ghost .wp-block-button__link { background: transparent; color: var(--ink); }
.wp-block-button.is-style-ghost .wp-block-button__link:hover { background: var(--ink); color: var(--paper); }
.wp-block-button.is-style-light .wp-block-button__link { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.wp-block-button.is-style-light .wp-block-button__link:hover { background: transparent; color: var(--paper); }

/* Text links: a soft brand-colour highlight rises behind the words on hover, like a marker stroke.
   --hl is the highlight colour; sections on blush or clay switch it so it stays visible. */
.link, .is-style-link a {
  font-weight: 500; text-decoration: none; padding-bottom: 0.1em;
  background-image: linear-gradient(var(--hl, var(--blush)), var(--hl, var(--blush))), linear-gradient(currentColor, currentColor);
  background-size: 100% 0, 100% 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat;
  transition: background-size .3s ease;
}
.link:hover, .is-style-link a:hover { background-size: 100% 0.55em, 100% 1px; }
.section--blush, .michelle { --hl: var(--clay); }
.section--clay, .reviews { --hl: var(--linen); }
/* Small text on the clay and pebble colours needs a darker grey to stay readable (6.2:1+). */
.section--clay, .section--pebble, .on-tint { --ash-deep: #3d393a; }
.muted { color: var(--ash-deep); }

/* ---------- Announcement bar ---------- */
.notice-bar { position: relative; background: var(--pebble); font-size: 0.875rem; text-align: center; padding: 0.55rem 3rem; }
.notice-bar p { margin: 0; }
.notice-bar a { font-weight: 600; }
/* Phones get the short version of the announcement (both are edited in the header). */
.notice-bar .short { display: none; }
@media (max-width: 40rem) { .notice-bar .long { display: none; } .notice-bar .short { display: block; } }
body .notice-bar .dismiss { margin: 0; position: absolute; right: 0.5rem; top: 50%; translate: 0 -50%; width: 2.25rem; height: 2.25rem; border: 0; background: none; font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; border-radius: 50%; color: inherit; }
.notice-bar .dismiss:hover { background: rgb(0 0 0 / 0.08); }

/* ---------- Header ---------- */
/* The template part wrapper steps aside so the header can stick to the whole page, not just its part. */
header.wp-block-template-part { display: contents; }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--linen); border-bottom: 1px solid var(--pebble); }
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
body .header-inner { display: flex; align-items: center; gap: 2rem; min-height: var(--header-h); }
body .header-inner > * { margin: 0; }
.brand { display: block; color: var(--ink); flex: none; }
.brand svg { display: block; width: 15rem; height: auto; aspect-ratio: 1082 / 153; }

.main-nav { margin-left: auto !important; font-size: 0.9375rem; font-weight: 500; color: var(--ash-deep); }
.main-nav .wp-block-navigation__container { gap: 1.6rem; }
.main-nav .wp-block-navigation-item__content {
  padding-block: 0.4rem; color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s;
}
.main-nav .wp-block-navigation-item__content:hover,
.main-nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] { color: var(--ink); }
.main-nav .current-menu-item > .wp-block-navigation-item__content,
.main-nav [aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
/* Hover: an underline draws in from the left (the current page keeps a solid one) */
.main-nav .wp-block-navigation__container > .wp-block-navigation-link > a { position: relative; }
.main-nav .wp-block-navigation__container > .wp-block-navigation-link > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.main-nav .wp-block-navigation__container > .wp-block-navigation-link > a:hover::after { transform: scaleX(1); }
.main-nav .wp-block-navigation-submenu__toggle { padding-right: 1.15rem !important; }
.main-nav .wp-block-navigation__submenu-icon { width: 0.875rem; height: 0.875rem; transition: transform .2s; }
.main-nav .wp-block-navigation__submenu-icon svg { stroke-width: 1.5; }
.main-nav [aria-expanded="true"] + .wp-block-navigation__submenu-icon { transform: rotate(180deg); }
.main-nav .wp-block-navigation__submenu-container {
  top: calc(100% + 0.9rem) !important; left: auto !important; right: -1rem; min-width: 14rem !important;
  padding: 0.5rem 0; background: var(--paper) !important; border: 1px solid var(--pebble) !important;
  box-shadow: 0 18px 40px -24px rgb(95 89 90 / 0.5);
}
.main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: block; width: 100%; padding: 0.6rem 1.25rem !important; color: var(--ink); border: 0; }
.main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--linen); }

/* Menu button: text, outlined, like the mockup */
.main-nav .wp-block-navigation__responsive-container-open {
  align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.9rem;
  border: 1px solid var(--ink); border-radius: 2px; font-size: 0.9375rem; font-weight: 500; color: var(--ink);
}
/* Phone and tablet menu: a calm full-screen sheet on linen */
.main-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--linen) !important; color: var(--ink) !important; padding: 1.25rem var(--gutter) 2rem; }
.main-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.5rem !important; align-items: stretch !important; }
.main-nav .is-menu-open .wp-block-navigation__container { gap: 0 !important; align-items: stretch !important; width: 100%; }
.main-nav .is-menu-open .wp-block-navigation-item { width: 100%; }
.main-nav .is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: 0.85rem 0 !important; font-size: var(--step-1); color: var(--ink); border-bottom: 1px solid var(--pebble); }
.main-nav .is-menu-open .wp-block-navigation-submenu__toggle { display: none !important; }
.main-nav .is-menu-open .wp-block-navigation-item.has-child { align-items: stretch !important; }
.main-nav .is-menu-open .wp-block-navigation__submenu-container { width: 100% !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none; background: none !important; }
.main-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.85rem 0 !important; font-size: var(--step-0); color: var(--ash-deep); }
/* Search and My Account sit in the header icons on desktop and in the menu on phones. */
.main-nav .mobile-only { display: none !important; }
.main-nav .is-menu-open .mobile-only { display: flex !important; }
.main-nav .wp-block-navigation__responsive-container-close { top: 1.25rem; right: var(--gutter); }

body .tools { display: flex; align-items: center; gap: 0.25rem; padding-left: 1.25rem; border-left: 1px solid var(--pebble); }
body .tools > * { margin: 0; }
.tools .wp-block-search__button, .tools .wc-block-mini-cart__button, .tools .wc-block-customer-account a {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; transition: background-color .2s;
}
.tools .wp-block-search__button:hover, .tools .wc-block-mini-cart__button:hover, .tools .wc-block-customer-account a:hover { background: rgb(0 0 0 / 0.07); }
.tools .wp-block-search__button svg { width: 1.375rem; height: 1.375rem; }
.tools .wp-block-search__inside-wrapper { border: 0; padding: 0; }
.tools .wp-block-search__input { min-height: 2.75rem; border: 1px solid var(--ash); border-radius: 2px; background: var(--paper); }

@media (max-width: 75rem) {
  /* Core switches to the menu button at 600px; the full menu needs more room than that. */
  .main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-flex; }
  .main-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
  .main-nav { order: 3; margin-left: 0 !important; }
  .tools { margin-left: auto !important; border: 0; padding: 0; }
  .tools .tool-search, .tools .tool-account { display: none; }
}
@media (max-width: 30rem) {
  :root { --header-h: 4.25rem; }
  .brand svg { width: 11.5rem; }
  body .header-inner { gap: 0.75rem; }
}

/* ---------- Footer ---------- */
footer.wp-block-template-part { margin-top: 0; }
.site-footer { background: var(--ink); color: var(--linen); padding-block: clamp(3.5rem, 7vw, 5rem) 2rem; font-size: 0.9375rem; }
body .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; }
body .footer-grid > *, body .footer-grid > * > *, body .footer-base > * { margin: 0; }
.footer-brand svg.lockup { display: block; width: 14rem; height: auto; aspect-ratio: 1082 / 153; }
body .footer-brand p { margin-top: 1.25rem; max-width: 30ch; color: var(--pebble); }
.site-footer h2 { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em; margin-bottom: 0.9rem !important; color: var(--paper); text-transform: none; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li + li { margin-top: 0.35rem; }
.site-footer a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s ease; }
.site-footer a:hover { background-size: 100% 1px; }
body .footer-base { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid #333; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; color: var(--pebble); font-size: var(--step--1); }
.footer-base ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer-base li + li { margin-top: 0; }
.site-footer :focus-visible { outline-color: var(--linen); }
@media (max-width: 60rem) { body .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 30rem) { body .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Text pages (terms, privacy, journal posts) ---------- */
.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); }
body .page-head > * + * { margin-top: 1.25rem; }
.page-head h1 { font-size: var(--step-5); font-weight: 300; text-transform: uppercase; letter-spacing: var(--track-wide); line-height: 1.15; }
.page-head .lede { max-width: 48ch; font-size: var(--step-1); line-height: 1.55; }
.page-text { padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.prose { max-width: 42rem; }
body .prose > * + * { margin-top: 1rem; }
body .prose > h2 { font-size: var(--step-2); font-weight: 500; margin-top: 2.5rem; text-transform: none; letter-spacing: 0; }
body .prose > h3 { font-size: var(--step-1); font-weight: 600; margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.4rem; }
.prose a { text-underline-offset: 0.2em; }

/* ---------- Page not found ---------- */
body .nf { min-height: 60vh; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; padding-block: clamp(3rem, 8vw, 6rem); }
body .nf > * { margin: 0; }
.nf h1 { font-size: var(--step-5); font-weight: 300; text-transform: uppercase; letter-spacing: var(--track-wide); line-height: 1.15; }
body .nf p { margin-top: 1rem; max-width: 38ch; font-size: var(--step-1); line-height: 1.5; }
body .nf .wp-block-buttons { margin-top: 2rem; gap: 0.75rem; }
.nf .wp-block-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 52rem) { body .nf { grid-template-columns: 1fr; } .nf .wp-block-image img { aspect-ratio: 4 / 3; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   Home page
   ===================================================================== */
/* Grids and stacks below set their own spacing. */
:root body :where(.triptych, .panel, .tiles, .tile, .gift-strip, .gift-item, .michelle-grid, .beats, .barn-photos, .timeline, .founder-cols, .review-list, .review, .mosaic, .ceramics, .section-head, .hero-wrap) > * { margin: 0; }

/* ---------- 1. Hero: the tagline as a triptych, one word per photo ---------- */
.hero { background: var(--ink); }
.hero-wrap { position: relative; }
body .triptych { display: grid; grid-template-columns: repeat(3, 1fr); height: min(calc(100svh - var(--header-h)), 54rem); min-height: 30rem; margin: 0; }
body .panel { position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.panel .wp-block-image { position: absolute !important; inset: 0; }
.panel img { width: 100%; height: 100%; object-fit: cover; }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0) 45%); }
.panel + .panel { border-left: 1px solid rgb(255 255 255 / 0.35); }
body .panel .word {
  position: relative; z-index: 1; width: 100%;
  padding: 0 clamp(1rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  color: var(--paper); font-size: clamp(1.75rem, 4.4vw, 4.25rem); font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.14em; line-height: 1;
}
.hero-mark { position: absolute; z-index: 1; top: clamp(1.5rem, 4vw, 2.5rem); left: 50%; translate: -50% 0; width: clamp(3.5rem, 7vw, 5.5rem); height: auto; aspect-ratio: 1; color: var(--paper); }

/* ---------- 2. Intro ---------- */
.intro { padding-block: clamp(4rem, 9vw, 7rem); text-align: center; }
.intro h2 { font-size: var(--step-5); max-width: 22ch; margin-inline: auto; }
body .intro p { margin: 1.75rem auto 0; max-width: 40ch; font-size: var(--step-1); line-height: 1.55; }
body .actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.actions .wp-block-button { margin: 0; }

/* ---------- 3. Four tiles, stepped like stones across a stream ---------- */
.tiles-section { padding-bottom: clamp(4rem, 9vw, 7rem); }
body .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: start; }
body .tile { position: relative; }
body .tile:nth-child(2) { margin-top: 3rem; }
body .tile:nth-child(3) { margin-top: 1.5rem; }
body .tile:nth-child(4) { margin-top: 4.5rem; }
.tile .wp-block-image { aspect-ratio: 3 / 4; overflow: hidden; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tile:hover img { transform: scale(1.03); }
.tile .body { padding: 1.25rem 1.25rem 1.5rem; }
.tile .body > * { margin: 0; }
.tile:nth-child(1) .body { background: var(--blush); }
.tile:nth-child(2) .body { background: var(--clay); }
.tile:nth-child(3) .body { background: var(--pebble); }
.tile:nth-child(4) .body { background: var(--paper); }
.tile h3 { font-size: var(--step-1); font-weight: 500; line-height: 1.3; }
body .tile .body p { margin-top: 0.4rem; font-size: 0.9375rem; }
body .tile .more { margin-top: 0.9rem; font-size: 0.875rem; font-weight: 600; }
.tile .more a { text-decoration: underline; text-underline-offset: 0.3em; transition: letter-spacing .3s ease; }
/* The whole tile is one link: the "more" link stretches over it. */
.tile .more a::after { content: ""; position: absolute; inset: 0; }
.tile:hover .more a { letter-spacing: 0.04em; }

/* ---------- 4. Unique gifts + Michelle ---------- */
.gifts { background: var(--paper); padding-block: clamp(3.5rem, 7vw, 5.5rem); }
body .section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.75rem 2rem; margin-bottom: 2rem; }
.section-head h2 { font-size: var(--step-4); }
body .gift-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.75rem, 2vw, 1.5rem); }
.gift-item { position: relative; }
.gift-item .wp-block-image { overflow: hidden; }
.gift-item img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; transition: transform .6s ease; }
.gift-item:hover img { transform: scale(1.03); }
body .gift-item p { margin-top: 0.75rem; font-size: 0.9375rem; font-weight: 500; }
.gift-item a { text-decoration: none; }
.gift-item a::after { content: ""; position: absolute; inset: 0; }

.michelle { background: var(--blush); padding-block: clamp(4rem, 9vw, 7rem); }
body .michelle-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.michelle-side { position: sticky; top: calc(var(--header-h) + 2rem); }
.michelle-side h2 { font-size: var(--step-5); }
body .michelle-side .kicker { margin-top: 0.75rem; font-size: var(--step-1); font-style: italic; font-weight: 300; }
body .michelle-side .wp-block-image { margin-top: 2rem; }
.michelle-side img { aspect-ratio: 4 / 5; width: 100%; max-width: 26rem; object-fit: cover; }
.michelle-text { max-width: 38rem; }
body .michelle-text > * { margin: 0; }
body .michelle-text > p + p, body .michelle-text > * + p { margin-top: 1.1rem; }
body .michelle-text .beats { margin: 2rem 0; font-size: var(--step-3); font-weight: 300; line-height: 1.35; }
.beats p:nth-child(2) { padding-left: 1.5em; }
.beats p:nth-child(3) { padding-left: 3em; font-weight: 500; }
body .michelle-text .closing { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--ink); font-size: var(--step-2); font-weight: 300; line-height: 1.4; }

/* ---------- 5. The Barn ---------- */
.barn { padding-block: clamp(4rem, 9vw, 7rem); }
body .barn-photos { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: clamp(0.5rem, 1.5vw, 1rem); align-items: end; }
.barn-photos img { width: 100%; object-fit: cover; }
.barn-photos > :nth-child(1) img, .barn-photos > :nth-child(3) img { aspect-ratio: 3 / 4; }
.barn-photos > :nth-child(2) img { aspect-ratio: 4 / 4.4; }
body .barn-card {
  position: relative; margin: clamp(-6rem, -8vw, -3rem) auto 0; width: min(100%, 44rem);
  background: var(--linen); padding: clamp(1.75rem, 4vw, 3rem); text-align: center;
}
body .barn-card > * { margin: 0; }
.barn-card h2 { font-size: var(--step-4); }
body .barn-card .sub { margin-top: 0.5rem; font-size: var(--step-1); font-style: italic; font-weight: 300; }
body .barn-card > p:not(.sub) { margin-top: 1.25rem; }
body .barn-card .address { font-weight: 500; }
body .barn-card .links { margin-top: 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem; }

/* ---------- 6. About the founder ---------- */
.founder { background: var(--paper); padding-block: clamp(4rem, 9vw, 7rem); }
.founder h2 { font-size: var(--step-4); }
body .timeline { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.timeline p { padding: 1.5rem 1.5rem 0 0; }
.timeline p + p { padding-left: 1.5rem; border-left: 1px solid var(--pebble); }
.timeline .year { display: block; font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: 200; line-height: 1; letter-spacing: -0.01em; }
.timeline .what { display: block; margin-top: 0.6rem; font-weight: 500; }
body .founder-cols { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
.founder-cols h3 { font-size: var(--step-2); font-weight: 400; line-height: 1.3; }
body .founder-cols p { margin-top: 1rem; }

/* ---------- 7. Testimonials ---------- */
.reviews { background: var(--clay); padding-block: clamp(4rem, 9vw, 7rem); }
.reviews h2 { font-size: var(--step-4); }
body .reviews .score { margin-top: 0.75rem; }
body .review-list { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
body .review { display: flex; flex-direction: column; }
.review .pull { font-size: var(--step-2); font-weight: 300; line-height: 1.35; }
.review .pull::before { content: "\201C"; display: block; font-size: 3.5rem; line-height: 0.8; font-weight: 200; }
.review .wp-block-details > * { margin: 0; }
body .review .full { margin-top: 1.25rem; font-size: 0.9375rem; }
body .review .extra { margin-top: 0.75rem; font-size: 0.875rem; }
body .review .wp-block-details summary { margin-top: 1rem; cursor: pointer; font-size: 0.875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 0.3em; list-style: none; }
.review summary::-webkit-details-marker { display: none; }
.review details[open] summary { display: none; }
body .review .ratings { margin-top: auto; padding-top: 1.25rem; font-size: 0.875rem; word-spacing: 0.1em; }
.review .ratings strong { font-weight: 600; margin-right: 0.9rem; }

/* ---------- 8. Past events + ceramics ---------- */
.glimpse { padding-block: clamp(4rem, 9vw, 7rem); }
.glimpse h2 { font-size: var(--step-4); }
body .mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(9rem, 16vw, 14rem); gap: clamp(0.5rem, 1.2vw, 0.9rem); }
.mosaic .wp-block-image { overflow: hidden; height: 100%; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.mosaic .wp-block-image:hover img, .ceramics .wp-block-image:hover img { transform: scale(1.04); }
.mosaic .tall { grid-row: span 2; }
.mosaic .wide { grid-column: span 2; }
body .ceramics-head { margin-top: clamp(3.5rem, 7vw, 5rem); }
.ceramics-head h3 { font-size: var(--step-3); font-weight: 300; text-transform: uppercase; letter-spacing: var(--track-wide); }
body .ceramics { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 1fr); gap: clamp(0.5rem, 1.2vw, 0.9rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.75rem; }
.ceramics .wp-block-image { scroll-snap-align: start; overflow: hidden; }
.ceramics img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; transition: transform .8s ease; }

/* ---------- 9. Join us ---------- */
.join { position: relative; overflow: hidden; background: var(--pebble); padding-block: clamp(5rem, 11vw, 8rem); text-align: center; }
.join::before { content: ""; position: absolute; width: min(56rem, 120vw); aspect-ratio: 1; left: 50%; top: 50%; translate: -50% -50%; border: 1px solid rgb(0 0 0 / 0.35); border-radius: 50%; pointer-events: none; }
.join .wrap { position: relative; }
.join h2 { font-size: var(--step-6); }
body .join p { margin: 1.5rem auto 0; max-width: 46ch; font-size: var(--step-1); line-height: 1.55; }

/* ---------- The one orchestrated moment: Create, Connect, Restore arrive in turn ---------- */
@media (prefers-reduced-motion: no-preference) {
  .panel img { animation: settle 1.8s cubic-bezier(.2,.7,.2,1) both; }
  .panel .word { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: .35s; }
  .panel:nth-child(2) .word { animation-delay: .65s; }
  .panel:nth-child(3) .word { animation-delay: .95s; }
  .hero-mark { animation: appear 1s ease both; animation-delay: 1.35s; }
  @keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
  /* Words are readable from the first frame: they settle into place as the tracking tightens */
  @keyframes rise { from { transform: translateY(0.35em); letter-spacing: 0.32em; } to { transform: none; letter-spacing: 0.14em; } }
  @keyframes appear { from { opacity: 0.35; transform: scale(0.9); } to { opacity: 1; transform: none; } }
}
/* Safety net: if animations are delayed (background tab, low-power mode), show the final state anyway */
.hero-done .panel img, .hero-done .panel .word, .hero-done .hero-mark { animation: none !important; opacity: 1; transform: none; }

/* ---------- Home: responsive ---------- */
@media (max-width: 64rem) {
  body .tiles { grid-template-columns: repeat(2, 1fr); }
  body .tile:nth-child(n) { margin-top: 0; }
  body .tile:nth-child(even) { margin-top: 2.5rem; }
  body .gift-strip { grid-template-columns: repeat(2, 1fr); }
  body .review-list { grid-template-columns: 1fr; max-width: 44rem; }
}
@media (max-width: 48rem) {
  body .triptych { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); height: calc(100svh - var(--header-h)); min-height: 34rem; }
  .panel + .panel { border-left: 0; border-top: 1px solid rgb(255 255 255 / 0.35); }
  .panel::after { background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0) 55%); }
  body .panel .word { padding-bottom: 0.9rem; font-size: clamp(1.75rem, 9vw, 2.5rem); }
  .panel:nth-child(1) img { object-position: 50% 78%; }
  .panel:nth-child(2) img { object-position: 50% 62%; }
  .hero-mark { left: auto; right: 1rem; translate: none; top: 1rem; width: 3rem; }
  body .michelle-grid, body .founder-cols { grid-template-columns: 1fr; }
  .michelle-side { position: static; }
  .michelle-side img { max-width: none; aspect-ratio: 4 / 3.4; }
  body .barn-photos { grid-template-columns: 1fr 1fr; }
  .barn-photos > :nth-child(3) { display: none; }
  .barn-photos img { aspect-ratio: 3 / 4 !important; }
  body .barn-card { margin-top: -2rem; width: calc(100% - 1.5rem); }
  body .timeline { grid-template-columns: 1fr; }
  .timeline p, .timeline p + p { padding: 1.25rem 0; border-left: 0; border-bottom: 1px solid var(--pebble); display: grid; grid-template-columns: 6.5rem 1fr; align-items: baseline; }
  .timeline .year { font-size: 2.5rem; }
  .timeline .what { margin: 0; }
  body .mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic .wide { grid-column: span 2; }
  body .ceramics { grid-auto-columns: 70%; }
}

/* =====================================================================
   Shared sections (used on several pages)
   ===================================================================== */
.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section--paper { background: var(--paper); }
.section--blush { background: var(--blush); --hl: var(--clay); }
.section--clay { background: var(--clay); }
.section--pebble { background: var(--pebble); }
.section h2.is-style-display { font-size: var(--step-4); }
body .centered, body .has-text-align-center { text-align: center; }
:root body :where(.section-head, .exp, .exp-body, .facts, .diary, .diary-row, .diary-row > div, .includes, .includes > div, .process, .step, .step > div, .faq, .faq > div, .accordion, .ev-hero, .ev-hero > div, .photos, .experiences, .closing-photo) > * { margin: 0; }
.eyebrow-line { font-size: var(--step-1); font-style: italic; font-weight: 300; }
body .eyebrow-line + h1 { margin-top: 0.75rem; }

/* From clay to cup */
body .clay-to-cup h2 { margin-bottom: 2rem; }
body .process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; position: relative; counter-reset: p; }
.process::before { content: ""; position: absolute; top: 2.75rem; left: 10%; right: 10%; border-top: 1px dashed var(--ash); }
.process .step { position: relative; text-align: center; counter-increment: p; }
.process .disc { width: 5.5rem; height: 5.5rem; margin: 0 auto; border-radius: 50%; background: var(--linen); border: 1px solid var(--ink); display: grid; place-items: center; }
.section--paper .process .disc { background: var(--paper); }
.process svg { width: 2.75rem; height: 2.75rem; fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
/* :root raises this above core's "first child has no top margin" rule. */
:root body .process h3 { margin-top: 1rem; font-size: var(--step-1); font-weight: 500; }
.process h3::before { content: counter(p) ". "; font-weight: 300; }
body .process p { margin-top: 0.35rem; font-size: 0.9375rem; max-width: 20ch; margin-inline: auto; }
body .process-note { margin-top: 2.5rem; text-align: center; font-size: var(--step-1); font-weight: 300; }
@media (max-width: 60rem) {
  body .process { grid-template-columns: 1fr; gap: 1.5rem; }
  .process::before { top: 0; bottom: 0; left: 2.75rem; right: auto; border-top: 0; border-left: 1px dashed var(--ash); }
  body .process .step { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.25rem; align-items: center; text-align: left; }
  :root body .process h3 { margin-top: 0; }
  body .process p { margin-inline: 0; max-width: none; }
}

/* Questions */
body .faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
body .faq .faq-intro { margin-top: 1rem; }
.accordion .wp-block-details { border-top: 1px solid var(--pebble); }
.accordion .wp-block-details:last-child { border-bottom: 1px solid var(--pebble); }
.accordion summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; cursor: pointer; font-weight: 600; list-style: none; transition: color .2s; }
.accordion summary:hover { color: var(--ash-deep); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 1.4rem; font-weight: 300; line-height: 1; }
.accordion details[open] summary::after { content: "\2212"; }
body .accordion .wp-block-details > p { margin: 0; padding-bottom: 1.25rem; font-size: 0.9375rem; }
@media (max-width: 52rem) { body .faq { grid-template-columns: 1fr; } }

/* Closing photo band */
body .closing-photo { position: relative; min-height: 28rem; display: grid; place-items: center; text-align: center; color: var(--paper); overflow: hidden; }
.closing-photo .wp-block-image { position: absolute !important; inset: 0; }
.closing-photo img { width: 100%; height: 100%; object-fit: cover; }
.closing-photo::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.38); }
.closing-photo .wrap { position: relative; z-index: 1; padding-block: 4rem; }
.closing-photo h2 { font-size: var(--step-6); }
body .closing-photo p { margin-top: 1.25rem; font-size: var(--step-1); }

/* =====================================================================
   Pottery Events
   ===================================================================== */
body .ev-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; padding-block: clamp(2rem, 5vw, 4rem) clamp(3.5rem, 8vw, 6rem); }
.ev-hero h1 { font-size: var(--step-5); }
body .ev-hero .tag { margin-top: 1rem; font-size: var(--step-2); font-weight: 300; line-height: 1.35; }
body .ev-hero .intro-text { margin-top: 1.5rem; max-width: 40rem; }
body .ev-hero .intro-text > * { margin: 0; }
body .ev-hero .intro-text > * + * { margin-top: 0.9rem; }
body .ev-hero .actions { margin-top: 2rem; justify-content: flex-start; }
body .ev-hero .photos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: start; }
.ev-hero .photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
body .ev-hero .photos > :last-child { margin-top: 3rem; }

body .exp { display: grid; grid-template-columns: 5fr 7fr; align-items: stretch; }
body .exp + .exp { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
body .exp:nth-child(even) { grid-template-columns: 7fr 5fr; }
.exp:nth-child(even) .exp-img { order: 2; }
.exp-img { overflow: hidden; }
.exp-img img { width: 100%; height: 100%; min-height: 24rem; object-fit: cover; transition: transform .9s ease; }
.exp:hover .exp-img img { transform: scale(1.03); }
.exp-body { padding: clamp(1.75rem, 5vw, 3.5rem); background: var(--paper); }
.exp:nth-child(2) .exp-body { background: var(--blush); --hl: var(--clay); }
.exp:nth-child(3) .exp-body { background: var(--clay); --ash-deep: #3d393a; }
.exp:nth-child(4) .exp-body { background: var(--pebble); --ash-deep: #3d393a; }
.exp h2 { font-size: var(--step-4); font-weight: 300; line-height: 1.15; letter-spacing: -0.005em; }
body .exp .sub { margin-top: 0.5rem; font-size: var(--step-1); font-style: italic; font-weight: 300; }
body .exp-body > p:not(.sub) { margin-top: 1rem; max-width: 38rem; }
body .exp h3 { margin-top: 1.5rem; font-size: 0.9375rem; font-weight: 600; }
body .exp .learn { margin-top: 0.75rem; padding: 0; list-style: none; counter-reset: l; display: grid; gap: 0.6rem; }
.learn li { counter-increment: l; position: relative; padding-left: 2.75rem; font-size: 0.9375rem; }
.learn li::before { content: "0" counter(l); position: absolute; left: 0; top: -0.1em; font-weight: 300; font-size: 1.125rem; line-height: 1.5; }
body .exp .ticks { margin-top: 0.6rem; padding-left: 1.1rem; font-size: 0.9375rem; }
.ticks li + li { margin-top: 0.3rem; }
body .exp .rituals { margin-top: 1rem; padding: 0; list-style: none; display: grid; gap: 0.9rem; font-size: 0.9375rem; }
body .exp .rituals strong { display: block; font-weight: 600; }
body .exp .facts { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; font-size: 0.8125rem; color: var(--ash-deep); line-height: 1.5; }
.facts strong { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
body .exp .actions { margin-top: 1.75rem; justify-content: flex-start; gap: 0.75rem; }

body .diary { border-top: 1px solid var(--ink); }
body .diary-row { display: grid; grid-template-columns: 8rem 1fr 12rem 11rem; gap: 1.5rem; align-items: center; padding-block: 1.4rem; border-bottom: 1px solid var(--pebble); transition: background-color .2s; }
.diary-row:hover { background: rgb(255 255 255 / 0.55); }
.diary .date { display: grid; grid-template-columns: auto 1fr; column-gap: 0.6rem; align-items: baseline; line-height: 1; }
.diary .date .day { grid-column: 1 / -1; font-size: var(--step--1); color: var(--ash-deep); margin-bottom: 0.35rem; }
.diary .date .num { font-size: 3.25rem; font-weight: 200; }
.diary .date .mon { font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-wide); }
.diary h3 { font-size: var(--step-1); font-weight: 500; line-height: 1.3; }
.diary .detail { font-size: 0.9375rem; color: var(--ash-deep); }
.diary .avail { font-size: 0.9375rem; }
.diary .avail strong { display: block; font-size: var(--step-1); font-weight: 500; }
.diary .action .wp-block-button, .diary .action .wp-block-button__link { width: 100%; }
body .more-dates { margin-top: 1.5rem; }

body .includes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem; margin-top: 2rem; }
.includes > div { text-align: center; font-weight: 500; font-size: 0.9375rem; }
.includes svg { display: block; width: 3.5rem; height: 3.5rem; margin: 0 auto 0.9rem; fill: none; stroke: var(--ink); stroke-width: 1.2; }

@media (max-width: 64rem) {
  body .diary-row { grid-template-columns: 6.5rem 1fr; }
  .diary .avail, .diary .action { grid-column: 2; }
  .diary .action .wp-block-button, .diary .action .wp-block-button__link { width: auto; }
  body .includes { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 52rem) {
  body .ev-hero, body .exp, body .exp:nth-child(even) { grid-template-columns: 1fr; }
  .exp:nth-child(even) .exp-img { order: 0; }
  .exp-img img { min-height: 0; aspect-ratio: 4 / 3.2; }
}
@media (max-width: 40rem) {
  body .diary-row { grid-template-columns: 1fr auto; gap: 0.5rem 1rem; }
  .diary .date { grid-column: 1 / -1; display: flex; gap: 0.5rem; align-items: baseline; }
  .diary .date .day { order: 3; margin: 0 0 0 0.25rem; font-size: 0.875rem; }
  .diary .date .num { font-size: 2.25rem; }
  .diary-row > div { grid-column: 1 / -1; }
  .diary .avail { grid-column: 1; }
  .diary .avail strong { display: inline; margin-right: 0.5rem; }
  .diary .action { grid-column: 2; }
  body .includes { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   Forms (enquiry forms on Contact and Corporate)
   ===================================================================== */
.form { display: grid; gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.875rem; font-weight: 600; }
.input, .select, .textarea {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--ash); border-radius: 2px;
}
.textarea { min-height: 8rem; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9375rem; }
.check input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; accent-color: var(--ink); }
.form .wp-element-button { border: 1px solid var(--ink); cursor: pointer; font-family: inherit; }
.form .wp-element-button:hover { background: transparent; color: var(--ink); }
.form-note { font-size: 0.8125rem; color: var(--ash-deep); }
.form-success { padding: 1.25rem 1.5rem; background: var(--paper); border-left: 3px solid var(--ink); }
.form-error { padding: 1rem 1.25rem; margin-bottom: 1rem; background: var(--paper); border-left: 3px solid #8a1c1c; }
.ng-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 40rem) { .form-row { grid-template-columns: 1fr; } }

/* Voucher card graphic */
.voucher-card {
  position: relative; aspect-ratio: 85 / 55; border-radius: 14px; padding: 7%;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--paper); color: var(--ink); overflow: hidden;
}
.voucher-card .v-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.voucher-card .mark { width: 18%; height: auto; aspect-ratio: 1; }
.voucher-card .v-name { font-size: clamp(0.75rem, 1.4vw, 0.9375rem); letter-spacing: 0.18em; text-transform: uppercase; text-align: right; }
.voucher-card .v-amount { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 200; line-height: 1; }
.voucher-card--blush { background: var(--blush); }
.voucher-card--clay { background: var(--clay); }
.voucher-card--ash { background: var(--ash); } /* ink on ash is 7.2:1 */

/* =====================================================================
   Vouchers
   ===================================================================== */
body .vouchers-list { padding-top: 0; }
:root body :where(.vlist, .vrow, .vrow > div, .steps, .steps > div) > * { margin: 0; }
body .vlist { display: grid; gap: clamp(3rem, 7vw, 5rem); }
body .vrow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.vrow:nth-child(even) .vart { order: 2; }
.vart { padding: clamp(1.5rem, 4vw, 3rem); background: var(--paper); }
.vrow:nth-child(2) .vart { background: var(--blush); }
.vrow:nth-child(3) .vart { background: var(--pebble); }
.vart .voucher-card { max-width: 28rem; margin-inline: auto; transform: rotate(-3deg); box-shadow: 0 22px 48px -28px rgb(95 89 90 / 0.7); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.vrow:hover .vart .voucher-card { transform: rotate(0deg) translateY(-6px); }
.vrow h2 { font-size: var(--step-4); font-weight: 300; line-height: 1.15; letter-spacing: -0.005em; }
body .vrow .vprice { margin-top: 0.75rem; font-size: var(--step-2); }
body .vrow p:not(.vprice) { margin-top: 1rem; }
body .vrow .detail { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--ash-deep); }
body .vrow .wp-block-buttons { margin-top: 1.75rem; }
body .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: step; margin-top: 2rem; }
.steps > div { counter-increment: step; border-top: 1px solid var(--ink); padding-top: 1.25rem; }
.steps > div::before { content: counter(step); display: block; font-size: 3rem; font-weight: 200; line-height: 1; margin-bottom: 0.75rem; }
.steps h3 { font-size: var(--step-1); font-weight: 500; }
body .steps p { margin-top: 0.4rem; font-size: 0.9375rem; }
body .buy .wrap > p { margin-top: 1rem; max-width: 42rem; font-size: var(--step-1); line-height: 1.5; }
@media (max-width: 52rem) {
  body .vrow, body .steps { grid-template-columns: 1fr; }
  .vrow:nth-child(even) .vart { order: 0; }
}

/* =====================================================================
   Corporate Clay & Coaching
   ===================================================================== */
:root body :where(.c-hero, .c-intro, .c-intro > div, .ways, .way, .journey, .teams, .pillars, .pillars > div, .meet, .meet > div, .c-barn, .c-barn > div, .pics, .quotes, .quotes > div, .cta, .cta > div) > * { margin: 0; }
body .c-hero { position: relative; min-height: min(calc(100svh - var(--header-h)), 46rem); display: flex; align-items: flex-end; color: var(--paper); overflow: hidden; }
.c-hero .wp-block-image { position: absolute !important; inset: 0; }
.c-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.c-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.1) 70%); }
.c-hero .wrap { position: relative; z-index: 1; padding-block: clamp(3rem, 8vw, 5rem); }
.c-hero h1 { font-size: var(--step-6); max-width: 14ch; }
body .c-hero .tag { margin-top: 1rem; font-size: var(--step-2); font-weight: 300; }
body .c-hero .sub { margin-top: 0.5rem; max-width: 46ch; font-size: var(--step-1); line-height: 1.5; }
body .c-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: end; }
body .c-intro p + p { margin-top: 1rem; }
body .section .lead { margin-top: 0.75rem; margin-bottom: 2rem; font-size: var(--step-1); }
body .ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
body .way { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--paper); }
.way:nth-child(2) { background: var(--blush); --hl: var(--clay); }
.way:nth-child(3) { background: var(--clay); --hl: var(--linen); }
.way .word { font-size: var(--step-3); font-weight: 200; letter-spacing: var(--track-wide); text-transform: uppercase; line-height: 1; }
body .way h3 { margin-top: 1.5rem; font-size: var(--step-2); font-weight: 400; line-height: 1.25; }
body .way .for { margin-top: 0.75rem; font-weight: 600; }
body .way > p:not(.word):not(.for):not(.more) { margin-top: 0.75rem; font-size: 0.9375rem; }
body .way h4 { margin-top: 1.5rem; font-size: 0.8125rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
body .tags, body .creds { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; list-style: none; }
.tags li { padding: 0.25rem 0.75rem; border: 1px solid rgb(0 0 0 / 0.35); border-radius: 2rem; font-size: 0.8125rem; }
body .way .more { margin-top: auto; padding-top: 1.5rem; }

.shape { background: var(--ink); color: var(--linen); --hl: #333; }
.shape h2.is-style-display { font-size: var(--step-5); }
body .shape .tag { margin-top: 0.75rem; font-size: var(--step-2); font-weight: 300; font-style: italic; }
body .shape .body { margin-top: 1.5rem; max-width: 44rem; color: var(--pebble); }
body .journey { margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.journey::before { content: ""; position: absolute; left: 10%; right: 10%; top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid rgb(236 233 230 / 0.4); }
.journey p { position: relative; text-align: center; padding-inline: 0.5rem; }
.journey .ring { width: clamp(5rem, 10vw, 7rem); aspect-ratio: 1; margin: 0 auto; border: 1px solid var(--linen); border-radius: 50%; display: grid; place-items: center; background: var(--ink); font-size: clamp(0.75rem, 1.2vw, 0.9375rem); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--linen); }
.journey p:last-child .ring { background: var(--linen); color: var(--ink); }
.journey .what { display: block; margin-top: 1rem; font-size: 0.9375rem; color: var(--pebble); }
body .shape .get-started { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.shape :focus-visible { outline-color: var(--linen); }

.teams h2.is-style-display { font-size: var(--step-4); }
body .teams .eyebrow-line + h2 { margin-top: 0.75rem; }
body .teams .lead-text { margin-top: 1rem; max-width: 46rem; }
body .pillars { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.pillars > div { border-top: 1px solid var(--ink); padding-top: 1.25rem; }
.pillars h3 { font-size: var(--step-1); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
body .pillars p { margin-top: 0.6rem; font-size: 0.9375rem; }
body .teams .note { margin-top: 2.5rem; max-width: 46rem; font-size: var(--step-1); font-weight: 300; line-height: 1.5; }

body .meet { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.monogram { aspect-ratio: 1; max-width: 26rem; display: grid; place-items: center; background: var(--blush); border-radius: 50%; }
.monogram svg { width: 42%; height: auto; aspect-ratio: 1; }
.meet h2.is-style-display { font-size: var(--step-4); }
body .meet .role { margin-top: 0.75rem; font-weight: 600; }
body .meet > div > p:not(.role) { margin-top: 1rem; }
body .meet .creds { margin-top: 1.5rem; gap: 0.5rem; }
.creds li { padding: 0.4rem 0.9rem; background: var(--paper); font-size: 0.875rem; font-weight: 500; }

body .c-barn { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
body .c-barn .pics { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.c-barn .pics img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
body .c-barn .pics > :last-child { margin-top: 2.5rem; }
.c-barn h2.is-style-display { font-size: var(--step-4); }
body .c-barn .tag { margin-top: 0.75rem; font-size: var(--step-2); font-weight: 300; font-style: italic; line-height: 1.35; }
body .c-barn > div > p:not(.tag) { margin-top: 1rem; }

body .quotes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2rem; }
.quotes > div { padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--linen); }
.quotes .tagline { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; }
body .quotes .quote { margin-top: 1rem; font-size: var(--step-2); font-weight: 300; line-height: 1.4; }
body .quotes .stars { margin-top: 1.25rem; font-size: 0.875rem; }

body .cta { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.cta h2.is-style-display { font-size: var(--step-4); }
body .cta > div > p { margin-top: 1rem; }
body .cta .body { font-size: var(--step-1); line-height: 1.5; }

@media (max-width: 60rem) {
  body .ways, body .pillars { grid-template-columns: 1fr; }
  body .journey { grid-template-columns: 1fr; gap: 1.25rem; }
  .journey::before { left: calc(clamp(5rem, 10vw, 7rem) / 2); right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1px solid rgb(236 233 230 / 0.4); }
  .journey p { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; text-align: left; padding: 0; }
  .journey .what { margin: 0; }
}
@media (max-width: 52rem) {
  body .c-intro, body .meet, body .c-barn, body .quotes, body .cta { grid-template-columns: 1fr; }
  .monogram { max-width: 12rem; }
}

/* =====================================================================
   Contact Us
   ===================================================================== */
:root body :where(.contact, .contact > section, .card, .route) > * { margin: 0; }
body .contact { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem); }
.contact h1 { font-size: var(--step-5); }
body .contact .form, body .contact .form-success, body .contact .form-error { margin-top: 2rem; }
.card { padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--paper); }
.card h2 { font-size: var(--step-2); font-weight: 400; }
body .card .address { margin-top: 1rem; font-size: var(--step-1); line-height: 1.5; }
body .card .contact-line { margin-top: 1rem; font-size: 0.8125rem; font-weight: 600; color: var(--ash-deep); }
.card .contact-line a { font-size: var(--step-0); font-weight: 500; color: var(--ink); }
body .card .actions { margin-top: 1.75rem; justify-content: flex-start; gap: 0.75rem; }
body .way-intro { margin-top: 1.5rem; max-width: 46rem; }
body .route { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 1.5rem; }
.route img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.route figcaption { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--ash-deep); text-align: left; }
@media (max-width: 52rem) { body .contact { grid-template-columns: 1fr; } }

/* =====================================================================
   Terms & Conditions, Privacy Policy
   ===================================================================== */
:root body :where(.terms, .toc, .text-page) > * { margin: 0; }
body .terms { display: grid; grid-template-columns: 16rem 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; padding-bottom: clamp(3.5rem, 8vw, 6rem); }
body .text-page { padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.toc { position: sticky; top: calc(var(--header-h) + 1.5rem); font-size: 0.9375rem; }
body .toc h2.toc-title { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.75rem; text-transform: none; letter-spacing: 0; }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc a { display: block; padding: 0.35rem 0 0.35rem 0.9rem; border-left: 1px solid var(--pebble); text-decoration: none; color: var(--ash-deep); transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--ink); border-left-color: var(--ink); }
.terms .prose h2 { scroll-margin-top: calc(var(--header-h) + 1rem); padding-top: 2rem; border-top: 1px solid var(--pebble); }
body .terms .prose > h2 { margin-top: 2rem; }
body .terms .prose > h2:first-child { margin-top: 0; padding-top: 0; border: 0; }
.prose strong { font-weight: 600; }
body .prose > .callout { margin-top: 2.5rem; padding: 1.5rem; background: var(--paper); }
@media (max-width: 52rem) { body .terms { grid-template-columns: 1fr; } .toc { position: static; } }

/* =====================================================================
   Journal
   ===================================================================== */
:root body :where(.journal, .journal-list, .posts > li, .post-text, .post-text .meta, .journal-post article, .post-head, .post-head .meta) > * { margin: 0; }
body .journal-list { padding-bottom: clamp(3.5rem, 8vw, 6rem); }
body .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); list-style: none; padding: 0; margin: 0; }
.posts > li { position: relative; }
.posts > li:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.posts .ph { overflow: hidden; }
.posts .ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s ease; }
.posts > li:first-child .ph img { aspect-ratio: 4 / 3; }
.posts > li:hover .ph img { transform: scale(1.03); }
body .posts .meta { margin-top: 1rem; display: flex; gap: 0.4rem; font-size: 0.8125rem; color: var(--ash-deep); }
.posts > li:first-child .meta { margin-top: 0; }
.posts .meta > * + *::before { content: "· "; }
.posts .meta a { color: inherit; text-decoration: none; position: relative; z-index: 1; }
body .posts h2 { margin-top: 0.4rem; font-size: var(--step-2); font-weight: 400; line-height: 1.25; text-transform: none; letter-spacing: 0; }
.posts > li:first-child h2 { font-size: var(--step-4); }
.posts h2 a { text-decoration: none; }
.posts h2 a::after { content: ""; position: absolute; inset: 0; } /* the whole card is the link */
.posts > li:hover h2 a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
body .posts .wp-block-post-excerpt { margin-top: 0.6rem; font-size: 0.9375rem; }
.posts .wp-block-post-excerpt__excerpt { margin: 0; }
.posts .wp-block-post-excerpt__more-text { margin: 1rem 0 0; }
.posts .wp-block-post-excerpt__more-link { font-weight: 600; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 0.3em; }
.journal .wp-block-query-pagination { margin-top: 2.5rem; }
.follow { text-align: center; }
.follow h2.is-style-display { font-size: var(--step-4); }
body .follow p { margin: 1rem auto 0; max-width: 40ch; }
body .follow .actions { margin-top: 1.5rem; }
@media (max-width: 52rem) {
  body .posts { grid-template-columns: 1fr; }
  .posts > li:first-child { grid-template-columns: 1fr; }
  .posts > li:first-child .meta { margin-top: 1rem; }
}

/* A journal post */
body .post-head { padding-block: clamp(2rem, 5vw, 3.5rem) 2rem; max-width: 50rem; }
.post-head .crumbs { font-size: 0.875rem; color: var(--ash-deep); margin-bottom: 1.25rem !important; }
.post-head .crumbs a { color: inherit; text-decoration: none; }
.post-head .crumbs a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.post-head h1 { font-size: var(--step-5); font-weight: 300; line-height: 1.15; text-transform: none; letter-spacing: 0; }
body .post-head .meta { margin-top: 1rem; display: flex; gap: 0.4rem; color: var(--ash-deep); font-size: 0.9375rem; }
.post-head .meta > * + *::before { content: "· "; }
.post-img img { width: 100%; max-height: 38rem; aspect-ratio: 16 / 9; object-fit: cover; }
body .post-body { padding-block: clamp(2.5rem, 6vw, 4rem); max-width: 42rem; margin-inline: auto; font-size: 1.125rem; line-height: 1.75; }
body .post-body > * + * { margin-top: 1.25rem; }
body .post-body > .wp-block-buttons { margin-top: 2rem; }
body .journal-post .back { padding-bottom: clamp(3.5rem, 8vw, 6rem); max-width: 42rem; margin-inline: auto; border-top: 1px solid var(--pebble); padding-top: 1.5rem; }

/* =====================================================================
   Shop (WooCommerce): shop page, categories, product cards, product page
   ===================================================================== */
:root body :where(.shop, .shop #products > .wrap, .cats, .cat-tile, .toolbar, .promise, .promise > div, .product-page > .wrap, .pdp, .pdp-media, .pdp-info, .related .wrap, .product-grid) > * { margin: 0; }

/* Category tiles */
body .cats { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(0.75rem, 2vw, 1.5rem); }
.cat-tile { position: relative; display: flex; align-items: flex-end; min-height: clamp(16rem, 30vw, 24rem); overflow: hidden; color: var(--paper); }
.cat-tile .wp-block-image { position: absolute !important; inset: 0; }
.cat-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cat-tile:hover img { transform: scale(1.03); }
.cat-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0) 55%); pointer-events: none; }
body .cat-tile > p { position: relative; z-index: 2; padding: 1.5rem; }
.cat-tile a { color: inherit; text-decoration: none; }
.cat-tile a::after { content: ""; position: absolute; inset: 0; z-index: 3; } /* the whole tile is the link */
.cat-tile strong { display: block; font-size: var(--step-3); font-weight: 300; text-transform: uppercase; letter-spacing: var(--track-wide); line-height: 1.1; }
.cat-tile span { display: block; margin-top: 0.4rem; font-size: 0.9375rem; }
.cat-tile--voucher { background: var(--blush); color: var(--ink); }
.cat-tile--voucher::after { display: none; }
.cat-tile--voucher .voucher-card { position: absolute; width: 70%; left: 15%; top: 14%; transform: rotate(-6deg); box-shadow: 0 18px 40px -26px rgb(95 89 90 / 0.7); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.cat-tile--voucher:hover .voucher-card { transform: rotate(-2deg) translateY(-4px); }
.voucher-card--paper { background: var(--paper); }

/* Filter chips, sorting, count */
body .toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.4rem 1.1rem; border: 1px solid var(--ink); border-radius: 2rem; font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: background-color .2s, color .2s; }
.chip:hover { background: rgb(0 0 0 / 0.06); }
.chip[aria-current="page"] { background: var(--ink); color: var(--paper); }
.toolbar .woocommerce-ordering select, .toolbar select { min-height: 2.6rem; padding: 0.4rem 2rem 0.4rem 0.9rem; font: inherit; font-size: 0.9375rem; border: 1px solid var(--ash); border-radius: 2px; background-color: var(--paper); }
.shop .woocommerce-result-count, .shop .wc-block-product-results-count { font-size: 0.875rem; color: var(--ash-deep); margin-bottom: 1.25rem; }
body .shop-list { padding-top: 0; }

/* Product cards */
body .product-grid .wc-block-product-template { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.product-grid .wc-block-product { display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: auto !important; margin: 0 !important; }
.product-grid .wc-block-product > * { margin: 0; }
.product-grid .wc-block-components-product-image { width: 100%; overflow: hidden; background: var(--paper); margin: 0 !important; }
.product-grid .wc-block-components-product-image img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; transition: transform .6s ease; }
.product-grid .wc-block-product:hover img { transform: scale(1.03); }
body .product-grid .wp-block-post-title { margin-top: 0.85rem; font-size: 0.9875rem; font-weight: 500; line-height: 1.4; text-align: left; text-transform: none; letter-spacing: 0; }
.product-grid .wp-block-post-title a { text-decoration: none; }
.product-grid .wc-block-product:hover .wp-block-post-title a { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
body .product-grid .wc-block-components-product-price, body .product-grid .wp-block-woocommerce-product-price { margin-top: 0.2rem; font-size: var(--step-0); font-weight: 500; text-align: left; }
body .product-grid .wp-block-button.wc-block-components-product-button { margin-top: 0.9rem; justify-content: flex-start; align-items: flex-start; }
.product-grid .wc-block-components-product-button .wp-block-button__link { min-height: 2.6rem; padding: 0.5rem 1rem; font-size: 0.875rem; width: auto; }
.product-grid .wc-block-components-product-button .added_to_cart { display: block; margin-top: 0.5rem; font-size: 0.8125rem; font-weight: 600; }
.wp-block-query-pagination { margin-top: 2.5rem; }
@media (max-width: 64rem) { body .product-grid .wc-block-product-template { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 48rem) { body .product-grid .wc-block-product-template { grid-template-columns: repeat(2, 1fr); } }

/* Breadcrumbs */
.woocommerce-breadcrumb, .wc-block-breadcrumbs { font-size: 0.875rem; color: var(--ash-deep); padding-top: 1.5rem; }
.woocommerce-breadcrumb a, .wc-block-breadcrumbs a { color: inherit; text-decoration: none; }
.woocommerce-breadcrumb a:hover, .wc-block-breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.page-head .wc-block-breadcrumbs, .page-head .woocommerce-breadcrumb { padding-top: 0; margin-bottom: 1.25rem; }

/* Made by hand / delivery / gift it */
body .promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.promise h3 { font-size: var(--step-1); font-weight: 500; }
body .promise p { margin-top: 0.4rem; font-size: 0.9375rem; }

/* Product page */
body .pdp { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3.5rem, 8vw, 6rem); }
.pdp-media { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.pdp-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper); }
.pdp-media .main { margin: 0; }
.voucher-art { display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--blush); }
.voucher-art .voucher-card { width: 78%; transform: rotate(-4deg); box-shadow: 0 22px 48px -28px rgb(95 89 90 / 0.7); }
body .pdp h1 { font-size: var(--step-4); font-weight: 300; line-height: 1.2; letter-spacing: -0.005em; text-transform: none; }
body .pdp .wc-block-components-product-price, body .pdp .wp-block-woocommerce-product-price { margin-top: 1rem; font-size: var(--step-2); font-weight: 400; }
body .pdp .desc { margin-top: 1.5rem; max-width: 40rem; }
.pdp .desc p { margin: 0; }
body .pdp .wp-block-add-to-cart-form, body .pdp .wc-block-add-to-cart-form { margin-top: 2rem; }
.pdp form.cart { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0; }
.pdp form.cart .single_add_to_cart_button { flex: 1; min-width: 12rem; min-height: 3rem; border: 1px solid var(--ink); font-family: inherit; cursor: pointer; }
.pdp form.cart .single_add_to_cart_button:hover { background: transparent; color: var(--ink); }
.pdp .quantity { display: inline-flex; align-items: center; border: 1px solid var(--ash); border-radius: 2px; background: var(--paper); }
.pdp .quantity input.qty { width: 3rem; height: 2.9rem; border: 0; text-align: center; font: inherit; font-weight: 600; background: none; -moz-appearance: textfield; }
.pdp .quantity input.qty::-webkit-outer-spin-button, .pdp .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; }
.pdp .quantity button, .pdp .wc-block-components-quantity-selector__button { width: 2.75rem; height: 2.9rem; border: 0; background: none; font-size: 1.25rem; cursor: pointer; color: var(--ink); }
.pdp .quantity button:hover { background: var(--linen); }
.pdp table.variations { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.pdp table.variations th, .pdp table.variations td { display: block; padding: 0; text-align: left; }
.pdp table.variations label { font-size: 0.875rem; font-weight: 600; }
.pdp table.variations select { width: 100%; height: auto; min-height: 3rem; margin-top: 0.4rem; padding: 0.6rem 2.25rem 0.6rem 0.9rem; line-height: 1.4; font: inherit; border: 1px solid var(--ash); border-radius: 2px; background-color: var(--paper); }
.pdp .reset_variations { font-size: 0.8125rem; }
.pdp .single_variation_wrap { width: 100%; }
.pdp .woocommerce-variation-availability, .pdp .stock { font-size: 0.875rem; }
.pdp p.stock { margin-top: 0.9rem; display: flex; align-items: center; gap: 0.5rem; }
.pdp p.stock::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ok, #3b7a4a); flex: none; }
.pdp p.stock.low, .pdp p.stock.out-of-stock { --ok: #a86a1c; }
body .pdp .accordion { margin-top: 2.5rem; }
.accordion details { border-top: 1px solid var(--pebble); }
.accordion details:last-child { border-bottom: 1px solid var(--pebble); }
.accordion .panel-body { padding-bottom: 1.25rem; font-size: 0.9375rem; }
.accordion .panel-body p { margin: 0; }
body .related .section-head { margin-bottom: 2rem; }

@media (max-width: 52rem) {
  body .pdp { grid-template-columns: 1fr; }
  .pdp-media { position: static; margin-inline: calc(-1 * var(--gutter)); }
}
@media (max-width: 48rem) {
  body .cats { grid-template-columns: 1fr 1fr; }
  .cats .cat-tile:first-child { grid-column: 1 / -1; }
  body .promise { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* Product card buttons: outlined, like the mockup */
.product-grid .wc-block-components-product-button .wp-block-button__link { border: 1px solid var(--ink) !important; border-radius: 2px; background: transparent !important; color: var(--ink) !important; }
.product-grid .wc-block-components-product-button .wp-block-button__link:hover { background: var(--ink) !important; color: var(--paper) !important; }
/* Quantity stepper: [ − 1 + ] */
.pdp .wc-block-components-quantity-selector { display: inline-flex !important; align-items: stretch; width: auto !important; min-width: 0; height: auto; margin: 0; }
.pdp .wc-block-components-quantity-selector::after { display: none !important; }
.pdp .wc-block-components-quantity-selector__button { position: static !important; order: 0 !important; display: grid; place-items: center; width: 2.75rem !important; min-width: 0; height: 2.9rem; padding: 0; opacity: 1; }
.pdp .wc-block-components-quantity-selector__input { order: 0 !important; width: 3rem !important; min-width: 0; height: 2.9rem; padding: 0; margin: 0; box-shadow: none !important; }
.pdp .wc-block-components-quantity-selector { height: 2.9rem; }
.pdp .wc-block-components-quantity-selector__button, .pdp .wc-block-components-quantity-selector__input { height: 100% !important; line-height: 1 !important; padding: 0 !important; }
@media (max-width: 48rem) {
  .cat-tile strong { font-size: clamp(1.1rem, 5vw, 1.6rem); letter-spacing: 0.1em; }
  body .cat-tile > p { padding: 1rem; }
}
/* WooCommerce's own select styles are very specific; these win so the text isn't clipped. */
.pdp form.cart .variations select { width: 100% !important; min-width: 0 !important; margin: 0.4rem 0 0 !important; padding: 0 2.5rem 0 0.9rem !important; height: 3rem !important; line-height: 3rem !important; font-size: 1rem !important; border: 1px solid var(--ash) !important; border-radius: 2px; background-color: var(--paper) !important; }
.pdp form.cart .variations select:focus { outline: 2px solid var(--ink); outline-offset: 0; }

/* =====================================================================
   Basket and checkout (WooCommerce blocks)
   ===================================================================== */
:root body :where(.basket-page, .basket-page > .wrap) > * { margin: 0; }
.basket-page { padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.basket-page .page-head .crumbs { font-size: 0.875rem; color: var(--ash-deep); margin-bottom: 1.25rem; }
.basket-page .page-head .crumbs a { color: inherit; text-decoration: none; }
.basket-page .page-head .crumbs a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.basket-page .wp-block-woocommerce-cart, .basket-page .wp-block-woocommerce-checkout { max-width: none; margin: 0; }
.basket-page .wc-block-components-sidebar-layout { margin: 0; }

/* Order summary: a white card */
.basket-page .wc-block-components-sidebar { padding: 1.5rem !important; background: var(--paper); border: 0 !important; align-self: flex-start; }
.basket-page .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block { border: 0; }
.basket-page .wc-block-cart__totals-title, .basket-page .wc-block-components-checkout-order-summary__title-text { font-size: var(--step-1) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; }
.basket-page .wc-block-components-totals-wrapper { border-color: var(--pebble) !important; padding-inline: 0 !important; }
.basket-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.basket-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: var(--step-1); font-weight: 600; }

/* Buttons: brand black, square corners */
.basket-page .wc-block-components-button:not(.is-link) { min-height: 3rem; border: 1px solid var(--ink); border-radius: 2px; background: var(--ink); color: var(--paper); font-family: inherit; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.03em; transition: background-color .25s, color .25s; }
.basket-page .wc-block-components-button:not(.is-link):hover { background: transparent; color: var(--ink); }
.basket-page .wc-block-cart__submit-button { width: 100%; }

/* Gift voucher field (PW Gift Cards): input and Apply side by side */
.basket-page :is(div, p, form):has(> .pwgc-apply-gift-card-button) { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; }
.basket-page :is(div, p, form):has(> .pwgc-apply-gift-card-button) > input { flex: 1; min-width: 8rem; min-height: 2.75rem; padding: 0.5rem 0.9rem; font: inherit; font-size: 0.9375rem; background: var(--paper); border: 1px solid var(--ash); border-radius: 2px; }
.basket-page .pwgc-apply-gift-card-button { min-height: 2.75rem; padding: 0.5rem 1rem; border: 1px solid var(--ink) !important; border-radius: 2px; background: transparent !important; color: var(--ink) !important; font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; width: auto !important; }
.basket-page .pwgc-apply-gift-card-button:hover { background: var(--ink) !important; color: var(--paper) !important; }

/* Basket lines */
.basket-page .wc-block-cart-items { border-color: var(--ink) !important; }
.basket-page .wc-block-cart-items th { font-size: 0.8125rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ash-deep); }
.basket-page .wc-block-components-product-name { font-size: var(--step-0); font-weight: 500; text-decoration: none; }
.basket-page .wc-block-components-product-name:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.basket-page .wc-block-cart-item__image img { aspect-ratio: 4 / 5; object-fit: cover; }
.basket-page .wc-block-components-quantity-selector { border: 1px solid var(--ash) !important; border-radius: 2px !important; background: var(--paper); }
.basket-page .wc-block-components-quantity-selector::after { display: none; }

/* Checkout steps, fields and choices */
.basket-page .wc-block-components-checkout-step__title, .basket-page .wc-block-components-title { font-size: var(--step-2) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; }
.basket-page .wc-block-components-text-input input, .basket-page .wc-block-components-text-input textarea,
.basket-page .wc-blocks-components-select .wc-blocks-components-select__select, .basket-page .wc-block-components-textarea { background: var(--paper) !important; border: 1px solid var(--ash) !important; border-radius: 2px !important; font-family: inherit !important; }
.basket-page .wc-block-components-text-input input:focus, .basket-page .wc-blocks-components-select__select:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink) !important; box-shadow: none !important; }
.basket-page .wc-block-components-radio-control__option, .basket-page .wc-block-components-radio-control-accordion-option { background: var(--paper); border-radius: 2px !important; box-shadow: inset 0 0 0 1px var(--ash) !important; }
.basket-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked,
.basket-page .wc-block-components-radio-control-accordion-option--checked-option-highlighted { box-shadow: inset 0 0 0 2px var(--ink) !important; }
.basket-page .wc-block-components-radio-control__input:checked { border-color: var(--ink); }
.basket-page .wc-block-components-radio-control__input:checked::before { background: var(--ink); }
.basket-page .wc-block-components-checkbox__input[type=checkbox]:checked { background: var(--ink); border-color: var(--ink); }
.basket-page .wc-block-components-checkout-place-order-button { width: 100%; }

/* Empty basket */
.basket-empty { padding-block: clamp(2rem, 6vw, 4rem); text-align: center; }
.basket-empty h2 { font-size: var(--step-4); }
body .basket-empty p { margin-top: 1rem; }
body .basket-empty .actions { margin-top: 2rem; }
.wp-block-woocommerce-cart.is-loading .basket-empty, .basket-page .wp-block-woocommerce-empty-cart-block { width: 100%; }

/* =====================================================================
   Upcoming dates ([ng_upcoming_dates]) with the List / Calendar switch
   ===================================================================== */
.dates { position: relative; }
.dates .diary { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.dates .diary-row > * { margin: 0; }
.dates .diary h3 a { text-decoration: none; }
.dates .diary h3 a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.dates .diary .low { font-weight: 600; }
.dates .diary .sold .num, .dates .diary .sold h3 { color: var(--ash-deep); }
.dates .action .wp-element-button { display: flex; width: 100%; min-height: 2.75rem; padding: 0.5rem 1rem; font-size: 0.875rem; border: 1px solid var(--ink); text-decoration: none; }
.dates .action .wp-element-button.is-ghost { background: transparent; color: var(--ink); }
.dates .action .wp-element-button.is-ghost:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 64rem) { .dates .action .wp-element-button { width: auto; } }
.diary-empty { font-size: var(--step-1); }

/* The switch sits on the heading row, as in the design */
.dates .view-toggle { position: absolute; right: 0; top: calc(-1 * (2rem + 2.8rem)); display: inline-flex; border: 1px solid var(--ink); border-radius: 2rem; padding: 0.2rem; }
.dates .view-toggle[hidden] { display: none !important; }
.view-toggle button { min-height: 2.4rem; padding: 0 1.1rem; border: 0; border-radius: 2rem; background: none; font: inherit; font-weight: 500; cursor: pointer; transition: background-color .2s, color .2s; }
.view-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.view-toggle button:not([aria-pressed="true"]):hover { background: rgb(0 0 0 / 0.07); }
@media (max-width: 40rem) { .dates .view-toggle { position: static; margin-bottom: 1rem; } }

.cal-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.cal-head h3 { margin: 0; font-size: var(--step-2); font-weight: 300; text-transform: uppercase; letter-spacing: var(--track-wide); }
.cal-head button { width: 2.75rem; height: 2.75rem; border: 1px solid var(--ink); border-radius: 50%; background: none; font-size: 1.1rem; cursor: pointer; transition: background-color .2s, color .2s; }
.cal-head button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.cal-head button:disabled { opacity: 0.35; cursor: not-allowed; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; }
.cal .dow { font-size: 0.75rem; font-weight: 600; text-align: center; color: var(--ash-deep); padding-bottom: 0.35rem; }
.cal .day { aspect-ratio: 1; display: grid; place-items: center; position: relative; font-size: 0.9375rem; color: var(--ash-deep); }
.cal button.day { border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; }
.cal button.day::after { content: ""; position: absolute; bottom: 18%; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: currentColor; }
.cal button.day:hover, .cal button.day[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.cal-list h3 { margin: 0 0 0.75rem; font-size: var(--step-1); font-weight: 600; }
.cal-list ul { list-style: none; margin: 0; padding: 0; }
.cal-list li { padding: 1rem 0; border-top: 1px solid var(--pebble); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.cal-list li strong { display: block; font-weight: 600; }
.cal-list li span { font-size: 0.875rem; color: var(--ash-deep); }
.cal-list .wp-element-button { min-height: 2.6rem; padding: 0.4rem 1rem; font-size: 0.875rem; text-decoration: none; white-space: nowrap; }
@media (max-width: 52rem) { .cal-wrap { grid-template-columns: 1fr; } }
@media (max-width: 40rem) { .cal-head h3 { font-size: var(--step-1); letter-spacing: 0.2em; } }

/* =====================================================================
   Christmas gift finder ([ng_gift_finder]) on the Shop page
   ===================================================================== */
.finder { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
:root body .finder :where(h2, p, fieldset, ul, h3) { margin: 0; }
.finder h2 { font-size: var(--step-4); }
:root body .finder .finder-lede { margin-top: 1rem; }
:root body .finder fieldset { border: 0; padding: 0; margin: 1.5rem 0 0; min-width: 0; }
.finder legend { padding: 0; font-weight: 600; margin-bottom: 0.75rem; }
.finder .chip { position: relative; cursor: pointer; }
.finder .chip input { position: absolute; opacity: 0; pointer-events: none; }
.finder .chip:has(input:checked) { background: var(--ink); color: var(--paper); }
.finder .chip:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
:root body .finder .hint { margin-bottom: 1rem; font-size: 0.875rem; color: var(--ash-deep); }
.picks { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pick a { display: block; text-decoration: none; color: inherit; }
.pick .img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); }
.pick img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.pick a:hover img { transform: scale(1.03); }
.pick .img--voucher { display: grid; place-items: center; background: var(--linen); }
.pick .voucher-card { width: 82%; transform: rotate(-4deg); box-shadow: 0 16px 34px -22px rgb(95 89 90 / 0.7); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.pick .voucher-card .v-amount { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
.pick a:hover .voucher-card { transform: rotate(0deg) translateY(-4px); }
:root body .pick .kind { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--ash-deep); }
.pick h3 { font-size: 0.9875rem; font-weight: 500; line-height: 1.35; }
.pick a:hover h3 { text-decoration: underline; text-underline-offset: 0.25em; }
:root body .pick .why { margin-top: 0.3rem; font-size: 0.875rem; }
.pick-set[hidden] { display: none !important; }
@media (max-width: 52rem) { .finder { grid-template-columns: 1fr; } .picks { grid-template-columns: 1fr 1fr; } .picks li:nth-child(3) { display: none; } }

/* =====================================================================
   Phone Book / Buy bar on product pages (plugin includes/buy-bar.php)
   ===================================================================== */
.buybar { display: none; }
@media (max-width: 52rem) {
  .buybar {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--pebble);
    box-shadow: 0 -12px 30px -20px rgb(0 0 0 / 0.35); transform: translateY(110%); transition: transform .3s ease;
  }
  .buybar.is-visible { transform: none; }
  .buybar > div { min-width: 0; }
  .buybar strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .buybar small { font-size: 0.875rem; color: var(--ash-deep); }
  .buybar .wp-element-button { flex: none; min-height: 2.9rem; padding-inline: 1.25rem; border: 0; cursor: pointer; font-family: inherit; }
  body.has-buybar .site-footer { padding-bottom: 6rem; }
}