/* ==========================================================================
   Touch of Yetty - components
   Radius is 4px throughout, matching the reference site. Only what theme.json
   cannot express lives here.
   ========================================================================== */

/* Components below use padding on stretched flex/grid children. */
[class^="toy-"], [class*=" toy-"] { box-sizing: border-box; }

/* --- Brand palette --------------------------------------------------------
   The client's palette is six plums. Rather than paint purple onto a
   monochrome site - which reads as decoration bolted on - the neutral ramp
   itself is tinted, so nothing is black any more and the plum is felt rather
   than pointed at. The page background stays pure white; only the ink, the
   greys and the borders carry the tint.

   Skinelle's stone-* ramp is overridden in place, so the ~20 rules that reach
   for a preset directly move with the theme tokens instead of drifting warm
   grey against plum. "Stone" is now a plum-tinted neutral, not a warm one.

   Contrast on white, measured not eyeballed: ink 18.3:1, mulberry 14.0:1,
   accent 9.8:1 (AAA at any size), muted 6.4:1 (AA). Dusty orchid is 3.0:1,
   so it is a border and decoration colour only - never text. Pale lavender
   is a background only. */
:root {
	--toy-plum-ink: #280628;      /* Midnight Plum  - headings, panels, buttons */
	--toy-plum-deep: #390939;     /* Deep Plum      - large dark fills */
	--toy-plum-mulberry: #4F0C4F; /* Dark Mulberry  - hover on dark */
	--toy-plum-royal: #751875;    /* Royal Plum     - the one accent */
	--toy-plum-orchid: #C17BC1;   /* Dusty Orchid   - decoration, never text */
	--toy-plum-pale: #FFCCFF;     /* Pale Lavender  - tint fills, never text */

	/* Plum-tinted replacements for Skinelle's warm neutral ramp. */
	--wp--preset--color--stone-50: #FCF8FC;
	--wp--preset--color--stone-100: #F7F1F7;
	--wp--preset--color--stone-200: #E9DCE9;
	--wp--preset--color--stone-300: #D8C6D8;
	--wp--preset--color--stone-600: #6B5A6B;
	--wp--preset--color--stone-700: var(--toy-plum-mulberry);
	--wp--preset--color--stone-800: var(--toy-plum-deep);
	--wp--preset--color--stone-900: #2F072F;
	--wp--preset--color--stone-950: var(--toy-plum-ink);

	--toy-radius: 4px;
	--toy-announce-h: 40px;
	--toy-ink: var(--toy-plum-ink);
	--toy-ink-2: var(--toy-plum-mulberry);
	--toy-accent: var(--toy-plum-royal);
	--toy-muted: var(--wp--preset--color--stone-600);
	--toy-line: var(--wp--preset--color--stone-200);
	--toy-surface: var(--wp--preset--color--stone-100);
	--toy-tint: var(--toy-plum-pale);
}

/* --- Global radius pass ---------------------------------------------------
   Skinelle ships pill buttons (9999px) and 16px image corners; the reference
   site uses a flat 4px everywhere. */
.wp-block-button__link,
.wp-block-search__button,
.wp-block-image img,
.wp-block-post-featured-image img,
.wc-block-components-button,
input[type="text"], input[type="email"], input[type="search"], select, textarea {
	border-radius: var(--toy-radius) !important;
}

/* --- Eyebrow / kicker ----------------------------------------------------- */
.toy-eyebrow {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--toy-muted);
	margin-bottom: 0.75rem;
}

.toy-eyebrow.is-light {
	color: var(--wp--preset--color--stone-300);
}

/* --- Announcement bar ----------------------------------------------------- */
.toy-announce {
	background: var(--toy-ink);
	color: #fff;
	text-align: center;
	padding: 0.6rem 1rem;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}

.toy-announce a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Scrolling marquee ---------------------------------------------------- */
.toy-marquee {
	overflow: hidden;
	width: 100%;
	padding-block: 0.9rem;
	background: var(--toy-ink);
	border-block: 1px solid rgba(255, 255, 255, 0.08);
}

.toy-marquee__track {
	display: flex;
	width: max-content;
	animation: toy-marquee-scroll 42s linear infinite;
}

.toy-marquee:hover .toy-marquee__track {
	animation-play-state: paused;
}

.toy-marquee__group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.toy-marquee__item {
	display: inline-flex;
	align-items: center;
	padding-inline: 1.75rem;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	white-space: nowrap;
	color: #fff;
}

.toy-marquee__item::after {
	content: "";
	width: 4px;
	height: 4px;
	margin-inline-start: 1.75rem;
	background: var(--wp--preset--color--stone-600);
	border-radius: 50%;
}

@keyframes toy-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.toy-marquee__track {
		animation: none;
		justify-content: center;
	}
	.toy-marquee__group:last-child {
		display: none;
	}
}

/* --- Service quick links (booking shortcuts under the hero) --------------- */
.toy-quicklinks {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.75rem;
}

.toy-quicklink {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	background: #fff;
	text-decoration: none;
	color: var(--toy-ink);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.25;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.toy-quicklink:hover {
	border-color: var(--toy-ink);
	background: var(--wp--preset--color--stone-50);
}

.toy-quicklink img {
	width: 42px;
	height: 42px;
	border-radius: var(--toy-radius);
	object-fit: cover;
	flex: 0 0 auto;
}

/* --- Media cards (categories + services) ---------------------------------- */
.toy-cards {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(4, 1fr);
}

.toy-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.toy-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--toy-radius);
	aspect-ratio: 3 / 4;
	background: var(--toy-surface);
}

.toy-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.toy-card:hover .toy-card__media img {
	transform: scale(1.04);
}

.toy-card__label {
	margin-top: 0.75rem;
	display: block;
	background: var(--toy-ink);
	color: #fff;
	text-align: center;
	padding: 0.75rem 1rem;
	border-radius: var(--toy-radius);
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: background 0.25s ease;
}

.toy-card:hover .toy-card__label {
	background: var(--wp--preset--color--stone-700);
}

/* Service card variant: title and CTA sit over the image, as on the reference. */
.toy-card--overlay .toy-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.72) 100%);
}

.toy-card--overlay .toy-card__title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 3.4rem;
	z-index: 1;
	text-align: center;
	color: #fff;
	font-family: var(--wp--preset--font-family--figtree);
	font-weight: 700;
	font-size: 1rem;
	padding-inline: 0.75rem;
}

.toy-card--overlay .toy-card__cta {
	position: absolute;
	left: 50%;
	bottom: 1rem;
	transform: translateX(-50%);
	z-index: 1;
	background: #fff;
	color: var(--toy-ink);
	border-radius: var(--toy-radius);
	padding: 0.45rem 1.1rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* --- Sale badge ----------------------------------------------------------- */
.toy-badge {
	display: inline-block;
	background: var(--toy-accent);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.25rem 0.5rem;
	border-radius: var(--toy-radius);
}

/* --- Collection tabs ------------------------------------------------------ */
.toy-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	justify-content: center;
	border-bottom: 1px solid var(--toy-line);
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.toy-tabs__btn {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 0 0 0.9rem;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--toy-muted);
	transition: color 0.25s ease, border-color 0.25s ease;
}

.toy-tabs__btn:hover {
	color: var(--toy-ink);
}

.toy-tabs__btn[aria-selected="true"] {
	color: var(--toy-ink);
	border-bottom-color: var(--toy-ink);
}

.toy-tabs__panel[hidden] {
	display: none;
}

/* --- Review cards --------------------------------------------------------- */
.toy-reviews {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, 1fr);
}

.toy-review {
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	padding: 1.5rem;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.toy-review__tag {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--toy-muted);
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	padding: 0.25rem 0.5rem;
	align-self: flex-start;
}

.toy-review__stars {
	color: #F5A623;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
}

.toy-review__body {
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}

.toy-review__name {
	font-size: 0.8125rem;
	font-weight: 600;
	margin: 0;
}

.toy-review__meta {
	font-size: 0.75rem;
	color: var(--toy-muted);
	margin: 0;
}

/* --- Instagram grid ------------------------------------------------------- */
.toy-ig {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(6, 1fr);
}

.toy-ig a {
	display: block;
	overflow: hidden;
	border-radius: var(--toy-radius);
	aspect-ratio: 1;
}

.toy-ig img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease, opacity 0.3s ease;
}

.toy-ig a:hover img {
	transform: scale(1.06);
	opacity: 0.9;
}

@media (max-width: 900px) {
	.toy-ig { grid-template-columns: repeat(3, 1fr); }
}

/* --- Text wordmark (placeholder until real logo artwork lands) ------------ */
.toy-wordmark {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.toy-wordmark__text {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* --- Focus visibility ----------------------------------------------------- */
:where(a, button, [tabindex]):focus-visible {
	outline: 2px solid var(--toy-ink);
	outline-offset: 3px;
}


.toy-hero .is-style-outline .wp-block-button__link:hover {
	background: #fff;
	color: var(--toy-ink);
}

/* --- Responsive column counts -------------------------------------------- */
@media (max-width: 1024px) {
	.toy-quicklinks { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
	.toy-cards { grid-template-columns: repeat(2, 1fr); }
	.toy-reviews { grid-template-columns: repeat(1, 1fr); }
}

@media (max-width: 560px) {
	.toy-quicklinks { grid-template-columns: repeat(2, 1fr); }
}

/* --- Typography override ---------------------------------------------------
   Skinelle sets EB Garamond on headings and on its own hero-title block style;
   the brief calls for Figtree throughout. */
:is(h1, h2, h3, h4, h5, h6).wp-block-heading,
.wp-block-post-title,
.is-style-hero-title,
.woocommerce-loop-product__title,
.wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--figtree) !important;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* --- Stretched columns centre their own content --------------------------- */
.wp-block-columns .wp-block-column.is-vertically-aligned-stretch {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ==========================================================================
   Sticky header
   ========================================================================== */

/* The sticky must sit on the outer <header> template part: a sticky element
   can only travel within its parent box, and the inner wrapper's parent is
   only as tall as the header itself, so it scrolled straight off. Pulling it
   up by the announcement bar's height lets that bar scroll away while the
   nav pins to the top. */
.toy-announce {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--toy-announce-h);
	padding-block: 0;
}

header.wp-block-template-part {
	position: sticky;
	top: calc(-1 * var(--toy-announce-h));
	z-index: 100;
}

.toy-sticky-header {
	background: #fff;
	transition: box-shadow 0.25s ease;
}

.toy-sticky-header.is-stuck {
	box-shadow: 0 1px 0 var(--toy-line), 0 6px 24px rgba(0, 0, 0, 0.06);
}

.admin-bar header.wp-block-template-part {
	top: calc(32px - var(--toy-announce-h));
}

@media (max-width: 782px) {
	.admin-bar header.wp-block-template-part { top: calc(46px - var(--toy-announce-h)); }
}

/* ==========================================================================
   Newsletter band + footer
   ========================================================================== */

.toy-subscribe {
	display: flex;
	gap: 0.5rem;
	max-width: 460px;
	flex-wrap: wrap;
}

.toy-subscribe input[type="email"] {
	flex: 1 1 220px;
	min-width: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #fff;
	padding: 0.85rem 1rem;
	font-size: 0.875rem;
	border-radius: var(--toy-radius);
}

.toy-subscribe input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.5); }
.toy-subscribe input[type="email"]:focus { outline: none; border-color: #fff; }

.toy-subscribe button {
	flex: 0 0 auto;
	background: #fff;
	color: var(--toy-ink);
	border: 0;
	border-radius: var(--toy-radius);
	padding: 0.85rem 1.75rem;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.2s ease;
}

.toy-subscribe button:hover { background: var(--wp--preset--color--stone-200); }

.toy-footer {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
	gap: 2.5rem 2rem;
	align-items: start;
}

.toy-footer__wordmark {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 0.9rem;
}

.toy-footer__blurb {
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--toy-muted);
	margin: 0 0 1.5rem;
	max-width: 34ch;
}

.toy-footer__follow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 0.75rem;
}

.toy-footer__social { display: flex; gap: 0.5rem; }

.toy-footer__social a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	color: var(--toy-ink);
	transition: background 0.2s ease, color 0.2s ease;
}

.toy-footer__social a:hover { background: var(--toy-ink); color: #fff; }

.toy-footer__heading {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}

.toy-footer__col ul { list-style: none; margin: 0; padding: 0; }
.toy-footer__col li { margin-bottom: 0.6rem; }

.toy-footer__col a,
.toy-footer__contact a {
	font-size: 0.875rem;
	color: var(--toy-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.toy-footer__col a:hover,
.toy-footer__contact a:hover { color: var(--toy-ink); }

.toy-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-style: normal;
	font-size: 0.875rem;
	color: var(--toy-muted);
	line-height: 1.5;
}

.toy-footer__base {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 3.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--toy-line);
}

.toy-footer__base p { font-size: 0.8125rem; color: var(--toy-muted); margin: 0; }

@media (max-width: 1100px) { .toy-footer { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 680px)  { .toy-footer { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; } }


/* ==========================================================================
   Hero - full-bleed background image, copy left
   ========================================================================== */

.toy-hero__styles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.85rem;
	font-size: 0.9375rem;
	margin: 0;
}

.toy-hero__styles.is-light { color: #fff; }
.toy-hero__styles span { display: inline-flex; align-items: center; }

.toy-hero__styles span:not(:last-child)::after {
	content: "";
	width: 1px;
	height: 14px;
	margin-left: 0.85rem;
	background: rgba(255, 255, 255, 0.4);
}

/* Skinelle's outline style is dark-on-light; over the hero image it vanishes. */
.toy-hero__ghost .wp-block-button__link {
	color: #fff;
	border: 1px solid #fff;
	background: transparent;
}

.toy-hero__ghost .wp-block-button__link:hover {
	background: #fff;
	color: var(--toy-ink);
}

/* ==========================================================================
   Product cards - large, minimal, CTA revealed on hover
   The .toy-pc__media wrapper is created by assets/js/product-cards.js.
   ========================================================================== */

.toy-pc { position: relative; }

.toy-pc__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--toy-radius);
	background: var(--toy-surface);
	margin-bottom: 0.9rem;
}

.toy-pc__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	border-radius: 0 !important;
	transition: transform 0.7s ease;
}

.toy-pc:hover .toy-pc__media img { transform: scale(1.04); }

/* Relocated CTA - hidden until hover, and not focus-trapped while hidden. */
.toy-pc__cta {
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 3;
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity 0.28s ease, transform 0.28s ease;
	pointer-events: none;
	margin: 0 !important;
}

.toy-pc:hover .toy-pc__cta,
.toy-pc:focus-within .toy-pc__cta {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Product cards keep their button on show. A shopper should see the thing they
   are meant to press without first discovering that the card reacts to a
   cursor, and on a phone there is no cursor to discover it with.

   Matched by what the card contains rather than by a class, so it catches the
   add to cart button wherever a product card is used and leaves the service
   cards alone - their "Book" overlay is decoration on a card that is already
   a single link, so revealing it on hover costs nobody anything. */
.toy-pc__cta:has(.wp-block-woocommerce-product-button),
.toy-pc__cta:has(.wc-block-components-product-button),
.toy-pc__cta:has(a.button) {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* WooCommerce appends its own "View cart" link inside the button wrapper once
   something has been added. The wrapper is pinned over the bottom of the image,
   so a second button does not sit beside the first - it stacks on top of it and
   grows up over the photograph. The header cart already carries the count and
   links to the basket, so the card keeps only its own button. */
.toy-pc__cta .added_to_cart,
.toy-pc__cta .wc-forward {
	display: none !important;
}

.toy-pc__cta :is(a, button) {
	display: block;
	width: 100%;
	margin: 0;
	text-align: center;
	background: var(--toy-ink);
	color: #fff;
	border: 0;
	border-radius: var(--toy-radius);
	padding: 0.85rem 1rem;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease;
}

.toy-pc__cta :is(a, button):hover { background: var(--wp--preset--color--stone-700); }

/* Touch devices have no hover - keep the CTA visible there. */
@media (hover: none) {
	.toy-pc__cta { opacity: 1; transform: none; pointer-events: auto; }
}

/* Sale badge: a small flag, not a full-width bar. */
.toy-pc__media :is(.wc-block-components-product-sale-badge, .onsale) {
	/* WooCommerce ships .onsale as a circular badge - min-height 3.236em with
	   a line-height to match. This is a flag, not a circle, and without the
	   reset the shortcode rows carried a badge twice the height of the block
	   rows' one. */
	min-height: 0 !important;
	line-height: 1.2 !important;
	position: absolute !important;
	top: 0.75rem !important;
	left: 0.75rem !important;
	right: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	width: auto !important;
	min-width: 0 !important;
	display: inline-block !important;
	background: var(--toy-accent) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--toy-radius) !important;
	font-family: var(--wp--preset--font-family--figtree) !important;
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em;
	line-height: 1 !important;
	padding: 0.4rem 0.55rem !important;
	z-index: 4;
}

/* Card text */
.toy-pc :is(.wp-block-post-title, .woocommerce-loop-product__title) {
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	line-height: 1.4;
	margin: 0 0 0.4rem !important;
	letter-spacing: 0 !important;
	padding: 0 !important;
}

.toy-pc :is(.wc-block-components-product-price, .price) {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--toy-ink);
	display: block;
}

.toy-pc del { color: #6f5f6f; opacity: 1; font-weight: 400; margin-right: 0.4rem; }
.toy-pc ins { text-decoration: none; }

/* Stars were inheriting the link colour. */
.toy-pc :is(.star-rating, .wc-block-components-product-rating) {
	color: #F5A623 !important;
	font-size: 0.8rem;
	margin: 0 0 0.35rem;
}

.toy-pc .star-rating span::before,
.toy-pc .star-rating::before { color: #F5A623 !important; }

/* The classic loop link wraps image + text; keep it plain. */
.toy-pc .woocommerce-LoopProduct-link {
	display: block;
	background: none !important;
	text-decoration: none;
	color: inherit;
}

.woocommerce ul.products li.product { text-align: left; }

/* The Product Collection button ships with .align-center, which keeps it
   auto-width once relocated. Force the shell and its child to fill. */
.toy-pc__cta > * {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	text-align: center;
}

/* --- CTA: force a full-width, centred block regardless of Woo's own classes --
   Both markups ship alignment helpers (.align-center, .alignleft, floats) that
   otherwise leave the relocated button hugging one edge. */
.toy-pc__cta,
.toy-pc__cta > *,
.toy-pc__cta :is(a, button) {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	inset-inline: auto !important;
	text-align: center !important;
	box-sizing: border-box !important;
}

.toy-pc__cta {
	position: absolute !important;
	left: 0.75rem !important;
	right: 0.75rem !important;
	bottom: 0.75rem !important;
	width: auto !important;
}

/* --- Category cards: title above the image, label button below ------------- */
.toy-card__heading {
	display: block;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: clamp(1.125rem, 1.6vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--toy-ink);
	text-align: center;
	margin-bottom: 0.85rem;
}

.toy-shopall {
	text-align: center;
	margin: 2rem 0 0;
}

.toy-shopall a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--toy-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--toy-ink);
	padding-bottom: 3px;
}

.toy-shopall a:hover { opacity: 0.6; }

/* --- Section header: eyebrow, title, supporting line, shop-all ------------- */
.toy-sechead {
	text-align: center;
	margin-bottom: 2.5rem;
}

.toy-sechead__lede {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--toy-muted);
	max-width: 60ch;
	margin: 0.75rem auto 0;
}

/* ==========================================================================
   Hero corrections
   Skinelle's hero group gives its inner content no gutter, so the copy sat
   flush against the viewport edge at wide widths.
   ========================================================================== */

/* The slideshow owns the hero height now - see .toy-slider below. */
.toy-hero {
	position: relative;
	padding: 0 !important;
}

/* Scrim so white type stays legible over any photograph. */
.toy-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 42%, rgba(0, 0, 0, 0.05) 78%);
	pointer-events: none;
	z-index: 0;
}

.toy-hero > .wp-block-group {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: clamp(1.5rem, 4vw, 4rem) !important;
	padding-block: clamp(2rem, 4vw, 3.25rem) !important;
}

.toy-hero .is-style-hero-title {
	font-size: clamp(2.5rem, 4.6vw, 4rem) !important;
	line-height: 1.02 !important;
	margin-bottom: 1rem !important;
	max-width: 16ch;
}

.toy-hero .is-style-hero-description {
	font-size: 1.0625rem !important;
	line-height: 1.6 !important;
	max-width: 44ch;
	padding-bottom: 2rem !important;
}

.toy-hero .toy-eyebrow.is-light {
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 1rem;
}

.toy-hero .toy-hero__styles { font-size: 1rem; margin-bottom: 1.25rem; }

.toy-hero .wp-block-button__link {
	padding: 1rem 2.25rem !important;
	font-size: 0.8125rem !important;
}

/* ==========================================================================
   Shortcode product grid
   WooCommerce lays [products] out with floats and percentage widths, which
   gives uneven columns next to the block-based rows. Normalise to a grid.
   ========================================================================== */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 2rem 1.5rem !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	float: none !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; }

.woocommerce ul.products li.product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
}

@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 780px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ==========================================================================
   Section header + quicklink sizing
   ========================================================================== */

.toy-sechead h2 { margin: 0.35rem 0 0; }

.toy-sechead__lede {
	font-size: 1rem;
	line-height: 1.7;
	margin-top: 0.9rem;
}

.toy-quicklink { padding: 0.85rem 1rem; font-size: 0.875rem; }
.toy-quicklink img { width: 52px; height: 52px; }

/* ==========================================================================
   Editorial bands - measure control
   Headings and body copy were running the full column width (80-90 characters
   a line) which reads as thin and sprawling. Cap the measure and let the type
   wrap into a proper block.
   ========================================================================== */

.toy-band :is(h2, h3) {
	max-width: 20ch;
	font-size: clamp(1.75rem, 2.9vw, 2.5rem) !important;
	line-height: 1.08 !important;
}

.toy-band p {
	max-width: 50ch;
}

.toy-band .toy-subscribe {
	max-width: 440px;
}

/* Supporting detail list inside the dark bands. */
.toy-band__list {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
	max-width: 46ch;
}

.toy-band__list li {
	position: relative;
	padding-left: 1.6rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
}

.toy-band__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 1px;
	background: rgba(255, 255, 255, 0.55);
}

/* Editorial band media -----------------------------------------------------
   The copy column decides the row height; the image absolutely fills its own
   half. Giving the image its own aspect-ratio (as I first did) let the two
   halves desync, which is what produced the gaps and shifting. */
.toy-band .wp-block-columns { align-items: stretch !important; }

.toy-band .wp-block-column:has(> img),
.toy-band .wp-block-column:has(> .toy-band__pair) {
	position: relative;
	display: block !important;
	min-height: 24rem;
	padding: 0 !important;
	overflow: hidden;
}

.toy-band .wp-block-column > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-height: none;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 0;
}

/* Centred section intros read better on a tighter measure. */
.toy-sechead__lede {
	max-width: 54ch;
}


/* ==========================================================================
   One content edge
   The page had three different left edges: sections at the container gutter,
   band copy inset by its column padding, and the hero inset again by its own.
   Bands now bleed their background full width while their content sits on the
   same container as everything else, and the copy column drops its side
   padding so its text starts on that same edge.
   ========================================================================== */

.toy-band.alignfull > .wp-block-columns {
	/* Mirrors how .alignwide resolves: capped at the wide size, but never
	   wider than the viewport minus the root gutter. */
	width: calc(100% - 2 * var(--wp--style--root--padding-right, 1.5rem));
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto !important;
}

/* Copy column: keep vertical padding, drop the horizontal inset. */
.toy-band .wp-block-column:not(:has(> img)):not(:has(> .toy-band__pair)) {
	padding-inline: 0 !important;
}

/* Breathing room between copy and image, applied to the gap rather than the edge. */
.toy-band .wp-block-columns > .wp-block-column:not(:has(> img)):not(:has(> .toy-band__pair)):first-child {
	padding-right: 3.5rem !important;
}

.toy-band .wp-block-columns > .wp-block-column:not(:has(> img)):not(:has(> .toy-band__pair)):last-child {
	padding-left: 3.5rem !important;
}

/* Hero content aligns to the same container, not its own inset. */
.toy-hero > .wp-block-group {
	padding-inline: 0 !important;
	max-width: var(--wp--style--global--wide-size);
}

/* The slideshow is full-bleed and applies its own gutter inside .toy-slider__copy. */

/* ==========================================================================
   Service cards
   Deliberately reuse the product card shell (.toy-pc / .toy-pc__media /
   .toy-pc__cta) so a service card and a product card are the same object -
   same 4:5 image, same hover reveal, same type. Only the text under the image
   differs, because a service has no price or rating.
   ========================================================================== */

.toy-svcgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem 1.5rem;
}

.toy-sv {
	display: block;
	text-decoration: none;
	color: inherit;
}

.toy-sv__title {
	display: block;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--toy-ink);
	margin-bottom: 0.3rem;
}

.toy-sv__desc {
	display: block;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--toy-muted);
}

/* The product CTA styling targets a/button; service cards use a span because
   the whole card is already the link. */
.toy-pc__cta > span {
	display: block;
	width: 100%;
	margin: 0;
	text-align: center;
	background: var(--toy-ink);
	color: #fff;
	border: 0;
	border-radius: var(--toy-radius);
	padding: 0.85rem 1rem;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	transition: background 0.2s ease;
}

.toy-sv:hover .toy-pc__cta > span {
	background: var(--wp--preset--color--stone-700);
}

@media (max-width: 1024px) {
	.toy-svcgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
	.toy-svcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Play affordance on a client video card. */
.toy-vid__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--toy-ink);
	padding-left: 3px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
	transition: transform 0.3s ease, background 0.3s ease;
	pointer-events: none;
}

.toy-vid:hover .toy-vid__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: #fff;
}

/* ==========================================================================
   Why choose - reasons grid with centred icons
   Mirrors the parent theme's About feature blocks (circular icon, centred
   title, centred description) on the existing grey section background.
   ========================================================================== */

.toy-why {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.5rem 2rem;
	list-style: none;
	margin: 3rem 0 0;
	padding: 0;
}

.toy-why__item {
	text-align: center;
	max-width: 22rem;
	margin-inline: auto;
}

.toy-why__icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 1.4rem;
	border-radius: 50%;
	background: #fff;
}

/* Icons are inlined so their paths can be stroked. non-scaling-stroke keeps
   the weight identical across icons whose viewBoxes differ (18 vs 28 units). */
.toy-why__icon svg {
	width: 30px;
	height: 30px;
	display: block;
	overflow: visible;
}

.toy-why__icon svg :is(path, circle, rect, line, polyline, polygon) {
	stroke: currentColor;
	stroke-width: 0.3;
	vector-effect: non-scaling-stroke;
	stroke-linejoin: round;
	stroke-linecap: round;
	paint-order: stroke fill;
}

.toy-why__title {
	display: block;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--toy-ink);
	margin-bottom: 0.6rem;
}

.toy-why__desc {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--toy-muted);
}

@media (max-width: 1024px) {
	.toy-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.toy-why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
}

/* ==========================================================================
   Heading typeface
   One family across the site. Headings used to run on a self-hosted Hanken
   Grotesk, which meant a second variable woff2 on every page for a difference
   most visitors would never name. The token stays - three dozen rules point at
   it - so the family is still one line to change.
   ========================================================================== */

:root {
	--toy-heading-font: var(--wp--preset--font-family--figtree), sans-serif;
}

/* Form controls do not inherit a font in any browser - left alone they fall back
   to the UA default, which is how the slider arrows and dots were computing to
   Arial. They carry no text today, so this changes nothing on screen; it stops
   the next button that does carry a label from arriving in the wrong face. */
button,
input,
select,
textarea {
	font-family: inherit;
}

/* Headings only - body copy stays on Figtree. */
:is(h1, h2, h3, h4, h5, h6).wp-block-heading,
.wp-block-post-title,
.is-style-hero-title,
.toy-sechead h2,
.toy-hero__title {
	font-family: var(--toy-heading-font) !important;
}

/* Footer content follows the same container as every other section, rather
   than the width it was authored against. Resolves like .alignwide: capped at
   the wide size, never wider than the viewport minus the root gutter. */
.toy-footer,
.toy-footer__base {
	width: calc(100% - 2 * var(--wp--style--root--padding-right, 1.5rem));
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* Why-choose panel picks up the brand radius, like the other card surfaces. */
.toy-why-panel {
	border-radius: var(--toy-radius);
	overflow: hidden;
}


/* Cut-out band media: transparent PNGs must be contained and stood on the
   floor of the column, not cropped edge-to-edge like a photographic backdrop. */
.toy-band--cutout .wp-block-column > img {
	object-fit: contain;
	object-position: center bottom;
	height: 100%;
}

/* This cut-out is cropped to head-and-ponytail, so fill the column and anchor
   the top - the head stays whole and the frame is filled rather than floating. */
/* Contained inside a box taller than the band, anchored to the top: the whole
   head fits, and the body runs past the band edge where overflow clips it. */
/* The image file is already cropped to head-and-ponytail, so simply contain
   it: the whole head shows, nothing is cut, and the body cannot reappear. */
.toy-band--cutout-top .wp-block-column > img {
	object-fit: contain;
	object-position: center center;
	height: 100%;
	top: 0;
	bottom: 0;
}

/* Newsletter band: its copy column is wider than the other bands, so the
   shared 20ch/50ch measure left a lot of dead space. Relax the caps and scale
   the heading up so the text actually occupies the column. */
.toy-band--newsletter :is(h2, h3),
.toy-band--cutout-top :is(h2, h3) {
	max-width: 22ch;
	font-size: clamp(2.125rem, 3.6vw, 3.25rem) !important;
	line-height: 1.04 !important;
}

.toy-band--newsletter p {
	max-width: 58ch;
	font-size: 1.0625rem;
}

.toy-band--newsletter .toy-subscribe {
	max-width: 560px;
}

.toy-band--newsletter .toy-subscribe input[type="email"] {
	flex: 1 1 300px;
}

/* Reassurance line under the signup form. */
.toy-subscribe__note {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.68);
	max-width: 46ch;
}

/* Two cut-outs sharing the band's image column, standing on a common baseline. */
.toy-band__pair {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 0;
	overflow: hidden;
}

/* Size each figure from the band height, not from an equal share of the
   width - splitting the column in two was what shrank them. They take the
   width their aspect needs and overlap slightly, which reads as a pair. */
.toy-band__pair img {
	position: static;
	flex: 0 0 auto;
	width: auto;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center bottom;
}

.toy-band__pair img:last-child {
	margin-left: -6%;
}

/* Training band reads as a card, so all four corners carry the brand radius.
   The radius sits on the columns row because that is the visible surface -
   the group itself is transparent and full-bleed. */
.toy-band--card > .wp-block-columns {
	border-radius: var(--toy-radius);
	overflow: hidden;
}

/* Hero eyebrow sits quieter than the section eyebrows elsewhere - uppercase
   with wide tracking made a throwaway line shout over the headline. */
.toy-hero .toy-eyebrow.is-light {
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 0.9375rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.8);
}

/* Secondary hero action stays available but recedes behind the primary one. */
.toy-hero .is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.45);
	font-weight: 500;
}

.toy-hero .is-style-outline .wp-block-button__link:hover {
	border-color: #fff;
}

/* ==========================================================================
   Hero slideshow
   Slides are stacked and cross-faded rather than translated, so the height
   stays fixed at 500px and nothing reflows between slides.
   ========================================================================== */

.toy-slider {
	position: relative;
	width: 100%;
	height: 580px;
	overflow: hidden;
}

.toy-slider__track {
	position: absolute;
	inset: 0;
}

.toy-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

.toy-slider__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.7s ease, visibility 0s;
}

.toy-slider__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	display: block;
}

/* Same scrim as before, so white type stays legible on any photograph. */
.toy-slider__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 42%, rgba(0, 0, 0, 0.05) 78%);
	pointer-events: none;
}

.toy-slider__copy {
	position: relative;
	z-index: 2;
	height: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-right, 1.5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.toy-slider__title {
	font-family: var(--toy-heading-font);
	font-size: clamp(2.25rem, 4.4vw, 3.75rem);
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -0.03em;
	color: #fff;
	margin: 0 0 0.9rem;
	max-width: 16ch;
}

.toy-slider__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

/* --- Controls -------------------------------------------------------------- */

.toy-slider__controls {
	position: absolute;
	left: 50%;
	bottom: 1.5rem;
	transform: translateX(-50%);
	z-index: 3;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--style--root--padding-right, 1.5rem);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.toy-slider__arrow,
.toy-slider__pause {
	appearance: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.toy-slider__arrow:hover,
.toy-slider__pause:hover {
	background: #fff;
	border-color: #fff;
	color: var(--toy-ink);
}

.toy-slider__dots {
	display: flex;
	align-items: center;
	gap: 0;
	margin-inline: 0.35rem;
}

.toy-slider__dot {
	appearance: none;
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.toy-slider__dot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 5px;
	background: transparent;
	transform: translate(-50%, -50%);
	transition: width 0.28s ease, background 0.22s ease;
}

.toy-slider__dot.is-active::before {
	width: 22px;
	background: #fff;
	border-color: #fff;
}

.toy-slider__pause { margin-left: auto; }
.toy-slider__icon-play { display: none; }
.toy-slider.is-paused .toy-slider__icon-play { display: block; }
.toy-slider.is-paused .toy-slider__icon-pause { display: none; }

@media (max-width: 780px) {
	.toy-slider { height: 470px; }

	.toy-slider__copy {
		justify-content: flex-start;
		padding-top: 3.5rem;
	}

	.toy-slider__controls { bottom: 1rem; }
}

/* Hero buttons. These were lost when the earlier collage CSS was removed, so
   the slide actions were rendering as bare links. */
.toy-btn {
	display: inline-block;
	border-radius: var(--toy-radius);
	padding: 0.95rem 2rem;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	border: 1px solid #fff;
	transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.toy-btn--solid {
	background: #fff;
	color: var(--toy-ink);
}

.toy-btn--solid:hover {
	background: transparent;
	color: #fff;
}

.toy-btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.45);
	font-weight: 500;
}

.toy-btn--ghost:hover {
	background: #fff;
	color: var(--toy-ink);
	border-color: #fff;
}

/* ==========================================================================
   Slide tones
   Dark slides keep the black scrim and white type. Light slides invert both -
   white type would vanish on a pale studio backdrop, so those get a white
   scrim and ink text, including the buttons and the eyebrow.
   ========================================================================== */

.toy-slider__slide.is-tone-light::after {
	background: none;
}

.is-tone-light .toy-slider__title { color: var(--toy-ink); }
.is-tone-light .toy-eyebrow { color: rgba(0, 0, 0, 0.62); }
.is-tone-light .toy-hero__styles { color: var(--toy-ink); }

.is-tone-light .toy-hero__styles span:not(:last-child)::after {
	background: rgba(0, 0, 0, 0.28);
}

.is-tone-light .toy-btn--solid {
	background: var(--toy-ink);
	color: #fff;
	border-color: var(--toy-ink);
}

.is-tone-light .toy-btn--solid:hover {
	background: transparent;
	color: var(--toy-ink);
}

.is-tone-light .toy-btn--ghost {
	color: var(--toy-ink);
	border-color: rgba(0, 0, 0, 0.35);
}

.is-tone-light .toy-btn--ghost:hover {
	background: var(--toy-ink);
	color: #fff;
	border-color: var(--toy-ink);
}

/* Controls follow the tone of whichever slide is showing. */
.toy-slider:has(.toy-slider__slide.is-tone-light.is-active) :is(.toy-slider__arrow, .toy-slider__pause) {
	border-color: rgba(0, 0, 0, 0.3);
	color: var(--toy-ink);
}

.toy-slider:has(.toy-slider__slide.is-tone-light.is-active) :is(.toy-slider__arrow, .toy-slider__pause):hover {
	background: var(--toy-ink);
	border-color: var(--toy-ink);
	color: #fff;
}

.toy-slider:has(.toy-slider__slide.is-tone-light.is-active) .toy-slider__dot::before {
	border-color: rgba(0, 0, 0, 0.45);
}

.toy-slider:has(.toy-slider__slide.is-tone-light.is-active) .toy-slider__dot.is-active::before {
	background: var(--toy-ink);
	border-color: var(--toy-ink);
}

/* Marquee sits on the same deep plum as the editorial bands. */
.toy-marquee {
	background: var(--toy-plum-deep);
}

/* Slider eyebrow stays sentence case on every slide. The earlier rule keyed
   off .is-light, which the tone refactor removed from the markup. */
.toy-slider .toy-eyebrow {
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 0.9375rem;
	font-weight: 400;
	margin-bottom: 1rem;
}

.toy-slider__slide.is-tone-dark .toy-eyebrow {
	color: rgba(255, 255, 255, 0.82);
}

/* Keyword row follows the slide tone. The tone refactor dropped the .is-light
   class this used to key off, which left dark slides with near-black text on
   a black photograph. */
.toy-slider__slide.is-tone-dark .toy-hero__styles {
	color: #fff;
}

.toy-slider__slide.is-tone-dark .toy-hero__styles span:not(:last-child)::after {
	background: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   Main navigation and mega menus
   ========================================================================== */

.toy-nav {
	flex: 1 1 32rem;
	min-width: 0;
}

.toy-nav__list {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.toy-nav__item {
	position: static; /* mega panel anchors to the header, not the item */
}

.toy-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	appearance: none;
	background: none;
	border: 0;
	padding: 0.35rem 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--toy-ink);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, opacity 0.2s ease;
}

.toy-nav__link:hover,
.toy-nav__item.is-open .toy-nav__trigger {
	border-bottom-color: var(--toy-ink);
}

.toy-nav__trigger svg {
	transition: transform 0.25s ease;
}

.toy-nav__item.is-open .toy-nav__trigger svg {
	transform: rotate(180deg);
}

/* --- The panel ------------------------------------------------------------ */

.toy-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 60;
	background: #fff;
	border-top: 1px solid var(--toy-line);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.toy-mega__inner {
	width: calc(100% - 2 * var(--wp--style--root--padding-right, 1.5rem));
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-block: 2rem 2.25rem;
}

.toy-mega__links {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	columns: 2;
	column-gap: 3rem;
	max-width: 40rem;
}

.toy-mega--book .toy-mega__links {
	columns: 3;
	max-width: 60rem;
}

.toy-mega__links li {
	break-inside: avoid;
	margin-bottom: 0.85rem;
}

.toy-mega__links a {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.9375rem;
	color: var(--toy-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.toy-mega__links a:hover {
	border-bottom-color: var(--toy-ink);
}

.toy-mega__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}

.toy-mega__card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.toy-mega__card-media {
	display: block;
	overflow: hidden;
	border-radius: var(--toy-radius);
	background: var(--toy-surface);
	aspect-ratio: 1 / 1;
}

.toy-mega__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.toy-mega__card:hover .toy-mega__card-media img {
	transform: scale(1.04);
}

.toy-mega__card-label {
	display: block;
	margin-top: 0.7rem;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--toy-ink);
}

/* --- Burger, shown only on small screens ---------------------------------- */

.toy-nav__burger {
	display: none;
	appearance: none;
	background: none;
	border: 0;
	padding: 0.4rem;
	cursor: pointer;
	flex-direction: column;
	gap: 4px;
	width: 34px;
}

.toy-nav__burger span {
	display: block;
	height: 2px;
	width: 20px;
	background: var(--toy-ink);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.toy-nav.is-nav-open .toy-nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.toy-nav.is-nav-open .toy-nav__burger span:nth-child(2) { opacity: 0; }
.toy-nav.is-nav-open .toy-nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
	.toy-nav { flex: 0 0 auto; }

	.toy-nav__burger { display: flex; }

	/* The menu is a sheet off the left edge rather than a panel dropped from
	   under the header: full height, so a long menu has somewhere to go, and
	   it slides in from where the burger is rather than from the top. */
	.toy-nav__panel {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(86vw, 22rem);
		z-index: 90;
		display: flex;
		flex-direction: column;
		background: #fff;
		box-shadow: 12px 0 40px rgba(40, 6, 40, 0.16);
		transform: translateX(-100%);
		transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
		overscroll-behavior: contain;
	}

	.toy-nav.is-nav-open .toy-nav__panel { transform: none; }

	/* Nothing should animate for anyone who has asked it not to. */
	@media (prefers-reduced-motion: reduce) {
		.toy-nav__panel { transition: none; }
	}

	.toy-nav__panelhead {
		display: flex;
		justify-content: flex-end;
		padding: 0.75rem 0.75rem 0;
		flex: 0 0 auto;
	}

	.toy-nav__close {
		appearance: none;
		background: none;
		border: 0;
		color: var(--toy-ink);
		cursor: pointer;
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.toy-nav__scrim {
		position: fixed;
		inset: 0;
		z-index: 80;
		background: rgba(40, 6, 40, 0.42);
		border: 0;
		opacity: 0;
		transition: opacity 0.28s ease;
	}

	.toy-nav.is-nav-open .toy-nav__scrim { opacity: 1; }

	.toy-nav__list {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0 1.25rem 1.5rem;
		margin: 0;
		overflow-y: auto;
	}

	.toy-nav__item { border-bottom: 1px solid var(--toy-line); }
	.toy-nav__link { width: 100%; justify-content: space-between; padding: 1rem 0; }

	.toy-mega {
		position: static;
		box-shadow: none;
		border-top: 0;
	}

	.toy-mega__inner { width: 100%; padding-block: 0 1.25rem; }
	.toy-mega__links,
	.toy-mega--book .toy-mega__links { columns: 1; margin-bottom: 1.25rem; }
	.toy-mega__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   Product carousel arrows
   WooCommerce renders these as .wc-block-next-previous-buttons__button, fully
   round at 100px. Ours take the 4px brand radius. The wrapping group collapses
   to zero height on its own, so it needs an explicit min-height.
   ========================================================================== */

.toy-carousel__nav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	min-height: 42px;
	margin-bottom: 1.5rem;
}

/* These come from WooCommerce's gallery next/previous block, which is built
   to overlay an image and so positions itself absolutely. Left alone it
   floats out of the row we put it in and lands on the section lede - which
   is what it was doing on a phone, where the lede runs to three lines. It
   flows in our row instead. */
.toy-carousel .wc-block-next-previous-buttons {
	position: static !important;
	inset: auto !important;
	gap: 0.5rem;
}

.toy-carousel .wc-block-next-previous-buttons__button {
	width: 42px;
	height: 42px;
	border: 1px solid var(--toy-line) !important;
	border-radius: var(--toy-radius) !important;
	background: #fff !important;
	color: var(--toy-ink) !important;
	transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.toy-carousel .wc-block-next-previous-buttons__button:hover:not(:disabled) {
	background: var(--toy-ink) !important;
	border-color: var(--toy-ink) !important;
	color: #fff !important;
}

.toy-carousel .wc-block-next-previous-buttons__button:disabled {
	opacity: 0.3;
}

.toy-carousel .wc-block-next-previous-buttons__button svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* ==========================================================================
   Shop archive
   ========================================================================== */

.toy-shophero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 3rem;
	width: calc(100% - 2 * var(--wp--style--root--padding-right, 1.5rem));
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.toy-shophero__copy {
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.toy-shophero__crumbs {
	font-size: 0.8125rem;
	color: var(--toy-muted);
	margin: 0 0 1.25rem;
	display: flex;
	gap: 0.5rem;
}

.toy-shophero__crumbs a {
	color: var(--toy-muted);
	text-decoration: none;
}

.toy-shophero__crumbs a:hover { color: var(--toy-ink); }

.toy-shophero__title {
	font-family: var(--toy-heading-font);
	font-size: clamp(2.25rem, 4vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.04;
	color: var(--toy-ink);
	margin: 0 0 1rem;
}

.toy-shophero__lede {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--toy-muted);
	max-width: 46ch;
	margin: 0 0 1.75rem;
}

.toy-shophero__actions { margin: 0; }

/* Dark button for use on light grounds. */
.toy-btn--dark {
	background: var(--toy-ink);
	color: #fff;
	border-color: var(--toy-ink);
}

.toy-btn--dark:hover {
	background: transparent;
	color: var(--toy-ink);
}

/* The hero art is a cut-out, so it stands on the section rather than filling
   a cropped rectangle - contain, bottom-aligned, no hard edge against the
   stone ground. */
.toy-shophero__media {
	align-self: end;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	min-height: 30rem;
}

.toy-shophero__media img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 34rem;
	object-fit: contain;
	object-position: 50% 100%;
}

@media (max-width: 860px) {
	.toy-shophero__inner { grid-template-columns: 1fr; gap: 0; }
	.toy-shophero__media { min-height: 16rem; order: -1; }
}

/* Shop ticker picks up the brand type treatment. */
.shop-ticker {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Filters column */
.wp-block-woocommerce-product-filters :is(h2, h3, .wp-block-heading) {
	font-family: var(--wp--preset--font-family--figtree) !important;
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
}

.wp-block-woocommerce-product-filters input[type="checkbox"] {
	border-radius: 2px;
}

.wp-block-woocommerce-product-filters :is(input[type="text"], input[type="number"], select) {
	border-radius: var(--toy-radius) !important;
}

/* ---------------------------------------------------------------- shop page
   The shop archive shipped with Skinelle's own ticker and card treatment,
   both of which read as a different site next to the homepage. These bring
   it onto the same components: the dark marquee, and the 4:5 / 4px card
   whose CTA only appears on hover. */

.toy-marquee--links a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.toy-marquee--links a:hover,
.toy-marquee--links a:focus-visible {
	opacity: 0.62;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Card image: same 4:5 crop and slow zoom as .toy-pc on the homepage. */
.toy-shopgrid .wc-block-components-product-image {
	position: relative;
	overflow: hidden;
	border-radius: var(--toy-radius);
	background: var(--toy-surface);
}

.toy-shopgrid .wc-block-components-product-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.7s ease;
}

.toy-shopgrid .wp-block-group:hover .wc-block-components-product-image img {
	transform: scale(1.04);
}

/* Rating sits under the title on the homepage card, so drop the row that
   pairs it with the button and let the button move onto the image.

   The button shows from the start rather than waiting for a hover. A shopper
   should see the thing they are meant to press without first discovering that
   the card reacts to a cursor - and on a phone there is no cursor to discover
   it with, which left it unreachable there entirely: this grid never had the
   (hover: none) fallback the theme's own cards carry. */
.toy-shopgrid .wp-block-group > .wp-block-group:has(> .wp-block-woocommerce-product-button) {
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 3;
	margin: 0;
}

/* The card needs to be the positioning context for that CTA. */
.toy-shopgrid > .wp-block-post,
.toy-shopgrid .wc-block-product-template__responsive > li,
.toy-shopgrid li.wp-block-post {
	position: relative;
}

.toy-shopgrid .wc-block-components-product-button .wp-block-button__link,
.toy-shopgrid .wc-block-components-product-button a,
.toy-shopgrid .wc-block-components-product-button button {
	display: block;
	width: 100%;
	margin: 0;
	text-align: center;
	background: var(--toy-ink);
	color: #fff;
	border: 0;
	border-radius: var(--toy-radius);
	padding: 0.85rem 1rem;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-decoration: none;
}

/* Rating would otherwise ride along inside the hover overlay. */
.toy-shopgrid .wp-block-woocommerce-product-rating { display: none; }

/* ============================================================== booking pages
   The booking hub (/booking/) and the service detail pages (/service/{slug}/).
   Everything here reuses the existing tokens and the .toy-pc card, so the
   booking flow reads as the same site as the shop and the homepage. */

/* ------------------------------------------------------------- booking hero */





.toy-bookhero__crumbs {
	font-size: 0.8125rem;
	color: var(--toy-muted);
	margin: 0 0 1.25rem;
	display: flex;
	gap: 0.5rem;
}

.toy-bookhero__crumbs a { color: var(--toy-muted); text-decoration: none; }
.toy-bookhero__crumbs a:hover { color: var(--toy-ink); }

.toy-bookhero__title {
	font-family: var(--toy-heading-font);
	font-size: clamp(2.25rem, 4vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.04;
	color: var(--toy-ink);
	margin: 0 0 1rem;
}

.toy-bookhero__lede {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--toy-muted);
	max-width: 48ch;
	margin: 0 0 1.75rem;
}

.toy-bookhero__actions {
	margin: 0 0 2.5rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.toy-bookhero__call {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--toy-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--toy-ink);
	padding-bottom: 2px;
}

.toy-bookhero__call:hover { opacity: 0.6; }





.toy-bookhero__facts strong {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--toy-ink);
}

.toy-bookhero__facts span { font-size: 0.8125rem; line-height: 1.45; color: var(--toy-muted); }

/* Cut-out art, standing on the section as it does on the shop hero. */




/* ------------------------------------------------------------------- steps */





.toy-steps__num {
	display: block;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--toy-muted);
	margin-bottom: 0.85rem;
}

.toy-steps__title {
	font-family: var(--toy-heading-font);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--toy-ink);
	margin: 0 0 0.5rem;
}

.toy-steps__text {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--toy-muted);
	margin: 0;
}

/* --------------------------------------------------------- service filters */

.toy-svcfilter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 2.5rem;
}

.toy-svcfilter__btn {
	appearance: none;
	background: transparent;
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	padding: 0.6rem 1.1rem;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--toy-muted);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.toy-svcfilter__btn:hover { border-color: var(--toy-ink); color: var(--toy-ink); }

.toy-svcfilter__btn.is-active {
	background: var(--toy-ink);
	border-color: var(--toy-ink);
	color: #fff;
}

/* Price and duration under the card, on one line. */
.toy-sv__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--toy-line);
}

.toy-sv__price {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--toy-ink);
}

.toy-sv__dur { font-size: 0.8125rem; color: var(--toy-muted); }

.toy-svcgrid__empty {
	text-align: center;
	color: var(--toy-muted);
	font-size: 0.9375rem;
	padding: 3rem 0;
	margin: 0;
}

.toy-sv--book[hidden] { display: none; }

/* Booking and related-service links are text-first directories, not photo galleries. */
.toy-sv--book,
.toy-sv--related {
	display: flex;
	flex-direction: column;
	min-height: 13rem;
	padding: 1rem 0.25rem 1.25rem;
	border-bottom: 1px solid var(--toy-line);
	scroll-margin-top: 8rem;
}

.toy-sv--book .toy-sv__title,
.toy-sv--related .toy-sv__title {
	font-size: 1.0625rem;
	font-weight: 700;
}

.toy-sv--book .toy-sv__desc,
.toy-sv--related .toy-sv__desc { flex: 1; }

.toy-sv--related { min-height: 10rem; }

.toy-sv--book .toy-sv__meta {
	margin-top: 1.25rem;
	padding-top: 0;
	border: 0;
}

.toy-sv__action {
	align-self: flex-start;
	margin-top: 0.9rem;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.22em;
}

.toy-sv--book:hover .toy-sv__action,
.toy-sv--book:focus-visible .toy-sv__action,
.toy-sv--related:hover .toy-sv__action,
.toy-sv--related:focus-visible .toy-sv__action { color: var(--wp--preset--color--stone-700); }

.toy-sv--book:focus-visible,
.toy-sv--related:focus-visible {
	outline: 2px solid var(--toy-ink);
	outline-offset: 3px;
}

@media (max-width: 640px) {
	.toy-svcgrid--book { grid-template-columns: 1fr; }
	.toy-sv--book,
	.toy-sv--related { min-height: 0; }
	.toy-svcpage__related .toy-svcgrid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- policies */

.toy-policies__inner {
	width: calc(100% - 2 * var(--wp--style--root--padding-right, 1.5rem));
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	scroll-margin-top: 7rem;
}



.toy-policycard {
	background: #fff;
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	padding: 1.75rem;
}

.toy-policycard h3 {
	font-family: var(--toy-heading-font);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--toy-ink);
	margin: 0 0 0.6rem;
}

.toy-policycard p {
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--toy-muted);
	margin: 0;
}

/* -------------------------------------------------------------------- FAQ */

.toy-faq {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 4rem;
	align-items: start;
}

.toy-faq__head { position: sticky; top: 7rem; }

.toy-faq__head h2 {
	font-family: var(--toy-heading-font);
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--toy-ink);
	margin: 0 0 1rem;
}

.toy-faq__head p {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--toy-muted);
	margin: 0 0 1rem;
}

.toy-faq__contact { display: flex; flex-direction: column; gap: 0.35rem; }

.toy-faq__contact a {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--toy-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--toy-line);
	padding-bottom: 2px;
	width: fit-content;
}

.toy-faq__contact a:hover { border-color: var(--toy-ink); }

.toy-faq__item { border-bottom: 1px solid var(--toy-line); }
.toy-faq__item:first-child { border-top: 1px solid var(--toy-line); }

.toy-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.35rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 1rem;
	font-weight: 600;
	color: var(--toy-ink);
}

.toy-faq__item summary::-webkit-details-marker { display: none; }
.toy-faq__item summary:hover { opacity: 0.65; }

/* Plus that becomes a minus, drawn rather than loaded. */
.toy-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.toy-faq__icon::before,
.toy-faq__icon::after {
	content: "";
	position: absolute;
	background: var(--toy-ink);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.toy-faq__icon::before { inset: 6px 0 auto; height: 2px; }
.toy-faq__icon::after { inset: 0 6px auto; width: 2px; height: 14px; }

.toy-faq__item[open] .toy-faq__icon::after { transform: rotate(90deg); opacity: 0; }

.toy-faq__answer {
	padding: 0 0 1.5rem;
	max-width: 62ch;
}

.toy-faq__answer p {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--toy-muted);
	margin: 0;
}

/* ----------------------------------------------------------------- studio */

.toy-studio {
	background: var(--toy-ink);
	border-radius: var(--toy-radius);
	padding: clamp(2.5rem, 5vw, 4rem);
	color: #fff;
}

.toy-studio__copy .toy-eyebrow { color: rgba(255, 255, 255, 0.55); }

.toy-studio h2 {
	font-family: var(--toy-heading-font);
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: #fff;
	margin: 0 0 1rem;
}

.toy-studio__lede {
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.7);
	max-width: 56ch;
	margin: 0 0 2.5rem;
}



.toy-studio__cols h3 {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 1rem;
}

.toy-studio__cols p {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 0.75rem;
}

.toy-studio__link {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	padding-bottom: 2px;
}

.toy-studio__link:hover { border-color: #fff; }

.toy-studio__hours { margin: 0; }

.toy-studio__hours > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.toy-studio__hours dt,
.toy-studio__hours dd {
	font-size: 0.875rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
}

.toy-studio__hours dd { font-weight: 600; color: #fff; }

/* ------------------------------------------------- service detail page */

.toy-svcpage { padding-block: 2.5rem 4rem; }

.toy-svcpage__crumbs {
	display: flex;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--toy-muted);
	margin-bottom: 2rem;
}

.toy-svcpage__crumbs a { color: var(--toy-muted); text-decoration: none; }
.toy-svcpage__crumbs a:hover { color: var(--toy-ink); }

.toy-svcpage__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 22rem;
	gap: 4rem;
	align-items: start;
}

.toy-svcpage__title {
	font-family: var(--toy-heading-font);
	font-size: clamp(2rem, 3.6vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.06;
	color: var(--toy-ink);
	margin: 0 0 1rem;
}

.toy-svcpage__lede {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--toy-muted);
	max-width: 60ch;
	margin: 0 0 2.5rem;
}

.toy-svcpage__hero {
	margin: 0 0 3rem;
	border-radius: var(--toy-radius);
	overflow: hidden;
	background: var(--toy-surface);
}

.toy-svcpage__hero img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.toy-svcpage__block { margin-bottom: 3rem; }

.toy-svcpage__block h2 {
	font-family: var(--toy-heading-font);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--toy-ink);
	margin: 0 0 1.25rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--toy-line);
}

.toy-svcpage__block p {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--toy-muted);
	margin: 0;
	max-width: 62ch;
}

/* Ticked list of inclusions. */
.toy-svcpage__ticks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.toy-svcpage__ticks li {
	position: relative;
	padding-left: 1.85rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--toy-muted);
}

.toy-svcpage__ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35rem;
	width: 0.7rem;
	height: 0.4rem;
	border-left: 2px solid var(--toy-ink);
	border-bottom: 2px solid var(--toy-ink);
	transform: rotate(-45deg);
}

/* Numbered timeline. */
.toy-svcpage__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
}

.toy-svcpage__steps li { display: flex; gap: 1.15rem; align-items: flex-start; }

.toy-svcpage__stepnum {
	flex: 0 0 auto;
	width: 1.85rem;
	height: 1.85rem;
	border-radius: 50%;
	background: var(--toy-ink);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.75rem;
	font-weight: 700;
}

.toy-svcpage__steptext { display: flex; flex-direction: column; gap: 0.25rem; }

.toy-svcpage__steptext strong {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--toy-ink);
}

.toy-svcpage__steptext span {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--toy-muted);
}

/* Policy summary as a definition grid, not a wall of text. */
.toy-svcpage__policy dl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
}

.toy-svcpage__policy dt {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--toy-ink);
	margin-bottom: 0.4rem;
}

.toy-svcpage__policy dd {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--toy-muted);
}

.toy-svcpage__policylink { margin-top: 1.75rem !important; }

.toy-svcpage__policylink a {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--toy-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--toy-ink);
	padding-bottom: 2px;
}

/* --------------------------------------------------- sticky booking card */

.toy-svcpage__side { position: sticky; top: 7rem; }

.toy-bookcard {
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	padding: 1.75rem;
	background: #fff;
}

.toy-bookcard__name {
	font-family: var(--toy-heading-font);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--toy-ink);
	margin: 0 0 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--toy-line);
}

.toy-bookcard__facts { margin: 0 0 1.5rem; display: grid; gap: 0.75rem; }

.toy-bookcard__facts > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.toy-bookcard__facts dt {
	font-size: 0.8125rem;
	color: var(--toy-muted);
	margin: 0;
}

.toy-bookcard__facts dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--toy-ink);
	text-align: right;
}

.toy-bookcard__price { font-size: 1.25rem !important; font-weight: 800 !important; }

.toy-bookcard__cta { display: block; width: 100%; text-align: center; }

.toy-bookcard__note,
.toy-bookcard__contact {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--toy-muted);
	margin: 1.25rem 0 0;
}

.toy-bookcard__contact {
	padding-top: 1.25rem;
	border-top: 1px solid var(--toy-line);
}

.toy-bookcard__contact a { color: var(--toy-ink); font-weight: 600; text-decoration: none; }
.toy-bookcard__contact a:hover { text-decoration: underline; }

.toy-svcpage__related { margin-top: 5rem; }

.toy-svcpage__empty { text-align: center; padding: 6rem 0; }
.toy-svcpage__empty p { color: var(--toy-muted); margin-bottom: 1.5rem; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
	.toy-svcpage__grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.toy-svcpage__side { position: static; }
	.toy-bookcard { max-width: 26rem; }
	.toy-faq { grid-template-columns: 1fr; gap: 2.5rem; }
	.toy-faq__head { position: static; }
	.toy-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.toy-policygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.toy-bookhero__inner { grid-template-columns: 1fr; gap: 0; }
	.toy-bookhero__media { min-height: 18rem; order: -1; }
	.toy-bookhero__facts { grid-template-columns: 1fr; gap: 1rem; }
	.toy-studio__cols { grid-template-columns: 1fr; gap: 2rem; }
	.toy-svcpage__policy dl { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.toy-steps { grid-template-columns: 1fr; }
	.toy-policygrid { grid-template-columns: 1fr; }
	.toy-svcfilter { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.5rem; }
	.toy-svcfilter__btn { white-space: nowrap; }
}

/* Card the visitor arrived at via /booking/?service=slug. */
.toy-sv--book.is-picked {
	background: var(--toy-surface);
	box-shadow: inset 3px 0 0 var(--toy-ink);
	padding-inline: 1rem;
}

/* Service-specific preparation, called out so it is not mistaken for the
   general policy further down. */
.toy-svcpage__prep {
	background: var(--wp--preset--color--stone-50, #FAFAF9);
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	padding: 1.75rem;
}

.toy-svcpage__prep h2 { margin-bottom: 0.75rem; }

.toy-svcpage__prepnote {
	font-size: 0.875rem !important;
	line-height: 1.6 !important;
	color: var(--toy-muted);
	margin-bottom: 1.25rem !important;
}

/* ============================================================ academy page
   Course cards are wider than the service cards on purpose: someone weighing
   up a few hundred pounds wants the curriculum visible, not behind a click. */

.toy-bookhero__facts--stats strong {
	font-family: var(--toy-heading-font);
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}



.toy-courses {
	display: grid;
	gap: 1.5rem;
}

.toy-course {
	display: grid;
	grid-template-columns: 20rem minmax(0, 1fr);
	gap: 2.5rem;
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	overflow: hidden;
	background: #fff;
	transition: border-color 0.22s ease;
}

.toy-course:hover { border-color: var(--toy-ink); }

.toy-course.is-featured {
	border-color: var(--toy-ink);
	box-shadow: 0 0 0 1px var(--toy-ink);
}

.toy-course__media {
	position: relative;
	background: var(--toy-surface);
	overflow: hidden;
}

.toy-course__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.toy-course:hover .toy-course__media img { transform: scale(1.04); }

.toy-course__flag {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	background: var(--toy-ink);
	color: #fff;
	border-radius: var(--toy-radius);
	padding: 0.4rem 0.7rem;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.toy-course__body { padding: 2rem 2rem 2rem 0; }

.toy-course__title {
	font-family: var(--toy-heading-font);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--toy-ink);
	margin: 0 0 0.6rem;
}

.toy-course__blurb {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--toy-muted);
	margin: 0 0 1.5rem;
	max-width: 60ch;
}

.toy-course__meta {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 1.25rem 0;
	border-block: 1px solid var(--toy-line);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.toy-course__meta li { display: flex; flex-direction: column; gap: 0.25rem; }

.toy-course__meta span {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--toy-muted);
}

.toy-course__meta strong {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--toy-ink);
}

.toy-course__coverslabel {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--toy-ink);
	margin: 0 0 0.85rem;
}

.toy-course__covers { margin-bottom: 1.75rem; }

.toy-course__covers .toy-svcpage__ticks {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.55rem 1.5rem;
}

.toy-course__covers .toy-svcpage__ticks li { font-size: 0.875rem; }

.toy-course__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding-top: 1.5rem;
	border-top: 1px solid var(--toy-line);
}

.toy-course__price {
	margin: 0;
	font-family: var(--toy-heading-font);
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--toy-ink);
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.toy-course__price span {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--toy-muted);
}

/* What is included, on the dark panel. */
.toy-included { margin-top: 4rem; }



.toy-included__list li {
	position: relative;
	padding-left: 1.75rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.toy-included__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3rem;
	width: 0.7rem;
	height: 0.4rem;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

/* ------------------------------------------------------------------ forms */

.toy-enquire {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 4rem;
	align-items: start;
	margin-top: 5rem;
	padding-top: 4rem;
	border-top: 1px solid var(--toy-line);
}

.toy-enquire__copy h2 {
	font-family: var(--toy-heading-font);
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--toy-ink);
	margin: 0 0 1rem;
}

.toy-enquire__copy p {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--toy-muted);
	margin: 0;
}

.toy-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.toy-form__field { margin: 0 0 1.25rem; }

.toy-form__field label {
	display: block;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--toy-ink);
	margin-bottom: 0.5rem;
}

.toy-form__field input,
.toy-form__field select,
.toy-form__field textarea {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	background: #fff;
	padding: 0.85rem 1rem;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.9375rem;
	color: var(--toy-ink);
	transition: border-color 0.2s ease;
}

.toy-form__field input:focus,
.toy-form__field select:focus,
.toy-form__field textarea:focus {
	outline: none;
	border-color: var(--toy-ink);
}

.toy-form__field textarea { resize: vertical; min-height: 9rem; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.toy-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.toy-form { position: relative; }

.toy-form__submit {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin: 0.5rem 0 0;
}

.toy-form__submit button { cursor: pointer; }

.toy-form__submit span {
	font-size: 0.8125rem;
	color: var(--toy-muted);
}

.toy-formnote {
	border-radius: var(--toy-radius);
	padding: 0.9rem 1.1rem;
	margin: 0 0 1.5rem;
	font-size: 0.875rem;
	line-height: 1.55;
}

.toy-formnote.is-ok {
	background: var(--wp--preset--color--stone-50, #FAFAF9);
	border: 1px solid var(--toy-ink);
	color: var(--toy-ink);
}

.toy-formnote.is-error {
	background: #FEF2F2;
	border: 1px solid #DC2626;
	color: #991B1B;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
	.toy-course { grid-template-columns: 14rem minmax(0, 1fr); gap: 1.75rem; }
	.toy-course__body { padding: 1.5rem 1.5rem 1.5rem 0; }
	.toy-course__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.toy-enquire { grid-template-columns: 1fr; gap: 2.5rem; }
	.toy-included__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.toy-steps--three { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	.toy-course { grid-template-columns: 1fr; gap: 0; }
	.toy-course__media { aspect-ratio: 16 / 10; }
	.toy-course__body { padding: 1.5rem; }
	.toy-course__covers .toy-svcpage__ticks { grid-template-columns: 1fr; }
	.toy-included__list { grid-template-columns: 1fr; }
	.toy-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* ==================================================== about & contact pages
   Same layout ideas as the pages these replace - statement plus a staggered
   image pair, then story, principles and a closing band - rebuilt on the
   brand tokens rather than Skinelle's demo styling. */



.toy-abouthero__title {
	font-family: var(--toy-heading-font);
	font-size: clamp(2.25rem, 4vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.06;
	color: var(--toy-ink);
	margin: 0 0 1.25rem;
}

.toy-abouthero__lede {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--toy-muted);
	max-width: 52ch;
	margin: 0 0 2rem;
}

/* Two images, the second dropped and overlapped a little. */








/* ------------------------------------------------------------------ story */

/* Layout comes from the core columns block; these only dress it. */
.toy-story__media {
	margin: 0;
	background: var(--toy-surface);
}

.toy-story__media img {
	display: block;
	width: 100%;
}

.toy-story__copy h2 {
	font-family: var(--toy-heading-font);
	font-size: clamp(1.75rem, 2.8vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--toy-ink);
	margin: 0 0 1.25rem;
}

.toy-story__copy p {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--toy-muted);
	margin: 0 0 1.1rem;
	max-width: 58ch;
}

.toy-story__stats {
	margin-top: 2.25rem !important;
	padding-top: 1.75rem;
	border-top: 1px solid var(--toy-line);
}

.toy-story__statnum {
	font-family: var(--toy-heading-font);
	font-size: 1.75rem !important;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--toy-ink);
	margin: 0 0 0.3rem !important;
}

.toy-story__statlabel {
	font-size: 0.8125rem !important;
	line-height: 1.45 !important;
	color: var(--toy-muted);
	margin: 0 !important;
	max-width: none !important;
}



/* -------------------------------------------------------- closing band */



.toy-aboutband__copy { padding-block: clamp(2.5rem, 5vw, 4rem); }

.toy-aboutband__copy .toy-eyebrow { color: rgba(255, 255, 255, 0.55); }

.toy-aboutband__copy h2 {
	font-family: var(--toy-heading-font);
	font-size: clamp(1.75rem, 2.8vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: #fff;
	margin: 0 0 1rem;
	max-width: 20ch;
}

.toy-aboutband__copy p {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.7);
	max-width: 48ch;
	margin: 0 0 2rem;
}

.toy-aboutband__actions {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin: 0 !important;
}

.toy-aboutband__link {
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	padding-bottom: 2px;
}

.toy-aboutband__link:hover { border-color: #fff; }





/* ---------------------------------------------------------------- contact */

.toy-contacthero__head { max-width: 62ch; margin-bottom: 3rem; }



.toy-contactcard {
	background: #fff;
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	padding: 1.75rem;
}

.toy-contactcard h2 {
	font-family: var(--toy-heading-font);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--toy-ink);
	margin: 0 0 0.6rem;
}

.toy-contactcard p {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--toy-muted);
	margin: 0 0 1.1rem;
}

.toy-contactcard a {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--toy-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--toy-ink);
	padding-bottom: 2px;
}

.toy-contactcard a:hover { opacity: 0.6; }

.toy-contactaside {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--toy-line);
}

.toy-contactaside h3 {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--toy-ink);
	margin: 0 0 1rem;
}

.toy-contactaside h3 + ul { margin-bottom: 2rem; }









.toy-enquire--contact { margin-top: 0; padding-top: 0; border-top: 0; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
	.toy-policygrid--values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.toy-story { grid-template-columns: 1fr; gap: 2.5rem; }
	.toy-story__media { max-width: 26rem; }
	.toy-contactways { grid-template-columns: 1fr; }
	.toy-aboutband { grid-template-columns: 1fr; padding-inline: clamp(1.5rem, 5vw, 3rem); }
	.toy-aboutband__media { display: none; }
}

@media (max-width: 860px) {
	.toy-abouthero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
	.toy-abouthero__img--short { margin-top: 0; }
	.toy-story__stats { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.toy-policygrid--values { grid-template-columns: 1fr; }
}

/* ============================================================ policy pages
   Both reference sites run their policies as one unbroken block of text.
   Numbered sections and a sticky contents list make a long document usable,
   and let us link straight to a clause from elsewhere on the site. */

.toy-legal { padding-block: 2.5rem 5rem; }

.toy-legal__head {
	max-width: 60ch;
	margin-bottom: 3.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid var(--toy-line);
}

.toy-legal__head h1 {
	font-family: var(--toy-heading-font);
	font-size: clamp(2rem, 3.6vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.06;
	color: var(--toy-ink);
	margin: 0 0 1rem;
}

.toy-legal__lede {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--toy-muted);
	margin: 0 0 1.25rem;
}

.toy-legal__updated {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--toy-muted);
	margin: 0;
}

.toy-legal__grid {
	display: grid;
	grid-template-columns: 17rem minmax(0, 1fr);
	gap: 4rem;
	align-items: start;
}

.toy-legal__toc { position: sticky; top: 7rem; }

.toy-legal__toclabel {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--toy-ink);
	margin: 0 0 1rem;
}

.toy-legal__toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: toc;
}

.toy-legal__toc li {
	counter-increment: toc;
	border-bottom: 1px solid var(--toy-line);
}

.toy-legal__toc a {
	display: block;
	padding: 0.6rem 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--toy-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.toy-legal__toc ol a::before {
	content: counter(toc, decimal-leading-zero) "  ";
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--toy-line);
}

.toy-legal__toc ol a:hover { color: var(--toy-ink); }

.toy-legal__help {
	margin-top: 2rem;
	padding: 1.25rem;
	background: var(--wp--preset--color--stone-50, #FAFAF9);
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
}

.toy-legal__help p {
	font-size: 0.875rem;
	color: var(--toy-muted);
	margin: 0 0 0.5rem;
}

.toy-legal__help a {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--toy-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--toy-ink);
	padding-bottom: 2px;
}

/* Sections are plain heading and paragraph blocks so they stay editable,
   so the numbering is a CSS counter rather than markup. */
.toy-legal__body { counter-reset: toy-section; }

.toy-legal__body h2 {
	counter-increment: toy-section;
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	font-family: var(--toy-heading-font);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--toy-ink);
	margin: 3rem 0 1.1rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--toy-line);
	scroll-margin-top: 7rem;
}

.toy-legal__body h2:first-child { margin-top: 0; }

.toy-legal__body h2::before {
	content: counter(toy-section, decimal-leading-zero);
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--toy-muted);
}

.toy-legal__body p {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--toy-muted);
	margin: 0 0 1rem;
	max-width: 68ch;
}

.toy-legal__grid.wp-block-columns { display: flex; flex-wrap: wrap; align-items: flex-start; }

.toy-legal__foot {
	margin-top: 4rem;
	padding-top: 2rem;
	border-top: 1px solid var(--toy-line);
}

.toy-legal__foot p {
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--toy-muted);
	margin: 0 0 0.5rem;
}

.toy-legal__foot a { color: var(--toy-ink); font-weight: 600; text-decoration: none; }
.toy-legal__foot a:hover { text-decoration: underline; }

/* FAQ page: repeated groups, each with its heading on the left. */
.toy-faq--grouped { margin-bottom: 4rem; }
.toy-faq--grouped:last-child { margin-bottom: 0; }
.toy-faq--grouped .toy-faq__head { position: static; }

@media (max-width: 1100px) {
	.toy-legal__grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.toy-legal__toc { position: static; }
	.toy-legal__toc ol { columns: 2; column-gap: 2rem; }
}

@media (max-width: 640px) {
	.toy-legal__toc ol { columns: 1; }
}

/* Product page: the column under Add to cart was empty, so this carries the
   three things people check before buying hair, plus the install upsell. */
.toy-assure {
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--toy-line);
}

.toy-assure__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; }

.toy-assure__list li {
	position: relative;
	padding-left: 1.85rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.toy-assure__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35rem;
	width: 0.7rem;
	height: 0.4rem;
	border-left: 2px solid var(--toy-ink);
	border-bottom: 2px solid var(--toy-ink);
	transform: rotate(-45deg);
}

.toy-assure__list strong {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--toy-ink);
}

.toy-assure__list span { font-size: 0.875rem; line-height: 1.55; color: var(--toy-muted); }

.toy-assure__cta {
	margin: 0;
	padding: 1.1rem 1.25rem;
	background: var(--wp--preset--color--stone-50, #FAFAF9);
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.toy-assure__cta a {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--toy-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--toy-ink);
	padding-bottom: 2px;
	width: fit-content;
}

.toy-assure__cta span { font-size: 0.8125rem; color: var(--toy-muted); }

/* Primary button for dark grounds - .toy-btn only sets a white border,
   so without this the label inherits body ink and vanishes. */
.toy-btn--light {
	background: #fff;
	color: var(--toy-ink);
	border-color: #fff;
}

.toy-btn--light:hover {
	background: transparent;
	color: #fff;
	border-color: #fff;
}

/* Core columns stack at 781px. The story section gets cramped before
   that, so it stacks at the same breakpoint the rest of the page uses. */
@media (max-width: 1100px) {
	.toy-story { flex-wrap: wrap !important; }
	.toy-story > .wp-block-column { flex-basis: 100% !important; }
	.toy-story__media { max-width: 26rem; }
}

@media (max-width: 860px) {
	.toy-story__stats { flex-wrap: wrap !important; }
	.toy-story__stats > .wp-block-column { flex-basis: 100% !important; }
}

.toy-aboutband {
	background: var(--toy-ink);
	border-radius: var(--toy-radius);
	overflow: hidden;
}

/* ================================================ block-markup adjustments
   The about sections are core blocks now rather than raw HTML, so these
   rules dress the markup core produces. Same design, editable content. */

/* Hero: the inner wrapper still carries the page gutter and max width, but
   the two halves are a columns block now, so the grid rules are gone. */
.toy-abouthero__inner {
	display: block;
	width: calc(100% - 2 * var(--wp--style--root--padding-right, 1.5rem));
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-block: clamp(3rem, 6vw, 5rem);
}

.toy-abouthero__media > .wp-block-columns { margin-block: 0; }

.toy-abouthero__img { margin: 0 !important; }

.toy-abouthero__img img {
	display: block;
	width: 100%;
	background: var(--toy-surface);
}

.toy-abouthero__img--short { margin-top: 3rem !important; }

/* Button rows. Core buttons replace the old .toy-btn anchors, so the brand
   look is mapped onto .wp-block-button__link here. */
.toy-btnrow { gap: 1.5rem !important; align-items: center; }

.toy-btnrow .wp-block-button__link {
	border-radius: var(--toy-radius);
	padding: 0.95rem 2rem;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	border: 1px solid transparent;
	transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.toy-btnrow__solid .wp-block-button__link {
	background: var(--toy-ink);
	color: #fff;
	border-color: var(--toy-ink);
}

.toy-btnrow__solid .wp-block-button__link:hover {
	background: transparent;
	color: var(--toy-ink);
	border-color: var(--toy-ink);
}

/* The secondary action is a plain underlined link, not a button. */
.toy-btnrow__plain .wp-block-button__link {
	background: transparent;
	color: var(--toy-ink);
	border: 0;
	border-bottom: 1px solid var(--toy-ink);
	border-radius: 0 !important;
	padding: 0 0 2px;
	font-size: 0.875rem;
}

.toy-btnrow__plain .wp-block-button__link:hover { opacity: 0.6; }

/* The hero phone action is text, not another boxed button. */
.toy-btnrow__phone .wp-block-button__link,
.toy-btnrow__phone .wp-block-button__link:hover {
	border: 0;
	box-shadow: none;
}

.toy-btnrow__phone .wp-block-button__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 5px;
}

/* Same row inverted for the dark band. */
.toy-btnrow--ondark .toy-btnrow__solid .wp-block-button__link {
	background: #fff;
	color: var(--toy-ink);
	border-color: #fff;
}

.toy-btnrow--ondark .toy-btnrow__solid .wp-block-button__link:hover {
	background: transparent;
	color: #fff;
	border-color: #fff;
}

.toy-btnrow--ondark .toy-btnrow__plain .wp-block-button__link {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.4);
}

.toy-btnrow--ondark .toy-btnrow__plain .wp-block-button__link:hover {
	border-bottom-color: #fff;
	opacity: 1;
}

/* Value cards are columns now; the card padding and border come from
   .toy-policycard, so only the column defaults need resetting. */
.toy-policygrid--values.wp-block-columns { display: flex; flex-wrap: wrap; }

.toy-policygrid--values > .wp-block-column {
	flex-basis: calc(25% - 0.94rem) !important;
	flex-grow: 0;
}

/* Closing band: columns rather than grid. */
.toy-aboutband.wp-block-columns {
	margin-top: 4rem;
	padding-left: clamp(2rem, 5vw, 4rem);
	padding-right: 0;
	gap: 2rem;
}

.toy-aboutband__copy { padding-block: clamp(2.5rem, 5vw, 4rem); }

.toy-aboutband__media { align-self: flex-end; }

.toy-aboutband__media figure { margin: 0 !important; }

.toy-aboutband__media img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 34rem;
	margin-inline: auto;
	object-fit: contain;
}

@media (max-width: 1100px) {
	.toy-policygrid--values > .wp-block-column { flex-basis: calc(50% - 0.63rem) !important; }
	.toy-aboutband.wp-block-columns { flex-wrap: wrap !important; padding-inline: clamp(1.5rem, 5vw, 3rem); }
	.toy-aboutband > .wp-block-column { flex-basis: 100% !important; }
	.toy-aboutband__media { display: none; }
}

@media (max-width: 860px) {
	.toy-abouthero__inner .wp-block-columns { flex-wrap: wrap !important; }
	.toy-abouthero__inner > .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
	.toy-abouthero__img--short { margin-top: 0 !important; }
}

@media (max-width: 640px) {
	.toy-policygrid--values > .wp-block-column { flex-basis: 100% !important; }
}

/* Contact: core blocks now, so these dress the markup core produces. */
.toy-contactways.wp-block-columns { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.toy-contactways > .wp-block-column {
	flex-basis: calc(33.333% - 0.84rem) !important;
	flex-grow: 0;
}

.toy-contactcard__link { margin-bottom: 0 !important; }

.toy-contactcard__link a {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--toy-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--toy-ink);
	padding-bottom: 2px;
}

.toy-contactcard__link a:hover { opacity: 0.6; }

/* Opening hours is a core table now rather than a definition list. */
.toy-hours { margin: 0 0 2rem !important; }
.toy-hours table { border-collapse: collapse; width: 100%; border: 0 !important; }

.toy-hours :is(td, th) {
	border: 0 !important;
	border-bottom: 1px solid var(--toy-line) !important;
	padding: 0.4rem 0;
	font-size: 0.875rem;
	color: var(--toy-muted);
}

.toy-hours :is(td, th):last-child { text-align: right; font-weight: 600; color: var(--toy-ink); }

.toy-enquire--contact.wp-block-columns { display: flex; flex-wrap: wrap; }

@media (max-width: 1100px) {
	.toy-contactways > .wp-block-column { flex-basis: 100% !important; }
	.toy-enquire--contact > .wp-block-column { flex-basis: 100% !important; }
}

/* Why-choose is a core columns block now rather than a ul grid. */
.toy-why.wp-block-columns { display: flex; flex-wrap: wrap; gap: 2rem; }

.toy-why > .wp-block-column {
	flex-basis: calc(25% - 1.5rem) !important;
	flex-grow: 0;
	text-align: center;
}

.toy-why .toy-why__title { margin: 1rem 0 0.5rem !important; }
.toy-why .toy-why__desc { margin: 0 !important; }

@media (max-width: 1100px) { .toy-why > .wp-block-column { flex-basis: calc(50% - 1rem) !important; } }
/* Two up on a phone rather than one. Each item is an icon, three words and
   a short line - a full row each made the section four screens long and the
   reasons stopped reading as a set. */
@media (max-width: 640px) {
	.toy-why.wp-block-columns { gap: 1.75rem 1rem; }
	.toy-why > .wp-block-column { flex-basis: calc(50% - 0.5rem) !important; }
}

/* ============================== book and academy sections as core blocks
   Same design, editable copy. These replace the grid rules the hand-written
   markup used with rules that dress what core outputs. */

/* Hero: the inner wrapper still carries the gutter and max width, but the two
   halves are a columns block now. */
.toy-bookhero__inner {
	display: block;
	width: calc(100% - 2 * var(--wp--style--root--padding-right, 1.5rem));
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.toy-bookhero__copy { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

.toy-bookhero__facts.wp-block-columns {
	margin-top: 2.5rem !important;
	padding-top: 1.75rem;
	border-top: 1px solid var(--toy-line);
	gap: 1.5rem;
}

.toy-bookhero__factname {
	font-family: var(--wp--preset--font-family--figtree) !important;
	font-size: 0.9375rem !important;
	font-weight: 700;
	letter-spacing: 0 !important;
	color: var(--toy-ink);
	margin: 0 0 0.3rem !important;
}

.toy-bookhero__facts--stats .toy-bookhero__factname {
	font-family: var(--toy-heading-font) !important;
	font-size: 1.75rem !important;
	font-weight: 800;
	letter-spacing: -0.02em !important;
	line-height: 1;
}

.toy-bookhero__factnote {
	font-size: 0.8125rem !important;
	line-height: 1.45 !important;
	color: var(--toy-muted);
	margin: 0 !important;
	max-width: none !important;
}

.toy-bookhero__media { align-self: flex-end; }
.toy-bookhero__media figure { margin: 0 !important; }

.toy-bookhero__media img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 30rem;
	margin-inline: auto;
	object-fit: contain;
}

/* Steps: a columns block, numbered by counter rather than markup. */
.toy-steps.wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem 1.5rem;
	counter-reset: toy-step;
	margin-top: 0;
}

.toy-steps > .wp-block-column {
	flex-basis: calc(25% - 1.125rem) !important;
	flex-grow: 0;
	padding-top: 1.25rem;
	border-top: 2px solid var(--toy-ink);
}

.toy-steps--three > .wp-block-column { flex-basis: calc(33.333% - 1rem) !important; }

.toy-steps > .wp-block-column::before {
	counter-increment: toy-step;
	content: counter(toy-step, decimal-leading-zero);
	display: block;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--toy-muted);
	margin-bottom: 0.85rem;
}

.toy-steps .toy-steps__title {
	font-size: 1.0625rem !important;
	margin: 0 0 0.5rem !important;
}

.toy-steps .toy-steps__text { margin: 0 !important; max-width: none !important; }

/* Policy cards: a columns block, three across. */
.toy-policygrid.wp-block-columns { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.toy-policygrid > .wp-block-column {
	flex-basis: calc(33.333% - 0.84rem) !important;
	flex-grow: 0;
}

/* Studio panel: heading and paragraph blocks inside the dark box. */
.toy-studio > .wp-block-heading {
	font-family: var(--toy-heading-font);
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: #fff;
	margin: 0 0 1rem;
}

.toy-studio__cols.wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	padding-top: 2.5rem;
	margin-top: 2.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.toy-studio__cols .wp-block-heading {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 1rem;
}

/* Hours table on the dark panel. */
.toy-hours--dark :is(td, th) {
	color: rgba(255, 255, 255, 0.85) !important;
	border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.toy-hours--dark :is(td, th):last-child { color: #fff !important; }

/* Academy kit list, on the dark band. */
.toy-included__list.wp-block-list {
	list-style: none;
	margin: 0;
	padding: 2.5rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem 2rem;
}

.toy-included__list.wp-block-list li {
	position: relative;
	padding-left: 1.75rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.toy-included__list.wp-block-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3rem;
	width: 0.7rem;
	height: 0.4rem;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

@media (max-width: 1100px) {
	.toy-steps > .wp-block-column { flex-basis: calc(50% - 0.75rem) !important; }
	.toy-steps--three > .wp-block-column { flex-basis: 100% !important; }
	.toy-policygrid > .wp-block-column { flex-basis: calc(50% - 0.63rem) !important; }
	.toy-included__list.wp-block-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.toy-bookhero__inner .wp-block-columns { flex-wrap: wrap !important; }
	.toy-bookhero__inner > .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
	.toy-bookhero__facts.wp-block-columns { flex-wrap: wrap !important; }
	.toy-bookhero__facts > .wp-block-column { flex-basis: 100% !important; }
	.toy-studio__cols > .wp-block-column { flex-basis: 100% !important; }
}

@media (max-width: 640px) {
	.toy-steps > .wp-block-column { flex-basis: 100% !important; }
	.toy-policygrid > .wp-block-column { flex-basis: 100% !important; }
	.toy-included__list.wp-block-list { grid-template-columns: 1fr; }
}

/* Core forces `flex-wrap: nowrap !important` on columns above 782px, so any
   of our columns rows that is meant to run to more than one line has to say
   so with the same weight. Without this the twelve policy cards render as
   twelve slivers in a single row. */
.toy-policygrid.wp-block-columns,
.toy-policygrid--values.wp-block-columns,
.toy-steps.wp-block-columns,
.toy-why.wp-block-columns,
.toy-contactways.wp-block-columns,
.toy-courses.wp-block-columns {
	flex-wrap: wrap !important;
}

@media (max-width: 1100px) {
	.toy-bookhero__facts.wp-block-columns,
	.toy-story.wp-block-columns,
	.toy-enquire.wp-block-columns,
	.toy-aboutband.wp-block-columns,
	.toy-legal__grid.wp-block-columns,
	.toy-studio__cols.wp-block-columns {
		flex-wrap: wrap !important;
	}
}

@media (max-width: 860px) {
	.toy-abouthero__inner .wp-block-columns,
	.toy-bookhero__inner .wp-block-columns,
	.toy-abouthero__media .wp-block-columns {
		flex-wrap: wrap !important;
	}
}

/* A client video whose link points at an uploaded file plays on the page
   rather than sending people to Instagram. */
.toy-vid--inline .toy-pc__media video {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--toy-ink);
	border-radius: var(--toy-radius);
}

.toy-vid--inline { cursor: default; }

/* ============================================================ account pages
   WooCommerce ships its own markup for login, register, the dashboard, orders,
   addresses and account details. These bring all of it onto the design system:
   bordered 4px inputs like the enquiry forms, our heading font instead of the
   parent's serif, and our buttons. */

.toy-account { --toy-account-gap: 2.5rem; }

/* WooCommerce headings inside the account area default to the parent's serif. */
.toy-account h2,
.toy-account h3,
.toy-account legend {
	font-family: var(--toy-heading-font);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--toy-ink);
}

.toy-account h2 { font-size: 1.5rem; margin: 0 0 1.25rem; }
.toy-account h3 { font-size: 1.125rem; margin: 0 0 0.75rem; }

/* ------------------------------------------------- login and register pair */

.toy-account .u-columns.col2-set,
.toy-account .u-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	align-items: start;
}

.toy-account .u-column1,
.toy-account .u-column2 {
	width: auto;
	float: none;
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	padding: 2rem;
	background: #fff;
}

/* Register sits on the tinted card so the two are visually distinct. */
.toy-account .u-column2 {
	background: var(--wp--preset--color--stone-50, #FAFAF9);
}

.toy-account .woocommerce-form {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}

/* ----------------------------------------------------------------- fields */

.toy-account .form-row,
.toy-account .woocommerce-form-row {
	display: block;
	margin: 0 0 1.25rem;
	padding: 0;
}

.toy-account label {
	display: block;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--toy-ink);
	margin-bottom: 0.5rem;
}

.toy-account label .required {
	color: var(--toy-muted);
	text-decoration: none;
	border: 0;
}

.toy-account input[type="text"],
.toy-account input[type="email"],
.toy-account input[type="tel"],
.toy-account input[type="password"],
.toy-account input[type="number"],
.toy-account select,
.toy-account textarea {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--toy-line) !important;
	border-radius: var(--toy-radius) !important;
	background: #fff;
	padding: 0.85rem 1rem !important;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.9375rem;
	color: var(--toy-ink);
	transition: border-color 0.2s ease;
}

.toy-account input:focus,
.toy-account select:focus,
.toy-account textarea:focus {
	outline: none;
	border-color: var(--toy-ink) !important;
}

/* The show/hide password eye sits inside the field. */
.toy-account .woocommerce-password-hint { font-size: 0.8125rem; color: var(--toy-muted); }

.toy-account .password-input,
.toy-account .woocommerce-password-input { position: relative; display: block; }

.toy-account .show-password-input {
	position: absolute;
	right: 0.85rem;
	top: 50%;
	transform: translateY(-50%);
}

/* Checkboxes sit beside their label, not above it. */
.toy-account .woocommerce-form-login__rememberme,
.toy-account .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.875rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--toy-muted);
	margin: 0;
}

.toy-account .woocommerce-form-login__rememberme input,
.toy-account .woocommerce-form__label-for-checkbox input {
	width: auto;
	margin: 0;
}

/* --------------------------------------------------------------- buttons */

.toy-account .button,
.toy-account button[type="submit"],
.toy-account .woocommerce-Button {
	display: inline-block;
	background: var(--toy-ink);
	color: #fff;
	border: 1px solid var(--toy-ink);
	border-radius: var(--toy-radius);
	padding: 0.95rem 2rem;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.22s ease, color 0.22s ease;
}

.toy-account .button:hover,
.toy-account button[type="submit"]:hover,
.toy-account .woocommerce-Button:hover {
	background: transparent;
	color: var(--toy-ink);
}

.toy-account .woocommerce-form-login__submit,
.toy-account .woocommerce-form-register__submit { margin-right: 1rem; }

.toy-account .woocommerce-LostPassword {
	margin: 1.25rem 0 0;
	font-size: 0.875rem;
}

.toy-account .woocommerce-LostPassword a {
	color: var(--toy-ink);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--toy-line);
	padding-bottom: 2px;
}

.toy-account .woocommerce-LostPassword a:hover { border-color: var(--toy-ink); }

/* ------------------------------------------------- signed-in: nav + content */

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

.toy-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	overflow: hidden;
	background: #fff;
}

.toy-account .woocommerce-MyAccount-navigation li { margin: 0; }

.toy-account .woocommerce-MyAccount-navigation li + li { border-top: 1px solid var(--toy-line); }

.toy-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.9rem 1.1rem;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--toy-muted);
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}

.toy-account .woocommerce-MyAccount-navigation a:hover {
	background: var(--wp--preset--color--stone-50, #FAFAF9);
	color: var(--toy-ink);
}

.toy-account .woocommerce-MyAccount-navigation .is-active a {
	background: var(--toy-ink);
	color: #fff;
	font-weight: 600;
}

.toy-account .woocommerce-MyAccount-content > p:first-child {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--toy-muted);
}

/* ------------------------------------------------------------ orders table */

.toy-account .woocommerce-orders-table,
.toy-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--toy-line) !important;
	border-radius: var(--toy-radius);
	overflow: hidden;
	font-size: 0.9375rem;
}

.toy-account table.shop_table th {
	background: var(--wp--preset--color--stone-50, #FAFAF9);
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--toy-ink);
	text-align: left;
	padding: 0.9rem 1rem !important;
	border: 0 !important;
	border-bottom: 1px solid var(--toy-line) !important;
}

.toy-account table.shop_table td {
	padding: 1rem !important;
	border: 0 !important;
	border-bottom: 1px solid var(--toy-line) !important;
	color: var(--toy-muted);
	vertical-align: middle;
}

.toy-account table.shop_table tr:last-child td { border-bottom: 0 !important; }

.toy-account table.shop_table .button { padding: 0.6rem 1.1rem; font-size: 0.75rem; }

/* Empty state - no orders yet. */
.toy-account .woocommerce-info,
.toy-account .woocommerce-message,
.toy-account .woocommerce-error {
	list-style: none;
	border: 1px solid var(--toy-line);
	border-left: 3px solid var(--toy-ink);
	border-radius: var(--toy-radius);
	background: var(--wp--preset--color--stone-50, #FAFAF9);
	padding: 1.1rem 1.25rem;
	margin: 0 0 1.75rem;
	font-size: 0.9375rem;
	color: var(--toy-ink);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.toy-account .woocommerce-error { border-left-color: #DC2626; background: #FEF2F2; color: #991B1B; }

.toy-account .woocommerce-info::before,
.toy-account .woocommerce-message::before,
.toy-account .woocommerce-error::before { content: none; }

/* ---------------------------------------------------------------- addresses */

.toy-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.toy-account .woocommerce-Address {
	width: auto;
	float: none;
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	padding: 1.75rem;
	background: #fff;
}

.toy-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.toy-account .woocommerce-Address-title h2,
.toy-account .woocommerce-Address-title h3 { margin: 0; font-size: 1.125rem; }

.toy-account .woocommerce-Address address {
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--toy-muted);
}

.toy-account .woocommerce-Address-title a {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--toy-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--toy-ink);
	padding-bottom: 2px;
	white-space: nowrap;
}

/* --------------------------------------------------- edit account details */

.toy-account .woocommerce-EditAccountForm fieldset {
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	padding: 1.75rem;
	margin: 2rem 0 1.5rem;
}

.toy-account .woocommerce-EditAccountForm legend {
	font-size: 1rem;
	padding-inline: 0.6rem;
}

.toy-account .woocommerce-EditAccountForm .form-row-first,
.toy-account .woocommerce-EditAccountForm .form-row-last {
	float: none;
	width: auto;
}

@media (min-width: 782px) {
	.toy-account .woocommerce-EditAccountForm .form-row-first,
	.toy-account .woocommerce-EditAccountForm .form-row-last {
		display: inline-block;
		width: calc(50% - 0.63rem);
		vertical-align: top;
	}
	.toy-account .woocommerce-EditAccountForm .form-row-first { margin-right: 1.25rem; }
}

/* -------------------------------------------------------------- responsive */

@media (min-width: 900px) {
	/* Signed in: nav on the left, content on the right. */
	.woocommerce-account.logged-in .toy-account .woocommerce {
		display: grid;
		grid-template-columns: 16rem minmax(0, 1fr);
		gap: var(--toy-account-gap);
		align-items: start;
	}
}

@media (max-width: 899px) {
	.toy-account .u-columns.col2-set,
	.toy-account .u-columns { grid-template-columns: 1fr; }
	.toy-account .woocommerce-Addresses { grid-template-columns: 1fr; }
	.toy-account .woocommerce-MyAccount-navigation { margin-bottom: 2rem; }
}

@media (max-width: 600px) {
	.toy-account .u-column1,
	.toy-account .u-column2 { padding: 1.5rem; }

	/* Orders table stacks into rows on a phone. */
	.toy-account table.shop_table thead { display: none; }
	.toy-account table.shop_table tr { display: block; border-bottom: 1px solid var(--toy-line); }
	.toy-account table.shop_table td { display: flex; justify-content: space-between; gap: 1rem; border: 0 !important; }
	.toy-account table.shop_table td::before { content: attr(data-title); font-weight: 600; color: var(--toy-ink); }
}

/* WooCommerce lays the login/register pair out with `#customer_login .col-1`,
   an ID selector that outranks anything class-based, so the columns stayed
   floated at 47% and rendered in reverse order inside our grid. Matching the
   ID is the only way to take the layout back. */
.toy-account #customer_login.u-columns {
	max-width: none;
	width: 100%;
}

.toy-account #customer_login .u-column1,
.toy-account #customer_login .u-column2,
.toy-account #customer_login .col-1,
.toy-account #customer_login .col-2 {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

/* Account headings inherit the parent's serif from a rule that outranks a
   plain descendant selector, so this states the brand face explicitly. */
.toy-account h2,
.toy-account h3,
.toy-account legend,
.toy-account .woocommerce-Address-title h3 {
	font-family: var(--toy-heading-font) !important;
}

/* Placed explicitly: with the floats removed the two columns still landed in
   the wrong tracks, and stating the column is more robust than working out
   which WooCommerce rule is responsible. Sign-in first, then sign-up. */
.toy-account #customer_login .u-column1 { grid-column: 1; grid-row: 1; }
.toy-account #customer_login .u-column2 { grid-column: 2; grid-row: 1; }

@media (max-width: 899px) {
	.toy-account #customer_login .u-column1,
	.toy-account #customer_login .u-column2 { grid-column: 1; grid-row: auto; }
}

/* Why an account is worth making, above the register fields. */
.toy-account__why {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.toy-account__why li {
	position: relative;
	padding-left: 1.75rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--toy-muted);
}

.toy-account__why li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3rem;
	width: 0.7rem;
	height: 0.4rem;
	border-left: 2px solid var(--toy-ink);
	border-bottom: 2px solid var(--toy-ink);
	transform: rotate(-45deg);
}

/* Dashboard shortcuts. */
.toy-account__intro {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--toy-muted);
	margin: 0 0 1.5rem;
}

.toy-account__shortcuts { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.toy-account__shortcuts a {
	display: inline-block;
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	padding: 0.8rem 1.25rem;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--toy-ink);
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.toy-account__shortcuts a:hover {
	border-color: var(--toy-ink);
	background: var(--wp--preset--color--stone-50, #FAFAF9);
}

/* The remember-me checkbox sat hard against the submit button. */
.toy-account .woocommerce-form-login__submit { margin-right: 1.25rem !important; }
.toy-account .woocommerce-form-login__rememberme { display: inline-flex; vertical-align: middle; }

/* Dashboard shortcut cards. */
.toy-account__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.toy-account__card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	padding: 1.35rem;
	text-decoration: none;
	background: #fff;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.toy-account__card:hover {
	border-color: var(--toy-ink);
	background: var(--wp--preset--color--stone-50, #FAFAF9);
}

.toy-account__cardtitle {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--toy-ink);
}

.toy-account__cardnote { font-size: 0.8125rem; line-height: 1.5; color: var(--toy-muted); }

.toy-account__signout { font-size: 0.875rem; color: var(--toy-muted); margin: 0; }

.toy-account__signout a {
	color: var(--toy-ink);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--toy-line);
	padding-bottom: 2px;
}

@media (max-width: 700px) {
	.toy-account__cards { grid-template-columns: 1fr; }
}

/* WooCommerce gives the account nav and content percentage widths and floats
   them. Our rules match its specificity exactly, so load order decided it and
   the nav collapsed to 64px inside a 256px grid track. Stated with weight, and
   scoped to our wrapper so nothing else on the site is affected. */
.toy-account .woocommerce-MyAccount-navigation,
.toy-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

/* The addresses page reuses the same u-columns markup as the login pair, so
   it needs the same float reset and explicit placement - without it the two
   cards land diagonally inside an empty box. */
.toy-account .woocommerce-Addresses.u-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	border: 0;
	padding: 0;
}

.toy-account .woocommerce-Addresses .u-column1,
.toy-account .woocommerce-Addresses .u-column2,
.toy-account .woocommerce-Addresses .col-1,
.toy-account .woocommerce-Addresses .col-2 {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	background: #fff;
}

.toy-account .woocommerce-Addresses .u-column1 { grid-column: 1; grid-row: 1; }
.toy-account .woocommerce-Addresses .u-column2 { grid-column: 2; grid-row: 1; }

/* The heading and its edit link share a line; the heading must not be forced
   onto two words by a narrow column. */
.toy-account .woocommerce-Address-title h2,
.toy-account .woocommerce-Address-title h3 { white-space: nowrap; }

@media (max-width: 899px) {
	.toy-account .woocommerce-Addresses.u-columns { grid-template-columns: 1fr; }
	.toy-account .woocommerce-Addresses .u-column1,
	.toy-account .woocommerce-Addresses .u-column2 { grid-column: 1; grid-row: auto; }
}

/* The addresses wrapper picks up a border of its own from somewhere in the
   WooCommerce stack, drawing an empty box around the two cards. */
.toy-account .woocommerce-Addresses.u-columns {
	border: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

/* WooCommerce's newer block notices come in its own blue, which belongs to no
   part of this design. Same treatment as the classic notices. */
.toy-account .wc-block-components-notice-banner {
	border: 1px solid var(--toy-line) !important;
	border-left: 3px solid var(--toy-ink) !important;
	border-radius: var(--toy-radius) !important;
	background: var(--wp--preset--color--stone-50, #FAFAF9) !important;
	color: var(--toy-ink) !important;
	padding: 1.1rem 1.25rem !important;
	margin: 0 0 1rem !important;
	font-size: 0.9375rem;
	align-items: center;
}

.toy-account .wc-block-components-notice-banner > svg {
	fill: var(--toy-ink) !important;
	background: transparent !important;
	margin-right: 0.75rem;
	flex: 0 0 auto;
}

.toy-account .wc-block-components-notice-banner.is-error {
	border-left-color: #DC2626 !important;
	background: #FEF2F2 !important;
	color: #991B1B !important;
}

.toy-account .wc-block-components-notice-banner.is-error > svg { fill: #DC2626 !important; }

.toy-account .wc-block-components-notice-banner a {
	color: var(--toy-ink);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--toy-ink);
	padding-bottom: 1px;
}

/* The parent constrains `& > .wp-block-group:first-child` to wideSize on
   WooCommerce pages - meant to rein in WooCommerce's own output. Our account
   template puts the header group first inside main, so it was caught and the
   full-bleed band stopped at 1368px. A full-width section is full width by
   definition; the `& .woocommerce` half of that rule is left alone. */
.wp-site-blocks main > .wp-block-group.alignfull {
	max-width: none !important;
}

/* ======================================================= mini-cart drawer
   The bag illustration is kept exactly as the parent draws it - it is a
   data URI on the empty-state paragraph. Only the backdrop blob changes,
   from Skinelle lilac to our stone, and the heading drops the serif.
   To restore the original look, delete this block. */

.wp-block-woocommerce-empty-mini-cart-contents-block .wc-block-mini-cart__empty-cart-wrapper p {
	font-family: var(--toy-heading-font) !important;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
	line-height: 1.2 !important;
	color: var(--toy-ink) !important;
}

.wp-block-woocommerce-empty-mini-cart-contents-block .wc-block-mini-cart__empty-cart-wrapper p::before {
	background-image: url('data:image/svg+xml,%3Csvg width="142" height="196" viewBox="0 0 142 196" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M2.71167 73.3876C-7.71061 91.1055 14.1147 110.41 30.792 98.1178C32.4148 96.9214 34.1952 95.8794 36.1528 95.0304C59.6443 84.8304 78.6927 94.3975 89.3277 82.4338C99.9626 70.47 88.5871 41.0933 59.8097 42.0813C43.4909 42.6409 15.1428 52.2543 2.71167 73.3876Z" fill="%23E7E5E4"/%3E%3Cpath d="M129.718 73.0255C109.709 73.0255 103.674 101.254 79.4273 97.8895C17.0275 89.2293 -7.46098 174.787 94.9608 178.89C145.553 180.914 149.727 73.0293 129.714 73.0293L129.718 73.0255Z" fill="%23E7E5E4"/%3E%3Cpath d="M106.378 195.9C104.573 195.9 102.74 195.803 100.884 195.579C87.4447 193.973 88.2658 184.421 88.8053 178.102C89.1187 174.47 89.2139 172.405 87.6272 172.225C87.2028 172.178 86.8775 172.268 86.6315 172.511C85.5367 173.588 85.985 177.412 86.4174 181.107C86.9449 185.62 87.4883 190.29 85.7787 192.245C85.2591 192.837 84.5609 193.154 83.7001 193.178C79.6462 193.307 68.5314 190.831 56.7702 188.214C47.8411 186.227 38.6066 184.17 31.9227 183.136C23.9774 181.902 19.3681 181.941 16.0043 181.969C12.8071 181.996 10.4945 182.016 7.33307 180.938C2.90622 179.43 3.80666 173.996 5.16724 165.768C5.88918 161.396 6.78963 155.954 7.103 149.818C7.97567 132.564 8.64206 55.0137 8.65 54.234C8.65 54.046 8.8047 53.8932 8.99907 53.8932C9.18947 53.8932 9.34417 54.0499 9.34417 54.238C9.33624 55.0215 8.66985 132.584 7.79717 149.854C7.4838 156.024 6.57938 161.49 5.85347 165.878C4.50479 174.043 3.68765 178.967 7.56312 180.288C10.6135 181.326 12.7595 181.31 16.0043 181.283C19.3919 181.255 24.0329 181.216 32.0338 182.458C38.7375 183.5 47.9839 185.557 56.9249 187.548C68.6425 190.157 79.6977 192.625 83.6803 192.496C84.3467 192.476 84.8624 192.249 85.2551 191.798C86.7664 190.071 86.215 185.35 85.7311 181.185C85.2392 176.977 84.8148 173.341 86.1476 172.025C86.5443 171.633 87.0719 171.469 87.7145 171.543C90.0508 171.809 89.797 174.752 89.5074 178.16C88.956 184.582 88.2024 193.373 100.975 194.898C120.777 197.264 140.44 185.357 141.043 183.563C141.11 183.359 140.876 182.678 139.547 181.42C136.243 178.29 129.42 174.505 126.247 175.696C124.18 176.476 120.836 180.429 117.608 184.257C113.47 189.154 109.896 193.389 107.893 192.727C107.544 192.613 107.016 192.437 106.386 185.459C105.061 170.787 104.339 138.5 104.121 115.314C103.99 101.55 104.014 88.9895 104.184 79.9392C104.319 72.7656 104.521 68.8516 104.732 66.6968C97.6471 65.2002 77.2543 63.0023 60.3045 61.1726C28.2733 57.721 13.1086 55.9226 12.4382 54.3712C12.1963 53.8109 12.458 53.1841 13.2197 52.5063C15.7345 50.2653 22.8945 47.8832 25.0286 47.2054C25.9409 46.9155 34.0013 44.3963 35.4689 45.2033C36.0401 45.5168 38.8168 46.171 43.0096 47.0251C42.375 35.6986 45.8617 19.4081 54.6599 9.23334C61.4033 1.43677 70.2292 -1.45071 80.1857 0.888259C101.356 5.86004 98.5912 31.0128 96.7625 47.6599C96.4492 50.5317 96.1477 53.2585 96.0168 55.5936C103.557 56.1342 110.138 56.1499 114.783 56.1616C117.52 56.1695 119.496 56.1734 120.428 56.2949C120.563 56.3105 120.971 56.3654 121.102 56.6984C121.158 56.8433 121.178 57.0745 120.932 57.3683C119.424 59.1784 104.946 64.8672 97.5559 63.5194C95.5487 63.1551 95.0965 60.4361 95.2829 56.2243C90.8442 55.8913 86.0881 55.3741 81.2051 54.571C69.4835 52.6434 53.5135 49.8421 43.7475 47.8714C43.9815 50.8568 44.521 53.4426 45.3421 55.4133C45.4135 55.5896 45.3302 55.7895 45.1517 55.86C44.9771 55.9305 44.7709 55.8482 44.6995 55.6719C43.8387 53.6111 43.2834 50.8804 43.0533 47.7304C38.7454 46.8528 35.7744 46.1554 35.1278 45.7989C33.6125 44.9722 17.3649 49.7285 13.6838 53.0117C13.3942 53.2703 12.9261 53.7561 13.0769 54.0969C14.1836 55.5074 39.8006 58.2655 60.3838 60.487C82.8632 62.9082 98.5079 64.6595 104.807 66.0425C105.029 64.1737 105.251 64.0562 105.41 63.97C106.477 63.394 108.163 63.0767 110.297 62.6692C113.185 62.1207 116.782 61.439 120.464 59.8092C122.8 58.7749 124.414 57.7249 125.593 56.9531C126.917 56.0911 127.647 55.6131 128.314 55.8678C128.778 56.0441 129.075 56.5299 129.341 57.5447C129.714 58.959 131.519 77.4945 133.804 100.955C136.89 132.619 140.73 172.025 141.741 175.712C141.908 176.323 142.07 177.181 141.519 177.557C140.595 178.192 138.472 176.746 134.799 174.141C131.249 171.617 126.834 168.479 125.188 169.341C123.689 170.125 121.245 173.42 118.881 176.605C115.827 180.723 112.939 184.609 111.158 184.609H111.15C110.753 184.609 110.412 184.421 110.162 184.076C109.047 182.537 108.805 159.025 108.563 123.341C108.389 97.8478 108.195 68.9496 107.278 67.5078C107.12 67.308 106.469 67.0808 105.406 66.8339C104.724 74.3798 104.529 99.0898 104.989 128.403C105.557 164.51 106.858 190.635 108.155 192.073C109.73 192.508 113.633 187.885 117.08 183.806C120.519 179.731 123.772 175.884 126.005 175.042C129.738 173.635 137.009 178.047 140.035 180.911C141.36 182.164 141.924 183.124 141.709 183.763C141.317 184.93 136.005 188.484 128.579 191.395C123.058 193.562 115.101 195.885 106.39 195.885L106.378 195.9ZM105.454 66.2032C106.842 66.5401 107.651 66.8535 107.845 67.1513C108.798 68.6166 109.008 89.3578 109.238 123.349C109.424 150.919 109.638 182.164 110.709 183.692C110.832 183.861 110.963 183.935 111.138 183.935H111.142C112.57 183.935 115.616 179.833 118.306 176.209C120.829 172.812 123.213 169.6 124.851 168.746C126.874 167.688 131.102 170.689 135.192 173.596C137.449 175.198 140.543 177.396 141.11 177.008C141.19 176.954 141.265 176.664 141.059 175.908C140.031 172.166 136.188 132.725 133.098 101.037C130.904 78.5327 129.012 59.0961 128.651 57.7327C128.46 57.0118 128.258 56.6044 128.048 56.526C127.719 56.3967 126.941 56.906 125.958 57.5447C124.76 58.3243 123.117 59.3939 120.729 60.4517C116.973 62.1129 113.335 62.8024 110.412 63.3588C108.369 63.7466 106.751 64.0522 105.771 64.5655C105.656 64.7614 105.549 65.3216 105.45 66.211L105.454 66.2032ZM95.9731 56.2831C95.8105 60.0051 96.1517 62.5752 97.6709 62.8494C100.832 63.4254 105.941 62.6967 111.693 60.8513C116.715 59.2411 119.793 57.5878 120.349 56.9805C120.341 56.9805 120.329 56.9805 120.321 56.9766C119.436 56.859 117.477 56.8551 114.767 56.8473C110.118 56.8355 103.526 56.8199 95.9692 56.2792L95.9731 56.2831ZM43.6919 47.1701C52.6924 48.988 67.5874 51.6404 81.3162 53.901C86.1674 54.7003 90.8958 55.2135 95.3147 55.5465C95.4495 53.2507 95.7431 50.5591 96.0683 47.5893C97.8692 31.1852 100.594 6.39288 80.0191 1.55822C70.3324 -0.718061 61.7444 2.09105 55.1835 9.67997C46.4408 19.792 43.0097 36.012 43.6959 47.1662L43.6919 47.1701Z" fill="%2357534E"/%3E%3Cpath d="M54.5847 9.16753C61.3521 1.34357 70.2155 -1.55615 80.2082 0.791284C85.5209 2.03896 89.3376 4.55415 92.0417 7.88953C94.7445 11.2235 96.332 15.3717 97.1972 19.8773C98.9269 28.8852 97.7754 39.3504 96.8615 47.6704C96.5525 50.5022 96.2564 53.1897 96.1228 55.4993C103.618 56.0328 110.159 56.0495 114.783 56.0613C117.515 56.0691 119.5 56.0734 120.441 56.1959C120.51 56.2039 120.656 56.2225 120.806 56.2856C120.955 56.349 121.116 56.4618 121.195 56.6622C121.228 56.748 121.251 56.8606 121.229 56.9939C121.207 57.1271 121.141 57.2749 121.008 57.4329L121.008 57.4319C120.807 57.6726 120.403 57.9671 119.848 58.2934C119.29 58.6218 118.568 58.989 117.724 59.3733C116.035 60.142 113.849 60.9824 111.48 61.7235C109.111 62.4645 106.555 63.1074 104.129 63.4805C101.704 63.8532 99.4009 63.9578 97.5378 63.618C96.4802 63.426 95.8457 62.6107 95.5002 61.341C95.1604 60.0927 95.092 58.3804 95.1791 56.3159C90.7656 55.9824 86.0401 55.467 81.189 54.6691C69.5188 52.75 53.637 49.9639 43.8579 47.9943C44.0968 50.9177 44.6304 53.4455 45.434 55.3745L45.435 55.3754C45.5269 55.6024 45.419 55.8608 45.1881 55.952L45.189 55.953C44.9654 56.0432 44.6993 55.9384 44.6064 55.7091C43.7475 53.6516 43.1929 50.9362 42.9592 47.8128C40.8373 47.38 39.0424 46.9917 37.6943 46.6665C37.0127 46.5021 36.4441 46.3535 36.0051 46.2236C35.5692 46.0946 35.2524 45.9811 35.08 45.8861C35.0061 45.8457 34.873 45.8167 34.673 45.807C34.4766 45.7976 34.2278 45.8079 33.9323 45.8363C33.3412 45.8931 32.5713 46.0228 31.6761 46.2129C29.8863 46.593 27.6015 47.2118 25.2481 47.9591C22.8946 48.7065 20.4746 49.5822 18.414 50.4751C16.4791 51.3137 14.8709 52.1639 13.9299 52.9336L13.7503 53.0858C13.6076 53.2132 13.4251 53.3931 13.2975 53.5794C13.1694 53.7667 13.1203 53.9269 13.1638 54.0438C13.1886 54.0715 13.2321 54.1065 13.3014 54.1462C13.377 54.1894 13.4762 54.2358 13.6 54.2838C13.848 54.3799 14.1865 54.4812 14.6081 54.5881C15.4508 54.8019 16.6194 55.0342 18.0578 55.2798C20.9344 55.7711 24.8821 56.3168 29.4394 56.8885C38.5537 58.0319 50.1024 59.2772 60.3941 60.3879C82.7432 62.7951 98.3461 64.5405 104.721 65.9213C104.828 65.0558 104.935 64.5774 105.038 64.3029C105.092 64.1593 105.148 64.0659 105.205 64.0014C105.264 63.9353 105.321 63.9048 105.362 63.8824L105.574 63.7751C106.084 63.5322 106.708 63.337 107.429 63.1595C108.254 62.9565 109.212 62.7748 110.278 62.5712C113.166 62.0226 116.754 61.3423 120.423 59.7177C122.752 58.6868 124.36 57.6401 125.538 56.869C126.197 56.44 126.719 56.0995 127.158 55.9003C127.601 55.7 127.98 55.6335 128.349 55.7744L128.444 55.8154C128.903 56.0391 129.189 56.5677 129.438 57.5188L129.478 57.707C129.522 57.944 129.578 58.3265 129.645 58.8407C129.735 59.5295 129.845 60.4624 129.974 61.6142C130.231 63.9179 130.563 67.1013 130.955 70.9728C131.738 78.7162 132.76 89.2155 133.903 100.945C135.446 116.777 137.177 134.545 138.649 148.815C139.385 155.949 140.057 162.21 140.607 166.916C140.882 169.27 141.127 171.235 141.335 172.726C141.543 174.22 141.713 175.232 141.838 175.686C141.921 175.993 142.007 176.372 142 176.725C141.992 177.078 141.888 177.425 141.575 177.639L141.576 177.64C141.313 177.821 140.974 177.845 140.574 177.755C140.174 177.665 139.698 177.456 139.142 177.151C138.031 176.54 136.577 175.524 134.742 174.222C132.966 172.96 130.978 171.547 129.23 170.558C128.356 170.063 127.546 169.678 126.856 169.468C126.161 169.258 125.609 169.233 125.234 169.429C124.872 169.618 124.447 169.964 123.972 170.43C123.499 170.896 122.981 171.478 122.435 172.137C121.344 173.454 120.143 175.071 118.961 176.664C117.435 178.722 115.947 180.728 114.617 182.218C113.952 182.963 113.323 183.583 112.747 184.017C112.173 184.449 111.637 184.709 111.158 184.709H111.15C110.718 184.709 110.348 184.502 110.082 184.135C109.999 184.021 109.929 183.821 109.866 183.556C109.802 183.285 109.742 182.933 109.684 182.501C109.57 181.638 109.468 180.451 109.376 178.961C109.193 175.98 109.051 171.781 108.936 166.515C108.706 155.984 108.585 141.184 108.464 123.342C108.376 110.596 108.284 96.9981 108.099 86.4073C108.006 81.1118 107.891 76.5685 107.742 73.2596C107.667 71.6052 107.583 70.2606 107.49 69.2851C107.443 68.7972 107.395 68.403 107.343 68.1096C107.318 67.963 107.292 67.8429 107.266 67.7496C107.241 67.659 107.216 67.6005 107.196 67.5671C107.168 67.5339 107.114 67.4906 107.021 67.4413C106.927 67.3912 106.803 67.3377 106.648 67.2823C106.36 67.1795 105.974 67.0718 105.496 66.9584C104.823 74.6317 104.631 99.2344 105.089 128.402C105.373 146.455 105.84 162.011 106.399 173.234C106.678 178.846 106.98 183.373 107.293 186.586C107.449 188.192 107.608 189.469 107.768 190.388C107.848 190.847 107.928 191.216 108.008 191.49C108.048 191.627 108.087 191.739 108.125 191.827C108.156 191.897 108.186 191.947 108.212 191.982C108.376 192.019 108.577 191.999 108.816 191.915C109.069 191.826 109.356 191.671 109.673 191.456C110.306 191.025 111.044 190.365 111.844 189.561C113.444 187.954 115.279 185.782 117.004 183.742C118.722 181.705 120.398 179.722 121.923 178.142C123.444 176.567 124.83 175.378 125.97 174.948C126.928 174.587 128.104 174.603 129.367 174.865C130.631 175.128 131.993 175.64 133.329 176.285C136 177.574 138.583 179.398 140.104 180.838C140.77 181.467 141.249 182.029 141.536 182.517C141.821 183.002 141.925 183.435 141.804 183.795C141.748 183.961 141.61 184.157 141.41 184.374C141.208 184.593 140.936 184.843 140.599 185.117C139.925 185.663 138.988 186.31 137.834 187.01C135.523 188.411 132.334 190.031 128.616 191.488C123.098 193.653 115.147 195.975 106.439 195.983L106.427 196H106.378C104.57 196 102.733 195.902 100.872 195.678C97.5013 195.275 95.016 194.374 93.1951 193.143C91.3732 191.911 90.2207 190.352 89.5102 188.646C88.0921 185.241 88.4368 181.248 88.7061 178.093C88.8631 176.274 88.9636 174.861 88.8301 173.882C88.7634 173.393 88.6398 173.025 88.4456 172.769C88.2784 172.549 88.0536 172.406 87.7507 172.345L87.6161 172.324C87.2129 172.279 86.9205 172.365 86.7017 172.581C86.4501 172.829 86.2776 173.246 86.1737 173.807C86.0703 174.365 86.0372 175.052 86.0518 175.825C86.0809 177.372 86.2999 179.246 86.5163 181.095C86.7798 183.35 87.0493 185.652 87.0374 187.635C87.0255 189.613 86.7345 191.303 85.8537 192.31C85.3144 192.924 84.5895 193.253 83.7038 193.277C81.6634 193.342 77.8587 192.753 73.1058 191.824C68.3488 190.893 62.6283 189.62 56.7482 188.312C48.3759 186.449 39.7396 184.525 33.1887 183.441L31.9074 183.235C23.9699 182.002 19.3666 182.041 16.0056 182.069C12.8082 182.096 10.4799 182.116 7.30078 181.033C6.17385 180.649 5.38041 180.012 4.85036 179.14C4.32195 178.271 4.05951 177.175 3.97989 175.879C3.82087 173.289 4.38947 169.86 5.06896 165.751C5.79092 161.379 6.69009 155.942 7.00314 149.814C7.87568 132.562 8.54194 55.0151 8.5499 54.233C8.55045 53.9885 8.7516 53.7932 8.9988 53.7931C9.24472 53.7931 9.44377 53.9951 9.4438 54.2379C9.43588 55.0195 8.76984 132.585 7.89704 149.858C7.58335 156.035 6.678 161.506 5.95212 165.894C5.27702 169.981 4.73846 173.241 4.84939 175.645C4.9048 176.845 5.12179 177.822 5.55787 178.577C5.9922 179.33 6.64781 179.87 7.59549 180.193C10.6283 181.225 12.7592 181.21 16.0036 181.183C19.3939 181.156 24.0408 181.117 32.0489 182.36C38.7565 183.402 48.0067 185.46 56.9464 187.45C62.8056 188.755 68.4981 190.024 73.2229 190.95C77.9519 191.878 81.6997 192.46 83.6775 192.396C84.3197 192.377 84.8082 192.16 85.1803 191.733C85.542 191.319 85.786 190.719 85.9376 189.977C86.0889 189.236 86.1462 188.361 86.1415 187.406C86.1321 185.496 85.8743 183.28 85.6321 181.197C85.3864 179.095 85.1559 177.127 85.1549 175.521C85.1544 174.717 85.2116 173.999 85.354 173.397C85.4963 172.795 85.7259 172.301 86.0771 171.954C86.4987 171.538 87.0586 171.367 87.7263 171.444C88.3335 171.513 88.7801 171.758 89.0984 172.146C89.4143 172.532 89.5971 173.051 89.6947 173.657C89.8895 174.867 89.7512 176.469 89.6069 178.169C89.3307 181.385 89.0088 185.163 90.3368 188.327C90.9994 189.906 92.0736 191.332 93.7729 192.459C95.4734 193.587 97.8052 194.418 100.987 194.798C110.866 195.979 120.715 193.599 128.172 190.698C131.901 189.247 135.029 187.667 137.262 186.338C138.378 185.674 139.27 185.073 139.899 184.584C140.214 184.339 140.462 184.123 140.64 183.942C140.821 183.758 140.919 183.62 140.948 183.531C140.956 183.508 140.96 183.451 140.929 183.348C140.899 183.246 140.839 183.111 140.734 182.939C140.524 182.596 140.139 182.118 139.479 181.492C137.835 179.935 135.312 178.213 132.806 177.028C131.553 176.436 130.307 175.979 129.179 175.745C128.05 175.511 127.05 175.501 126.282 175.789C125.781 175.978 125.195 176.364 124.543 176.901C123.893 177.438 123.183 178.122 122.435 178.902C120.94 180.464 119.299 182.407 117.684 184.321C115.616 186.768 113.684 189.056 112.019 190.649C111.186 191.445 110.416 192.072 109.723 192.459C109.033 192.844 108.402 193 107.862 192.822C107.818 192.808 107.762 192.79 107.702 192.754C107.642 192.718 107.581 192.665 107.52 192.586C107.4 192.428 107.276 192.163 107.148 191.694C106.891 190.754 106.602 188.957 106.286 185.469C104.961 170.792 104.239 138.5 104.02 115.314C103.89 101.551 103.913 88.9889 104.084 79.9374C104.217 72.8607 104.416 68.953 104.624 66.7759C97.4663 65.2811 77.178 63.0944 60.2936 61.2718C44.2785 59.546 32.4777 58.234 24.5971 57.1588C20.6576 56.6213 17.6952 56.1419 15.6747 55.7003C14.6649 55.4796 13.8867 55.2673 13.3385 55.0603C13.0646 54.9569 12.8446 54.8535 12.6808 54.7491C12.5193 54.6462 12.3998 54.535 12.346 54.4106C12.0771 53.7875 12.3841 53.1166 13.1531 52.4321C14.4252 51.2986 16.86 50.1365 19.2298 49.1767C21.6041 48.215 23.9301 47.4496 24.9982 47.1104C25.4551 46.9652 27.7013 46.2618 30.0171 45.6958C31.1747 45.413 32.3526 45.1642 33.3341 45.0363C33.8247 44.9724 34.2693 44.9377 34.6389 44.9456C35.0047 44.9535 35.3116 45.0024 35.5172 45.1154C35.649 45.1877 35.9193 45.2851 36.3262 45.4041C36.73 45.5222 37.2602 45.6603 37.9041 45.8148C39.1662 46.1177 40.8639 46.4843 42.9035 46.9006C42.3017 35.5623 45.7984 19.3286 54.5847 9.16753ZM80.1857 0.888259C70.2292 -1.45071 61.4033 1.43677 54.6599 9.23334C45.8617 19.4081 42.375 35.6986 43.0096 47.0251C39.0791 46.2245 36.3933 45.5989 35.6021 45.2656L35.4689 45.2033C34.0013 44.3963 25.9409 46.9155 25.0286 47.2054C22.8945 47.8832 15.7345 50.2653 13.2197 52.5063C12.458 53.1841 12.1963 53.8109 12.4382 54.3712C13.1096 55.9226 28.2747 57.7211 60.3045 61.1726C77.2543 63.0023 97.6471 65.2002 104.732 66.6968C104.521 68.8516 104.319 72.7656 104.184 79.9392L104.127 83.4933C104.01 92.1486 104.006 103.271 104.121 115.314C104.339 138.5 105.061 170.787 106.386 185.459C107.016 192.435 107.544 192.613 107.893 192.727C109.896 193.389 113.47 189.154 117.608 184.257C120.736 180.548 123.972 176.723 126.05 175.778L126.247 175.696C129.42 174.505 136.243 178.29 139.547 181.42C140.876 182.678 141.11 183.359 141.043 183.563L141.001 183.654C139.847 185.692 121.079 196.865 101.903 194.998L100.975 194.898C89.0011 193.469 88.9145 185.652 89.4049 179.39L89.5074 178.16C89.7879 174.859 90.035 171.994 87.9264 171.576L87.7145 171.543C87.0719 171.469 86.5443 171.633 86.1476 172.025L86.0274 172.155C84.8412 173.569 85.2546 177.109 85.7311 181.185C86.215 185.35 86.7664 190.071 85.2551 191.798L85.1022 191.957C84.7313 192.303 84.2634 192.479 83.6803 192.496L83.2861 192.501C79.558 192.475 70.9377 190.654 61.2753 188.514L56.9249 187.548C47.9839 185.557 38.7375 183.5 32.0338 182.458C24.0329 181.216 19.3919 181.255 16.0043 181.283L14.8355 181.29C12.3968 181.297 10.5183 181.21 8.12539 180.47L7.56312 180.288C4.17214 179.132 4.37435 175.218 5.38124 168.787L5.85347 165.878C6.53399 161.764 7.37187 156.704 7.73212 151.003L7.79717 149.854C8.66985 132.584 9.33624 55.0215 9.34417 54.238C9.34414 54.0733 9.22546 53.9328 9.06809 53.9004L8.99907 53.8932C8.8047 53.8932 8.65 54.046 8.65 54.234C8.64206 55.0137 7.97567 132.564 7.103 149.818C6.78963 155.954 5.88918 161.396 5.16724 165.768L4.68837 168.72C3.66504 175.293 3.45961 179.618 7.33307 180.938C10.0993 181.881 12.2156 181.984 14.8433 181.976L16.0043 181.969C19.3681 181.941 23.9774 181.902 31.9227 183.136C38.6066 184.17 47.8411 186.227 56.7702 188.214C68.5314 190.831 79.6462 193.307 83.7001 193.178C84.5609 193.154 85.2591 192.837 85.7787 192.245C87.2747 190.534 87.046 186.745 86.6119 182.801L86.4174 181.107C85.9985 177.527 85.5648 173.826 86.5338 172.619L86.6315 172.511C86.8775 172.268 87.2028 172.178 87.6272 172.225C89.2139 172.405 89.1187 174.47 88.8053 178.102L88.7042 179.322C88.2187 185.584 88.2847 194.073 100.884 195.579C102.508 195.775 104.115 195.874 105.7 195.896L106.378 195.9L106.39 195.885C114.556 195.885 122.06 193.843 127.516 191.802L128.579 191.395C135.773 188.575 140.982 185.152 141.658 183.88L141.709 183.763C141.91 183.164 141.428 182.283 140.275 181.142L140.035 180.911C137.009 178.047 129.738 173.635 126.005 175.042L125.793 175.13C123.569 176.125 120.412 179.859 117.08 183.806L115.771 185.35C112.693 188.961 109.533 192.453 108.155 192.073C106.939 190.724 105.72 167.68 105.105 135.053L104.989 128.403C104.529 99.0898 104.724 74.3798 105.406 66.8339C106.469 67.0808 107.12 67.308 107.278 67.5078C108.195 68.9496 108.389 97.8478 108.563 123.341C108.805 159.025 109.047 182.537 110.162 184.076C110.381 184.378 110.669 184.56 111.004 184.6L111.15 184.609H111.158L111.328 184.598C112.888 184.396 115.216 181.509 117.745 178.131L118.881 176.605C121.171 173.519 123.536 170.33 125.045 169.422L125.188 169.341C126.834 168.479 131.249 171.617 134.799 174.141C138.472 176.746 140.595 178.192 141.519 177.557C142.001 177.228 141.938 176.53 141.802 175.951L141.741 175.712C140.982 172.947 138.633 150.089 136.204 125.475L133.804 100.955C131.519 77.4972 129.714 58.9629 129.341 57.5447C129.092 56.5932 128.815 56.1065 128.399 55.9042L128.314 55.8678C127.647 55.6131 126.917 56.0911 125.593 56.9531C124.414 57.7249 122.8 58.7749 120.464 59.8092L119.775 60.104C116.336 61.5239 113.004 62.155 110.297 62.6692L108.783 62.9634C107.358 63.2515 106.21 63.5381 105.41 63.97C105.251 64.0562 105.029 64.1737 104.807 66.0425C99.2952 64.8324 86.6282 63.3406 68.488 61.3645L60.3838 60.487C39.8006 58.2655 14.1836 55.5074 13.0769 54.0969C12.9642 53.8414 13.1993 53.5044 13.4459 53.2428L13.6838 53.0117C17.3649 49.7285 33.6125 44.9722 35.1278 45.7989C35.7744 46.1554 38.7454 46.8528 43.0533 47.7304C43.2834 50.8804 43.8387 53.6111 44.6995 55.6719C44.7709 55.8482 44.9771 55.9305 45.1517 55.86C45.3079 55.7982 45.3914 55.6372 45.3618 55.4798L45.3421 55.4133C44.521 53.4426 43.9815 50.8568 43.7475 47.8714C53.5135 49.8421 69.4835 52.6434 81.2051 54.571C86.0881 55.3741 90.8442 55.8913 95.2829 56.2243C95.0965 60.4361 95.5487 63.1551 97.5559 63.5194C104.946 64.8668 119.423 59.1786 120.932 57.3683C121.178 57.0745 121.158 56.8433 121.102 56.6984C120.971 56.3654 120.563 56.3105 120.428 56.2949C119.729 56.2038 118.443 56.1787 116.689 56.1686L114.783 56.1616C110.138 56.1499 103.557 56.1342 96.0168 55.5936C96.115 53.8422 96.3095 51.8705 96.5326 49.7825L96.7625 47.6599C98.5769 31.1429 101.313 6.25301 80.6776 1.00884L80.1857 0.888259ZM111.141 183.836L111.142 183.935H111.138L111.138 183.836H111.141ZM125.958 57.5447C126.941 56.906 127.719 56.3967 128.048 56.526C128.258 56.6044 128.46 57.0118 128.651 57.7327C129.012 59.0961 130.904 78.5327 133.098 101.037C136.188 132.724 140.031 172.164 141.059 175.908C141.265 176.664 141.19 176.954 141.11 177.008L141.05 177.038C140.351 177.26 137.378 175.148 135.192 173.596C131.102 170.689 126.874 167.688 124.851 168.746C123.213 169.6 120.829 172.812 118.306 176.209L117.285 177.582C114.88 180.795 112.391 183.935 111.142 183.935L111.141 183.836C111.297 183.836 111.485 183.779 111.703 183.664C111.92 183.549 112.161 183.38 112.422 183.161C112.944 182.725 113.539 182.104 114.175 181.366C115.449 179.891 116.88 177.963 118.225 176.15C119.486 174.452 120.715 172.797 121.833 171.46C122.948 170.126 123.966 169.094 124.805 168.657C125.341 168.376 126.012 168.371 126.768 168.551C127.525 168.732 128.38 169.104 129.294 169.596C131.121 170.581 133.207 172.063 135.25 173.515C136.38 174.317 137.714 175.264 138.838 175.964C139.4 176.314 139.905 176.599 140.303 176.772C140.503 176.859 140.672 176.916 140.804 176.94C140.941 176.965 141.017 176.951 141.054 176.926C141.057 176.922 141.063 176.911 141.07 176.89C141.081 176.855 141.091 176.799 141.092 176.719C141.095 176.558 141.064 176.307 140.962 175.934L140.911 175.73C140.788 175.193 140.633 174.239 140.45 172.93C140.24 171.43 139.994 169.458 139.717 167.099C139.164 162.379 138.49 156.107 137.753 148.962C136.277 134.673 134.543 116.89 132.998 101.047C131.901 89.7948 130.88 79.3098 130.088 71.4675C129.692 67.5463 129.353 64.2856 129.091 61.9205C128.959 60.7381 128.847 59.7798 128.757 59.0748C128.666 58.3667 128.597 57.9216 128.554 57.7587C128.46 57.4015 128.363 57.1263 128.267 56.9334C128.168 56.7346 128.08 56.6442 128.013 56.6193H128.011C127.96 56.5993 127.877 56.5992 127.749 56.6368C127.624 56.6736 127.472 56.7416 127.295 56.8359C126.941 57.0243 126.505 57.3078 126.012 57.628C124.813 58.4082 123.165 59.4818 120.769 60.543C117.001 62.2092 113.354 62.9008 110.431 63.4571C109.409 63.6511 108.496 63.8238 107.716 64.0122C106.951 64.197 106.321 64.3954 105.845 64.6395C105.801 64.7284 105.752 64.8949 105.703 65.1477C105.654 65.3997 105.606 65.7268 105.56 66.1262C106.217 66.2879 106.744 66.4457 107.134 66.5994C107.337 66.6794 107.506 66.7588 107.637 66.8394C107.767 66.9191 107.869 67.0045 107.929 67.0969C107.999 67.2049 108.059 67.3874 108.113 67.6286C108.168 67.8736 108.22 68.1915 108.268 68.5798C108.366 69.3567 108.453 70.4226 108.532 71.764C108.689 74.4476 108.812 78.2417 108.913 83.0504C109.113 92.6686 109.223 106.353 109.338 123.348C109.431 137.134 109.531 151.837 109.742 163.285C109.847 169.009 109.98 173.918 110.154 177.491C110.241 179.278 110.337 180.729 110.446 181.781C110.5 182.307 110.557 182.732 110.616 183.047C110.646 183.205 110.677 183.334 110.707 183.434C110.738 183.534 110.766 183.599 110.79 183.634L110.872 183.729C110.899 183.755 110.927 183.774 110.954 183.79C111.007 183.82 111.066 183.836 111.138 183.836L111.138 183.935C110.963 183.935 110.832 183.861 110.709 183.692C109.639 182.161 109.424 150.918 109.238 123.349C109.011 89.8912 108.804 69.2708 107.89 67.2345L107.845 67.1513C107.651 66.8535 106.842 66.5401 105.454 66.2032L105.45 66.211C105.549 65.3216 105.656 64.7614 105.771 64.5655C106.506 64.1807 107.6 63.9121 108.962 63.6385L110.412 63.3588C113.335 62.8024 116.973 62.1129 120.729 60.4517C122.52 59.6583 123.892 58.8586 124.972 58.1792L125.958 57.5447ZM95.9692 56.2792C103.526 56.8199 110.118 56.8355 114.767 56.8473C117.477 56.8551 119.436 56.859 120.321 56.9766C120.329 56.9805 120.341 56.9805 120.349 56.9805C119.793 57.5878 116.715 59.2411 111.693 60.8513C105.941 62.6967 100.832 63.4254 97.6709 62.8494C96.1517 62.5752 95.8105 60.0051 95.9731 56.2831L95.9692 56.2792ZM96.0691 56.3861C95.9937 58.2021 96.0413 59.7291 96.2887 60.8376C96.5419 61.9725 96.9936 62.6252 97.689 62.7507C100.826 63.3221 105.915 62.6006 111.663 60.7567C114.17 59.9527 116.191 59.1379 117.653 58.4494C118.385 58.1052 118.975 57.7929 119.417 57.5295C119.729 57.3434 119.961 57.1822 120.117 57.0554C119.166 56.9603 117.299 56.9544 114.767 56.9471C110.14 56.9354 103.584 56.9196 96.0691 56.3861ZM55.1835 9.67997C61.7444 2.09105 70.3324 -0.718061 80.0191 1.55822C100.594 6.39288 97.8692 31.1852 96.0683 47.5893L95.8319 49.763C95.6059 51.8802 95.4158 53.8248 95.3147 55.5465C91.448 55.2551 87.3445 54.8254 83.129 54.1872L81.3162 53.901C67.5874 51.6404 52.6924 48.988 43.6919 47.1701L43.6959 47.1662C43.0204 36.1863 46.3351 20.2979 54.778 10.1587L55.1835 9.67997ZM79.9965 1.65564C70.3464 -0.612033 61.7959 2.18407 55.2591 9.74507C46.5571 19.81 43.1256 35.9537 43.7916 47.088C52.7984 48.905 67.6447 51.549 81.3324 53.8028C86.1432 54.5954 90.8335 55.1048 95.2211 55.4379C95.3587 53.1617 95.6482 50.5034 95.9686 47.5787C96.8694 39.3733 97.9987 29.0895 96.3365 20.2539C95.5056 15.8377 93.9783 11.7898 91.382 8.54609C88.7869 5.30403 85.1195 2.85948 79.9965 1.65564Z" fill="%2357534E"/%3E%3Cpath d="M20.8053 167.304C20.5223 167.304 20.2394 167.257 19.9524 167.167C13.5561 165.153 18.709 142.218 22.8458 123.792C24.9061 114.628 27.0343 105.154 26.1097 104.124C26.0898 104.104 26.0898 104.104 26.0659 104.104C24.408 104.253 22.5628 106.534 20.7296 110.702C19.3108 113.923 18.4102 117.143 18.4022 117.174C18.3504 117.359 18.1591 117.464 17.9758 117.413C17.7885 117.363 17.6809 117.174 17.7327 116.994C17.8801 116.458 21.435 103.83 26.0061 103.423C26.2492 103.399 26.4724 103.489 26.6357 103.67C27.7397 104.9 26.2532 111.819 23.5272 123.937C19.6615 141.136 14.3731 164.69 20.1637 166.512C20.7654 166.7 21.3274 166.63 21.8853 166.297C25.8148 163.95 28.3255 149.438 30.5413 136.638C33.0201 122.307 35.1642 109.923 39.1535 109.923C39.1655 109.923 39.1774 109.923 39.1933 109.923C42.6765 109.993 43.3699 117.527 44.2506 127.071C45.247 137.853 46.3708 150.077 51.7748 154.042C53.3769 155.217 55.2341 155.577 57.4499 155.143C59.0081 154.837 60.1917 154.03 61.0685 152.682C65.3487 146.084 60.8852 128.003 56.9477 112.05C52.9903 96.014 49.571 82.1604 54.6084 80.3269C55.258 80.0879 55.9474 80.1427 56.6528 80.4797C62.013 83.0498 68.3336 102.553 74.4431 121.41C79.4844 136.964 84.6972 153.047 87.7499 153.195C88.2201 153.227 88.6665 152.753 89.077 151.816C92.1656 144.796 89.3599 135.643 86.8891 127.565C84.3265 119.192 82.1147 111.964 87.6821 109.942C88.9614 109.476 90.1251 109.527 91.1413 110.083C94.2379 111.783 95.5132 118.044 96.7486 124.101C97.8765 129.626 99.0402 135.338 101.495 136.846C102.141 137.242 102.846 137.336 103.651 137.124C103.838 137.077 104.03 137.187 104.078 137.367C104.125 137.551 104.014 137.739 103.83 137.786C102.842 138.041 101.929 137.92 101.124 137.426C98.4145 135.761 97.2707 130.162 96.0632 124.234C94.8596 118.33 93.6122 112.226 90.7986 110.683C89.9577 110.22 89.0172 110.189 87.9213 110.585C82.9676 112.383 85.0917 119.325 87.5546 127.365C90.0613 135.553 92.9028 144.839 89.7146 152.087C89.1766 153.313 88.4911 153.916 87.714 153.877C84.4142 153.717 80.2456 141.579 73.7775 121.613C67.9909 103.764 61.4351 83.5317 56.3419 81.0909C55.8079 80.8323 55.3178 80.7931 54.8435 80.9655C50.388 82.5875 53.899 96.8172 57.6172 111.885C61.7818 128.76 66.0899 146.206 61.6503 153.05C60.6819 154.543 59.311 155.476 57.5814 155.816C55.1942 156.287 53.098 155.875 51.3524 154.594C45.7013 150.445 44.5575 138.061 43.5492 127.134C42.7681 118.663 42.0309 110.667 39.1734 110.608C39.1655 110.608 39.1575 110.608 39.1495 110.608C35.7501 110.608 33.4506 123.898 31.2228 136.752C28.8715 150.331 26.4405 164.373 22.244 166.881C21.7777 167.159 21.2955 167.3 20.7973 167.3L20.8053 167.304Z" fill="%23E7E5E4"/%3E%3C/svg%3E') !important;
}

/* ============================================ mini-cart, cart and checkout
   All three are WooCommerce blocks. These bring their chrome onto the design
   system - our heading face, 4px radius, bordered fields and our buttons -
   without touching the block structure itself. */

/* ------------------------------------------------------------ the drawer */

.wc-block-mini-cart__drawer .wc-block-components-drawer {
	border-radius: 0;
}

.wc-block-mini-cart__title,
.wc-block-mini-cart__title h2 {
	font-family: var(--toy-heading-font) !important;
	font-size: 1.375rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
	color: var(--toy-ink) !important;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close {
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	background: #fff;
	transition: border-color 0.2s ease;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover {
	border-color: var(--toy-ink);
}

/* Product rows. */
.wc-block-mini-cart__products-table .wc-block-cart-items__row {
	border-bottom: 1px solid var(--toy-line);
}

.wc-block-mini-cart__products-table .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--toy-ink);
	text-decoration: none;
}

.wc-block-mini-cart__products-table img {
	border-radius: var(--toy-radius);
}

/* The thumbnail and the text that belongs to it sit in adjacent table cells,
   and how much room WooCommerce leaves between them is its own business - which
   has not looked the same on every install. State it here, on both sides, so
   the drawer reads the same wherever it renders rather than inheriting whatever
   the plugin's stylesheet happens to say this version. */
.wc-block-mini-cart__products-table .wc-block-cart-item__image {
	padding-right: 1rem !important;
}

.wc-block-mini-cart__products-table .wc-block-cart-item__product {
	padding-left: 1rem !important;
}

/* Footer totals and the two actions. */
.wc-block-mini-cart__footer {
	border-top: 1px solid var(--toy-line);
}

.wc-block-mini-cart__footer-subtotal {
	font-family: var(--wp--preset--font-family--figtree);
	color: var(--toy-ink);
}

/* ------------------------------------------------ buttons, all three views */

.wc-block-mini-cart__drawer .wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-components-button,
.wp-block-woocommerce-checkout .wc-block-components-button {
	border-radius: var(--toy-radius) !important;
	font-family: var(--wp--preset--font-family--figtree);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0.95rem 2rem;
	transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

/* Solid: checkout, place order, start shopping. */
.wc-block-mini-cart__shopping-button,
.wc-block-mini-cart__footer-checkout,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--toy-ink) !important;
	color: #fff !important;
	border: 1px solid var(--toy-ink) !important;
}

.wc-block-mini-cart__shopping-button:hover,
.wc-block-mini-cart__footer-checkout:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: transparent !important;
	color: var(--toy-ink) !important;
}

/* Outline: view cart. */
.wc-block-mini-cart__footer-cart {
	background: transparent !important;
	color: var(--toy-ink) !important;
	border: 1px solid var(--toy-line) !important;
	box-shadow: none !important;
}

.wc-block-mini-cart__footer-cart:hover {
	border-color: var(--toy-ink) !important;
}

/* ------------------------------------------------------ cart and checkout */

.wp-block-woocommerce-cart .wc-block-components-title,
.wp-block-woocommerce-checkout .wc-block-components-title,
.wp-block-woocommerce-cart h1,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout h1,
.wp-block-woocommerce-checkout h2 {
	font-family: var(--toy-heading-font) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
	color: var(--toy-ink);
}

/* The order summary and totals panel. */
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	padding: 1.75rem;
	background: var(--wp--preset--color--stone-50, #FAFAF9);
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--figtree);
	color: var(--toy-ink);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--toy-heading-font);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* Cart line items. */
.wc-block-cart-items__row {
	border-bottom: 1px solid var(--toy-line) !important;
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	border-radius: var(--toy-radius);
}

.wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--figtree) !important;
	font-weight: 600;
	color: var(--toy-ink) !important;
	text-decoration: none;
}

/* Quantity stepper. */
.wc-block-components-quantity-selector {
	border: 1px solid var(--toy-line) !important;
	border-radius: var(--toy-radius) !important;
}

.wc-block-components-quantity-selector__button {
	color: var(--toy-ink) !important;
	background: transparent !important;
}

/* ------------------------------------------------------- checkout fields */

.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-textarea,
.wp-block-woocommerce-checkout .wc-block-components-combobox-control input,
.wp-block-woocommerce-checkout select {
	box-sizing: border-box;
	border: 1px solid var(--toy-line) !important;
	border-radius: var(--toy-radius) !important;
	background: #fff !important;
	font-family: var(--wp--preset--font-family--figtree) !important;
	font-size: 0.9375rem !important;
	color: var(--toy-ink) !important;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-block-components-combobox-control input:focus {
	outline: none;
	border-color: var(--toy-ink) !important;
	box-shadow: none !important;
}

/* Skinelle draws checkout fields as underline-only: transparent background, a
   single bottom border, and padding-left: 0 so the value sits hard against the
   underline. The rules above put the box back - border, radius, white fill -
   but not the inset a box needs, so every value and floating label ended up
   flush to the left edge, and the country chevron flush to the right.

   Blocks then packs all of this into a 50px field, where a floated label and
   its value have to share the same 25px of line box and print over each other.
   These give the field the height that treatment actually needs and place the
   label above the value rather than on top of it. */

.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-combobox-control input,
.wp-block-woocommerce-checkout .wc-blocks-components-select__select {
	box-sizing: border-box;
	height: 58px !important;
}

/* Empty: the label is the placeholder, centred on the value it will become. */
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-combobox-control input {
	padding: 16px 12px !important;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input label {
	top: 29px;
	left: 12px !important;
}

/* Filled, and the country select which is always filled: label up, value under
   it, with room between the two. */
.wp-block-woocommerce-checkout .wc-block-components-text-input.is-active input,
.wp-block-woocommerce-checkout .wc-block-components-combobox-control .is-active input,
.wp-block-woocommerce-checkout .wc-blocks-components-select__select {
	padding: 27px 12px 7px !important;
}

.wp-block-woocommerce-checkout .wc-block-components-text-input.is-active label,
.wp-block-woocommerce-checkout .wc-blocks-components-select__label {
	top: 9px !important;
	left: 12px !important;
}

/* The chevron follows the same inset as the value. */
.wp-block-woocommerce-checkout .wc-blocks-components-select__expand {
	right: 12px !important;
}

.wp-block-woocommerce-checkout .wc-block-components-textarea {
	padding: 16px 12px !important;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
	font-family: var(--toy-heading-font) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
	color: var(--toy-ink) !important;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__description {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--toy-muted);
}

/* Shipping and payment option rows. */
.wc-block-components-radio-control__option,
.wc-block-components-shipping-rates-control__package {
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
}

/* Notices in the block checkout, same treatment as the account pages. */
.wp-block-woocommerce-cart .wc-block-components-notice-banner,
.wp-block-woocommerce-checkout .wc-block-components-notice-banner {
	border: 1px solid var(--toy-line) !important;
	border-left: 3px solid var(--toy-ink) !important;
	border-radius: var(--toy-radius) !important;
	background: var(--wp--preset--color--stone-50, #FAFAF9) !important;
	color: var(--toy-ink) !important;
}

.wp-block-woocommerce-cart .wc-block-components-notice-banner > svg,
.wp-block-woocommerce-checkout .wc-block-components-notice-banner > svg {
	fill: var(--toy-ink) !important;
	background: transparent !important;
}

.wp-block-woocommerce-cart .wc-block-components-notice-banner.is-error,
.wp-block-woocommerce-checkout .wc-block-components-notice-banner.is-error {
	border-left-color: #DC2626 !important;
	background: #FEF2F2 !important;
	color: #991B1B !important;
}

/* The mini-cart footer keeps the parent's serif on the subtotal row. */
.wc-block-mini-cart__footer .wc-block-components-totals-item__label,
.wc-block-mini-cart__footer .wc-block-components-totals-item__value,
.wc-block-mini-cart__footer-subtotal,
.wc-block-mini-cart__footer-subtotal * {
	font-family: var(--toy-heading-font) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
	color: var(--toy-ink) !important;
}

.wc-block-mini-cart__footer .wc-block-components-totals-item__description,
.wc-block-mini-cart__footer p {
	font-family: var(--wp--preset--font-family--figtree) !important;
	font-size: 0.8125rem !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	color: var(--toy-muted) !important;
}

/* Block notices appear outside the cart and checkout wrappers too - the
   store-notices block sits above them - so the treatment is site-wide rather
   than scoped, matching the account pages. */
.wc-block-components-notice-banner {
	border: 1px solid var(--toy-line) !important;
	border-left: 3px solid var(--toy-ink) !important;
	border-radius: var(--toy-radius) !important;
	background: var(--wp--preset--color--stone-50, #FAFAF9) !important;
	color: var(--toy-ink) !important;
}

.wc-block-components-notice-banner > svg {
	fill: var(--toy-ink) !important;
	background: transparent !important;
}

.wc-block-components-notice-banner.is-error {
	border-left-color: #DC2626 !important;
	background: #FEF2F2 !important;
	color: #991B1B !important;
}

.wc-block-components-notice-banner.is-error > svg { fill: #DC2626 !important; }

.wc-block-components-notice-banner a {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

/* The order summary heading uses its own class, so it slipped through. */
.wc-block-components-checkout-order-summary__title,
.wc-block-components-checkout-order-summary__title-text,
.wc-block-components-sidebar .wc-block-components-title,
.wc-block-components-sidebar h2,
.wc-block-components-sidebar h3 {
	font-family: var(--toy-heading-font) !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	color: var(--toy-ink) !important;
}

/* Header controls measured 21-27px tall on a phone - under the 44px that is
   the accepted minimum for a finger. The icons stay the size they are; only
   the hit area grows, so nothing moves visually. */
@media (max-width: 1100px) {
	.toy-nav__burger,
	.toy-header__icons .wp-block-search__button,
	.toy-header__icons .wc-block-customer-account__link,
	.wc-block-mini-cart__button,
	.wp-block-woocommerce-customer-account a {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}
}

/* The search toggle sits in .header-action rather than the class I first
   guessed, so it kept its 24px hit area. */
@media (max-width: 899px) {
	.header-action .wp-block-search__button {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}
}

/* The logo link inherits line-height: 0 - a reasonable reset when the logo is
   an image, but ours is a text wordmark, so the anchor collapsed to a 1px-tall
   hit area while the text rendered normally. The wordmark was effectively
   untappable. Scoped to .toy-wordmark so a real image logo, once uploaded,
   keeps the parent's treatment. */
.toy-wordmark {
	display: inline-flex !important;
	align-items: center;
	line-height: 1.1 !important;
}

@media (max-width: 899px) {
	.toy-wordmark { min-height: 44px; }
}

/* Giving the header icons a proper 44px hit area widened that group, and the
   wordmark then ran under the search icon on a narrow phone. The tap targets
   are the thing worth protecting, so the wordmark tightens instead. */
@media (max-width: 480px) {
	.toy-wordmark__text {
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		white-space: nowrap;
	}

	.header-action { gap: 0.25rem; }
}

/* Cart rows carry a bottom border but no vertical padding, so the quantity
   stepper and bin sat directly on the divider with a 1px gap. The rows are
   display:grid rather than real table rows, so padding applies to them. */
.wc-block-mini-cart__products-table .wc-block-cart-items__row,
.wp-block-woocommerce-cart .wc-block-cart-items__row {
	padding-block: 1.35rem !important;
}

.wc-block-mini-cart__products-table .wc-block-cart-items__row:first-child,
.wp-block-woocommerce-cart .wc-block-cart-items__row:first-child {
	padding-top: 0 !important;
}

/* The stepper and the remove button belong on one line with room around them. */
.wc-block-cart-item__quantity {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.85rem;
}

.wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	margin: 0 !important;
}

/* Payment marks in the footer base. Each sits in a uniform white badge so the
   set reads as one row - the Visa, Mastercard and Amex artwork already carries
   its own card background, while PayPal, Apple Pay and Google Pay do not. */
.toy-payments {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.toy-payments__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 27px;
	padding: 2px 3px;
	background: #fff;
	border: 1px solid var(--toy-line);
	border-radius: 3px;
	box-sizing: border-box;
}

.toy-payments__item img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* These three are drawn as full-bleed cards, so they fill their badge. */
.toy-payments__item--visa,
.toy-payments__item--mastercard,
.toy-payments__item--amex {
	padding: 0;
	overflow: hidden;
}

.toy-payments__item--visa img,
.toy-payments__item--mastercard img,
.toy-payments__item--amex img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 640px) {
	.toy-payments { justify-content: flex-start; }
}

/* ------------------------------------------- navbar: logo left, links centred
   The row was links / logo / icons with the logo stretching to fill. It is now
   logo / links / icons, so the nav takes the middle and centres its own list
   while the logo and the icon group size to their content. */
@media (min-width: 1101px) {
	.toy-logo { flex: 0 0 auto; margin-right: 2rem; }

	.toy-nav {
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
	}

	.toy-nav__list { justify-content: center; }

	.header-action { flex: 0 0 auto; margin-left: 2rem; }
}

/* On a phone the burger comes first, then the logo, then the icons - so the
   nav has to lead again and the logo sits between them. */
@media (max-width: 1100px) {
	.toy-nav { order: -1; flex: 0 0 auto; }

	/* The logo takes the space between the burger and the icons, but must not
	   run right up to them - it did, and the wordmark touched the search icon. */
	/* Sizing the wrapper to the space left over made it shrink while the
	   anchor inside kept its text width and overflowed into the icons. The
	   logo sizes to its content instead, and auto margin pushes the icons
	   to the right. */
	.toy-logo {
		flex: 0 1 auto;
		min-width: 0;
		margin-left: 0.75rem;
		margin-right: auto;
	}

	.header-action { flex: 0 0 auto; }
}

/* The site-logo block sizes its wrapper for an image logo, so it sat at 84px
   while our text wordmark needs 111px - the anchor overflowed the wrapper and
   ran under the header icons. The wrapper fits its content instead. */
.toy-logo {
	width: auto !important;
	max-width: none !important;
}

@media (max-width: 1100px) {
	.toy-logo {
		flex: 0 0 auto !important;
		margin-left: 0.5rem !important;
		margin-right: auto !important;
	}
}

/* ------------------------------------------- client videos carousel
   The on-sale row gets its arrows from WooCommerce's carousel block. This is
   the same look on a plain scrolling track, so the two rows read as siblings.
   The track scrolls natively, so swipe and keyboard work without the script. */

.toy-vidcarousel__buttons {
	display: flex;
	gap: 0.5rem;
}

.toy-vidcarousel__button {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--toy-line);
	border-radius: var(--toy-radius);
	background: #fff;
	color: var(--toy-ink);
	cursor: pointer;
	padding: 0;
	transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.toy-vidcarousel__button:hover:not(:disabled) {
	background: var(--toy-ink);
	border-color: var(--toy-ink);
	color: #fff;
}

.toy-vidcarousel__button:disabled {
	opacity: 0.3;
	cursor: default;
}

/* With nothing to scroll to, the arrows would just sit there dead. */
.toy-vidcarousel.is-static .toy-carousel__nav { display: none; }

.toy-vidcarousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * 1.5rem) / 4);
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 0.25rem;
}

.toy-vidcarousel__track::-webkit-scrollbar { display: none; }

.toy-vidcarousel__track:focus-visible {
	outline: 2px solid var(--toy-ink);
	outline-offset: 4px;
}

.toy-vidcarousel__item { scroll-snap-align: start; }

@media (max-width: 1100px) {
	.toy-vidcarousel__track { grid-auto-columns: calc((100% - 2 * 1.5rem) / 3); }
}

@media (max-width: 860px) {
	.toy-vidcarousel__track { grid-auto-columns: calc((100% - 1.5rem) / 2); }
}

@media (max-width: 560px) {
	.toy-vidcarousel__track { grid-auto-columns: 78%; }
}

/* WordPress's own navigation progress bar defaults to black; brand it so the
   one flash of colour on a page change is not the only non-plum thing left. */
.wp-interactivity-router-loading-bar {
	background-color: var(--toy-accent) !important;
}

/* Skinelle prints sale prices in red, which fought the plum SALE badge sitting
   directly above them on the same card. One accent does both jobs; red is left
   to mean errors only. */
.toy-pc ins,
.woocommerce ins,
.wc-block-components-product-price ins,
.wc-block-components-product-price .wc-block-components-product-price__value.is-discounted {
	color: var(--toy-accent);
}

/* --- Course cards carrying a flyer ----------------------------------------
   The masterclasses are sold with the client's own poster artwork. A poster
   has to be readable whole - cropping it to fill a tall column cuts the dates
   and the handle straight off - so the image is contained rather than covered
   and sits at the top of the column, with the tinted surface behind taking up
   whatever is left. Photographs on other courses still fill their column. */
.toy-course__media--flyer {
	display: block;
	background: var(--toy-surface);
}

.toy-course__media--flyer img {
	height: auto;
	object-fit: contain;
}

/* Hovering a poster and having it creep is just noise. */
.toy-course:hover .toy-course__media--flyer img { transform: none; }

/* A poster needs width to stay readable, so a card carrying one gives its
   image column more room than a card carrying a photograph. */
.toy-course:has(.toy-course__media--flyer) {
	grid-template-columns: 27rem minmax(0, 1fr);
}

/* Stacked, the flyer keeps its own proportions rather than being cropped to
   the landscape box a photograph gets. */
.toy-course__media--flyer { aspect-ratio: auto !important; }

/* Register here, DM as the fallback - so the second route reads as secondary. */
.toy-course__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.toy-course__alt {
	font-size: 0.8125rem;
	color: var(--toy-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.toy-course__alt:hover { color: var(--toy-accent); }

.toy-course__coverslabel--bonus { margin-top: 1.25rem; }

@media (max-width: 1100px) {
	.toy-course:has(.toy-course__media--flyer) {
		grid-template-columns: 20rem minmax(0, 1fr);
	}
}

@media (max-width: 720px) {
	.toy-course:has(.toy-course__media--flyer) { grid-template-columns: 1fr; }
}

/* A contained flyer is shorter than the text beside it, so centre it in the
   column rather than leaving all the gap under it. */
.toy-course__media--flyer {
	display: flex;
	align-items: center;
}

/* The card title leads to the full class page; it should not look like a
   different colour of text from the rest of the card. */
.toy-course__title a {
	color: inherit;
	text-decoration: none;
}

.toy-course__title a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A flyer used as a related-course thumbnail is contained for the same reason
   it is on the card: cropping a poster loses the wording. */
.toy-pc__media--flyer { background: var(--toy-surface); }
.toy-pc__media--flyer img { object-fit: contain; }

/* The detail hero crops a photograph to a 16:10 band, which would cut a
   poster to ribbons. A flyer keeps its own proportions and is held to a
   sensible width so it reads like artwork rather than filling the column. */
.toy-svcpage__hero--flyer img {
	aspect-ratio: auto;
	object-fit: contain;
	max-width: 26rem;
}

.toy-svcpage__hero--flyer {
	background: none;
}

/* The flyer is the obvious thing to click, so it leads to the class page. It
   is aria-hidden and out of the tab order because the title link beside it
   goes to the same place - a keyboard or screen reader user should not have
   to pass the same destination twice. */
a.toy-course__media {
	display: block;
	text-decoration: none;
}

a.toy-course__media.toy-course__media--flyer { display: flex; }

/* Reads as the third option after registering, not as another button. */
.toy-course__more {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--toy-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.toy-course__more:hover { color: var(--toy-accent); }

/* The whole card lifts on hover now that most of it is a way through. */
.toy-course:hover .toy-course__title a { text-decoration: underline; text-underline-offset: 3px; }

/* The register form is a third child of the detail grid, not part of the main
   column: stacked on a phone that puts the price and date card above the form
   instead of stranding it underneath, and on desktop the form runs full width
   below both columns. */
.toy-coursereg {
	grid-column: 1 / -1;
	max-width: 44rem;
	margin-top: 1rem;
}

.toy-coursereg__lede {
	color: var(--toy-muted);
	margin-bottom: 1.5rem;
}

/* --- Brand mark ------------------------------------------------------------
   Cinzel is self-hosted alongside the theme's other faces rather than pulled
   from Google, so the logo does not depend on a third party being up. Only the
   latin subset is shipped - the mark sets two words and nothing else uses the
   face. It is a variable file, so one download covers the whole 400-900 range.

   font-display: block, not swap: this is a logo. A flash of the fallback serif
   in the header is worse than a moment with nothing there. */
@font-face {
	font-family: "Cinzel";
	font-style: normal;
	font-weight: 400 900;
	font-display: block;
	src: url("../fonts/cinzel/cinzel-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The mark carries the plum itself through currentColor, so the one accent
   token drives it and changing the brand colour is a single line. */
.toy-wordmark--mark {
	color: var(--toy-accent);
	display: inline-flex;
	align-items: center;
}

.toy-wordmark--mark svg {
	display: block;
	width: auto;
	height: 44px;
}

@media (max-width: 900px) {
	.toy-wordmark--mark svg { height: 36px; }
}

/* The footer carries the same mark as the header, at the size the wordmark it
   replaced occupied. The name stays in the markup for screen readers, since
   the artwork sets it as decorative shapes and live text in a face they may
   not get. */
.toy-footer__wordmark--mark {
	color: var(--toy-accent);
	margin-bottom: 1.1rem;
}

.toy-footer__wordmark--mark svg {
	display: block;
	width: auto;
	height: 46px;
}

/* On a phone the header is burger + mark + three icons, and at the mark's
   desktop size those add up to the full width with nothing between the left
   cluster and the icons. The mark is the only discretionary item, so it comes
   down enough to open a real gap either side of it. */
@media (max-width: 600px) {
	.toy-wordmark--mark svg { height: 29px; }
}

@media (max-width: 400px) {
	.toy-wordmark--mark svg { height: 26px; }
}

/* --- Mobile and tablet header ---------------------------------------------
   The burger appears at 1100px, so everything that arranges around it starts
   at 1100px too. They used to disagree at 900, which left the 900-1100 band
   showing a burger while the nav was still stretching to centre itself - so
   the burger sat in the middle of the header instead of in front of the logo.

   The row's height is set by the burger's 44px tap target, not by the mark, so
   the padding comes down rather than the target. */
@media (max-width: 1100px) {
	.wp-block-group:has(> .toy-logo) {
		padding-top: 0.75rem !important;
		padding-bottom: 0.75rem !important;
		gap: 0.5rem;
	}

	/* The burger and the mark are one cluster and should read as one; the
	   space that matters is the one before the icons, which the auto margin
	   on the logo keeps. */
	.toy-logo { margin-left: 0 !important; }
}

/* --- Nav drawer, the bits that live outside the mobile block --------------- */

/* On desktop the wrapper must not exist as a box, or it becomes a flex item
   between the logo and the icons and the centred nav stops centring. */
@media (min-width: 1101px) {
	.toy-nav__panel { display: contents; }
	.toy-nav__panelhead,
	.toy-nav__scrim { display: none; }
}

@media (max-width: 1100px) {
	/* The burger's 44px hit area is centred on a 20px glyph, which left the
	   bars sitting 12px inside the page margin while every other edge lined
	   up. The target keeps its size and shifts instead, so the glyph starts on
	   the margin and the extra area spills into it harmlessly. */
	/* WordPress zeroes flex-child margins with `.is-layout-flex > :is(*, div)`,
	   which outranks a bare class, so these have to reach past it. */
	.is-layout-flex > .toy-nav { margin-left: -12px; }

	/* Same optical fix on the other end, sized to the narrower box below. */
	.is-layout-flex > .header-action { margin-right: -6px; }

	/* Three 44px boxes around ~22px glyphs put 25px between the icons, which
	   read as three separate controls rather than one set. The boxes narrow
	   and the gap goes; height stays 44 so the touch target does not. 34x44
	   is still well past the 24x24 WCAG asks for. */
	.header-action { gap: 0; }

	/* The wrapper is sized by the control inside it, so the width has to come
	   off the button itself. Height is left alone. */
	.header-action > *,
	.header-action .wp-block-search__button,
	.header-action .wc-block-customer-account__link,
	.header-action .wc-block-mini-cart__button,
	.header-action .wp-block-woocommerce-customer-account a {
		min-width: 34px !important;
	}

	/* The page must not scroll behind an open sheet. */
	html.toy-nav-locked,
	html.toy-nav-locked body { overflow: hidden; }
}

/* WooCommerce hides the carousel arrows on touch phones - it ships
   `@media (max-width: 600px) and (hover: none) and (pointer: coarse)` with
   display:none, on the assumption that swiping is enough. On this site the
   arrows are the only thing signalling there is more than the two products
   you can see, so they stay. The track still swipes.

   Their selector leans on :where(), which contributes no specificity, so a
   plain class pair is enough to win - !important guards against Woo tightening
   it later. */
@media (max-width: 600px) and (hover: none) and (pointer: coarse) {
	.toy-carousel .wc-block-next-previous-buttons,
	.wp-block-woocommerce-product-collection .wc-block-next-previous-buttons {
		display: flex !important;
	}
}

/* Right-aligned reads as "more this way" beside a wide row of products. On a
   phone the row is barely wider than the screen and the heading above is
   centred, so the arrows centre with it. */
@media (max-width: 720px) {
	.toy-carousel__nav { justify-content: center; }
}

/* --- The install band's image pair on a phone -------------------------------
   The pair is sized from the band height so the two figures stand at a
   consistent scale beside the copy. In a phone-width column that makes each
   one wider than the column, so the first is pushed out of frame entirely and
   only half a face of the second survives.

   Below the stacking breakpoint they size from the width instead: both fit,
   still overlapping and still standing on the same baseline. */
@media (max-width: 780px) {
	.toy-band .wp-block-column:has(> .toy-band__pair) {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.toy-band__pair {
		justify-content: center;
		padding-inline: 0.5rem;
	}

	.toy-band__pair img {
		height: auto;
		width: 54%;
		max-height: 100%;
	}

	.toy-band__pair img:last-child { margin-left: -8%; }
}

/* --- Inner-page heroes on a phone ------------------------------------------
   These heroes are a portrait cut-out beside the copy, sized generously so the
   figure holds its own against a wide column. Stacked on a phone that became a
   480-544px image before a word of the page - most of the screen spent on
   decoration, with the heading pushed under the fold.

   The image keeps its proportions and just gets less room. */
@media (max-width: 860px) {
	.toy-shophero__media {
		min-height: 0;
		margin-top: 1rem;
	}

	.toy-shophero__media img { max-height: 17rem; }

	.toy-bookhero__media { min-height: 0 !important; }

	.toy-bookhero__media img { max-height: 17rem; }
}

@media (max-width: 480px) {
	.toy-shophero__media img,
	.toy-bookhero__media img { max-height: 16rem; }
}

/* The training band's photograph is a close-up: the hand at the hairline is
   the point of it, and a centred crop drops that off the top and fills the
   panel with cheek instead. */
.toy-band--card .wp-block-column > img {
	object-position: center top;
}

/* Two of the collection shots are framed tighter than the others, so a centred
   crop takes the crown of the head off. Selected by file rather than by
   position, so reordering the cards cannot point this at the wrong one. */
.toy-card__media img[src*="cat-premium-wigs"],
.toy-card__media img[src*="cat-bundles"] {
	object-position: center 18%;
}

/* The mega menu crops these same collection shots into a square, which takes
   22% off the height - centred, so half of that comes off the crown. Weighted
   toward the top instead. Unlike the homepage cards, where the box and the
   image are nearly the same shape and there is nothing to move, here it works. */
.toy-mega__card img {
	object-position: center 15%;
}

/* --- Inner-page hero media, desktop ----------------------------------------
   These heroes were built around a tall portrait cut-out, so the media column
   reserved 30rem of height and the copy sat in a band that deep whether or not
   the picture needed it. The replacements are landscape, which left a lot of
   empty space under them and a picture that read small beside the heading.

   The column stops reserving height, and the image is allowed to run wider
   than its column so it fills the space the portrait used to. */
@media (min-width: 861px) {
	.toy-shophero__media,
	.toy-bookhero__media {
		min-height: 0;
	}

	/* Keep the cut-out inside its half. The previous 126% overrun pushed the
	   document wider than the viewport and exposed a horizontal scrollbar. */
	.toy-bookhero__media img {
		max-height: none;
		width: 100%;
		max-width: 100%;
		margin-left: auto;
	}

	/* Shop keeps a wider copy column, so the same overrun ran under the
	   heading. It takes what is left instead. */
	.toy-shophero__media img {
		max-height: none;
		width: 108%;
		max-width: 108%;
		margin-left: auto;
	}
}

/* The why-choose panel painted its background edge to edge while the training
   band above it stops at the container, so the two read as different widths
   even though their content lines up. The background moves onto the inner
   wrapper, which is the same box the band uses, and takes the brand radius. */
.toy-why-panel.has-background {
	background-color: transparent !important;

	/* Both axes, not just the inline one. The padding used to sit inside the
	   panel's own background; with the background moved to the inner wrapper
	   it became 80px of dead white above and below the tint, which read as a
	   spacing fault between this section and the band under it. */
	padding: 0 !important;
}

.toy-why-panel > .toy-policies__inner {
	background-color: var(--wp--preset--color--stone-50);
	border-radius: var(--toy-radius);
	padding: var(--wp--preset--spacing--20) 2rem;
}

/* --- Hero copy on a phone --------------------------------------------------
   Light-toned slides deliberately carry no scrim: on a wide screen the copy
   sits in empty backdrop beside the subject, and a wash over the photograph
   would be pointless. Stacked on a phone the copy lands on top of the subject
   instead, and ink text on a photograph is not readable. Those slides get a
   scrim on small screens only. */
@media (max-width: 860px) {
	.toy-slider__slide.is-tone-light::after {
		background: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.92) 0%,
			rgba(255, 255, 255, 0.82) 45%,
			rgba(255, 255, 255, 0.45) 100%
		);
	}

	/* Dark slides already have one, but it is angled for a wide frame. */
	.toy-slider__slide.is-tone-dark::after {
		background: linear-gradient(
			to bottom,
			rgba(40, 6, 40, 0.74) 0%,
			rgba(40, 6, 40, 0.55) 50%,
			rgba(40, 6, 40, 0.35) 100%
		);
	}
}


/* Stacked on a phone the copy column runs the full width of the band, so the
   inset that holds it away from the image beside it on a wide screen lands on
   one side only.

   Only the card band needs correcting. Its plum block is inset from the page,
   so the padding was the only thing between the text and the block edge, and
   the text finished hard against it. The cutout bands run edge to edge, so the
   page gutter already gives their text a left margin and they look right as
   they are - widening those pushed the copy further in than the header above
   it. */
@media (max-width: 780px) {
	.toy-band--card .wp-block-columns > .wp-block-column:not(:has(> img)):not(:has(> .toy-band__pair)):first-child,
	.toy-band--card .wp-block-columns > .wp-block-column:not(:has(> img)):not(:has(> .toy-band__pair)):last-child {
		padding-inline: 2rem !important;
	}
}