/* ==========================================================================
   Tickled Pink child theme — styles
   --------------------------------------------------------------------------
   Tokens come from theme.json (--wp--preset--*, --wp--custom--*). The brand
   guide behind them: the vault, PAN-Clients/s5-tickled-pink-art-studio/
   assets/brand/brand-guide.md.

   THE LOOK, in one paragraph (Jeremy, 8 Oct 2026: "this is all about glam and
   prettiness ... some motion and shine ... the buttons are boring ... we want
   exquisite"). Everything pretty on the page is taken from something of hers,
   and each one has a job:
     · her painting "Happiness" is the colour: it fills the one brush word and
       the colour chips (scripts/build-look-assets.py);
     · her pieces are round, glossy and set in steel, so a round photo here is
       drawn the same way: a steel rim and a shine (.tp-dome);
     · resin is glossy, so buttons are glossy and catch the light when touched;
     · her lace doilies give the blush bands their scalloped edge.
   Nothing is sprinkled on for its own sake. If a new ornament has no job and
   no source in her work, it doesn't go in.

   MOTION is slow and small: things rise into place once, a photo floats, the
   paint drifts in the brush word, a ribbon of her words moves. All of it is
   transform, opacity or background-position; all of it stops for a visitor
   who asks for less; and nothing is ever hidden waiting for it (section 16).

   🔴 Loaded after Blocksy's main stylesheet but BEFORE its inline Customizer
   CSS, which Blocksy prints later in <head>. Overriding a Customizer rule
   needs higher specificity, not a later position: hence the variables set on
   `body` rather than `:root`, and the `#header` rules in section 4.

   🔴 Her logo pink (#D35B97) is 3.68 to 1 on white: big words and decoration
   only. Words a person has to READ small, and white words on pink, use bright
   pink (4.89), deep pink (6.09) or berry. scripts/check-contrast.mjs holds it.
   ========================================================================== */

/* ---------- 1. Blocksy → her tokens ------------------------------------- */

:root {
	--theme-block-max-width: 720px;
	--theme-block-wide-max-width: 1160px;
	--theme-border-radius: var(--wp--custom--radius--md);
	--theme-button-border-radius: var(--wp--custom--radius--md);
}

body {
	/* Short names, used all through this file. Declared on body so they resolve where the presets do. */
	--tp-pink: var(--wp--preset--color--pink);
	--tp-bright: var(--wp--preset--color--pink-bright);
	--tp-deep: var(--wp--preset--color--pink-deep);
	--tp-berry: var(--wp--preset--color--berry);
	--tp-rose: var(--wp--preset--color--rose);
	--tp-petal: var(--wp--preset--color--petal);
	--tp-blush: var(--wp--preset--color--blush);
	--tp-soft: var(--wp--preset--color--blush-soft);
	--tp-ink: var(--wp--preset--color--ink);
	--tp-ink-soft: var(--wp--preset--color--ink-soft);
	--tp-line: var(--wp--preset--color--line);
	--tp-paper: var(--wp--preset--color--paper);
	--tp-r-sm: var(--wp--custom--radius--sm);
	--tp-r-md: var(--wp--custom--radius--md);
	--tp-r-lg: var(--wp--custom--radius--lg);
	--tp-r-xl: var(--wp--custom--radius--xl);
	--tp-shadow-card: var(--wp--custom--shadow--card);
	--tp-shadow-raised: var(--wp--custom--shadow--raised);
	--tp-shadow-hero: var(--wp--custom--shadow--hero);
	--tp-settle: var(--wp--custom--motion--settle);
	/* Polished steel, for the rim round a dome. Decoration only: no words ever sit on it. */
	--tp-steel: conic-gradient(from 210deg, #c9c7cf, #ffffff 12%, #b7b4bf 28%, #f4f3f6 45%, #a6a3af 62%, #ffffff 78%, #c9c7cf);

	--theme-palette-color-1: var(--tp-deep);
	--theme-palette-color-2: var(--tp-berry);
	--theme-palette-color-3: var(--tp-ink);
	--theme-palette-color-4: var(--tp-ink);
	--theme-palette-color-5: var(--tp-line);
	--theme-palette-color-6: var(--tp-blush);
	/* Blocksy paints the page itself with colour 7. Her ground is white card, so 7 is paper too. */
	--theme-palette-color-7: var(--tp-paper);
	--theme-palette-color-8: var(--tp-paper);

	--theme-font-family: var(--wp--preset--font-family--nunito);
	--theme-font-size: var(--wp--preset--font-size--body);
	--theme-font-weight: 400;
	--theme-line-height: 1.6;
	--theme-text-color: var(--tp-ink);
	--theme-headings-color: var(--tp-ink);
	--theme-link-initial-color: var(--tp-deep);
	--theme-link-hover-color: var(--tp-berry);
	--theme-border-color: var(--tp-line);
	--theme-normal-container-max-width: 1160px;

	--theme-button-background-initial-color: var(--tp-deep);
	--theme-button-background-hover-color: var(--tp-deep);
	--theme-button-text-initial-color: var(--tp-paper);
	--theme-button-text-hover-color: var(--tp-paper);
	--theme-button-border: none;
	--theme-button-font-weight: 800;
	--theme-button-min-height: 48px;

	background-color: var(--tp-paper);
}

body :is(h1, h2, h3, h4, h5, h6),
body .site-title {
	--theme-font-family: var(--wp--preset--font-family--nunito);
	--theme-font-weight: 800;
}

body h1 { --theme-font-size: var(--wp--preset--font-size--hero); --theme-line-height: 1.06; --theme-letter-spacing: -0.015em; }
body h2 { --theme-font-size: var(--wp--preset--font-size--title); --theme-line-height: 1.12; --theme-letter-spacing: -0.01em; }
body h3 { --theme-font-size: var(--wp--preset--font-size--subhead); --theme-line-height: 1.2; }

:focus-visible {
	outline: 3px solid var(--tp-berry);
	outline-offset: 3px;
}

::selection {
	background: var(--tp-petal);
	color: var(--tp-ink);
}

/* ---------- 2. Type accents ----------------------------------------------
   The brush hand is for ONE phrase a page, the way a hand-painted word sits on
   a sign, and for her sign-off. Never a sentence, a button or a price. It is
   drawn big because a brush face at body size is hard to read. */
.tp-brush {
	font-family: var(--wp--preset--font-family--brush);
	font-weight: 400;
	color: var(--tp-pink);
	letter-spacing: 0;
	line-height: 1;
}

/* The brush word, painted: her own pour shows through the letters and drifts.
   The strip it is cut from holds 3.8 to 1 against white on average (the asset
   script prints it), which is the rule for very large letters and the only
   size this is ever used at. A browser that can't clip a picture to letters
   gets the word in deep pink. */
.tp-paint {
	position: relative;
	display: inline-block;
	color: var(--tp-deep);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.tp-paint {
		background-image: url("../img/paint/paint-word.jpg");
		background-size: auto 440%;
		background-position: 12% 30%;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		animation: tp-paint-drift 28s ease-in-out infinite alternate;
	}
}
@media (forced-colors: active) {
	.tp-paint {
		background: none;
		-webkit-text-fill-color: currentColor;
		color: CanvasText;
	}
}
@keyframes tp-paint-drift {
	from { background-position: 8% 26%; }
	to { background-position: 78% 64%; }
}

/* Two glints beside the painted word, the way light catches wet resin. Her
   reference shop sets its hand-lettered words among small stars; these are the
   same idea, kept to two, and only ever beside the painted word. */
.tp-paint::before,
.tp-paint::after {
	content: "";
	position: absolute;
	width: 0.36em;
	height: 0.36em;
	background: var(--wp--custom--ui--sparkle);
	-webkit-clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
	animation: tp-twinkle 3.6s ease-in-out infinite;
	pointer-events: none;
}
.tp-paint::before { top: -0.06em; right: -0.34em; }
.tp-paint::after { bottom: 0.1em; right: -0.62em; width: 0.2em; height: 0.2em; animation-delay: 1.3s; }
@keyframes tp-twinkle {
	0%, 100% { transform: scale(0.72) rotate(0deg); opacity: 0.55; }
	50% { transform: scale(1.08) rotate(18deg); opacity: 1; }
}

/* A small label above a heading. Berry, not the links' pink: when a label, the
   links and the buttons all share one colour, nothing ranks. */
.tp-eyebrow {
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tp-berry);
	margin: 0 0 0.6rem;
}

/* Her sign-off, in the brush hand. */
.tp-signature {
	font-family: var(--wp--preset--font-family--brush);
	font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem);
	line-height: 1.15;
	color: var(--tp-deep);
	margin: 1.25rem 0 0;
}

/* ---------- 3. Buttons ---------------------------------------------------
   A button here is a small glossy tile, like one of her pieces: colour under a
   clear top, sitting on a darker edge. It lifts a hair under the pointer, a
   glint crosses it once, and it presses down when clicked.

   🔴 What it is NOT: a pill with a coloured glow and an arrow. Jeremy has said
   that package reads as machine-made (6 Oct), and the first flat version of
   these read as boring (8 Oct). The corner stays a soft square, the shadow is
   an edge and not a glow, and there is no arrow.

   One rule covers the block editor's buttons, WooCommerce's and the theme's,
   so the shop never shows two kinds of button. The words are white on bright
   pink at the top (4.89 to 1) and on deep pink at the bottom (6.09). The gloss
   and the glint sit UNDER the words, so they never thin them.

   🔴 The exceptions (a menu's close button and the like) are inside :where(),
   which adds no weight. Written as a chain of :not(), they made this rule so
   heavy that the quiet button below could not override it, and every button
   on the page came out as the main one. */
html body :is(.wp-block-button__link, .woocommerce .button, .woocommerce-page .button, .wc-block-components-button, .ct-button, button[type="submit"]):where(:not(.ct-toggle-close, .ct-toggle-dropdown-mobile, .ct-toggle, .search-submit, .tp-search__go, .is-link, .wc-block-components-notice-banner__dismiss, .wc-block-components-drawer__close)) {
	--tp-b-top: var(--tp-bright);
	--tp-b-bottom: var(--tp-deep);
	--tp-b-edge: var(--tp-berry);
	--tp-b-text: var(--tp-paper);
	--tp-b-glint: rgba(255, 255, 255, 0.5);
	--tp-b-shadow: 0 3px 0 var(--tp-b-edge), 0 12px 18px -12px rgba(135, 28, 82, 0.6);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.7rem 1.5rem;
	border: 0;
	border-radius: var(--tp-r-md);
	background: linear-gradient(180deg, var(--tp-b-top), var(--tp-b-bottom));
	color: var(--tp-b-text);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.2;
	letter-spacing: 0.005em;
	text-decoration: none;
	box-shadow: var(--tp-b-shadow);
	transform: translateY(0);
	transition: transform 160ms var(--tp-settle), box-shadow 160ms var(--tp-settle);
}
/* The clear top: a lighter half, fading out by the middle. */
html body :is(.wp-block-button__link, .woocommerce .button, .woocommerce-page .button, .wc-block-components-button, .ct-button, button[type="submit"]):where(:not(.ct-toggle-close, .ct-toggle-dropdown-mobile, .ct-toggle, .search-submit, .tp-search__go, .is-link, .wc-block-components-notice-banner__dismiss, .wc-block-components-drawer__close))::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 0 50% 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
	pointer-events: none;
}
/* The glint: a narrow slanted light, parked off the left edge until the button is touched. */
html body :is(.wp-block-button__link, .woocommerce .button, .woocommerce-page .button, .wc-block-components-button, .ct-button, button[type="submit"]):where(:not(.ct-toggle-close, .ct-toggle-dropdown-mobile, .ct-toggle, .search-submit, .tp-search__go, .is-link, .wc-block-components-notice-banner__dismiss, .wc-block-components-drawer__close))::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: -30%;
	bottom: -30%;
	left: 0;
	width: 34%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0), var(--tp-b-glint) 50%, rgba(255, 255, 255, 0));
	transform: translateX(-160%) skewX(-18deg);
	pointer-events: none;
}
html body :is(.wp-block-button__link, .woocommerce .button, .woocommerce-page .button, .wc-block-components-button, .ct-button, button[type="submit"]):where(:not(.ct-toggle-close, .ct-toggle-dropdown-mobile, .ct-toggle, .search-submit, .tp-search__go, .is-link, .wc-block-components-notice-banner__dismiss, .wc-block-components-drawer__close)):is(:hover, :focus-visible) {
	color: var(--tp-b-text);
	transform: translateY(-1px);
	box-shadow: 0 4px 0 var(--tp-b-edge), 0 16px 22px -12px rgba(135, 28, 82, 0.62);
}
html body :is(.wp-block-button__link, .woocommerce .button, .woocommerce-page .button, .wc-block-components-button, .ct-button, button[type="submit"]):where(:not(.ct-toggle-close, .ct-toggle-dropdown-mobile, .ct-toggle, .search-submit, .tp-search__go, .is-link, .wc-block-components-notice-banner__dismiss, .wc-block-components-drawer__close)):is(:hover, :focus-visible)::after {
	animation: tp-glint 900ms ease-out 1;
}
html body :is(.wp-block-button__link, .woocommerce .button, .woocommerce-page .button, .wc-block-components-button, .ct-button, button[type="submit"]):where(:not(.ct-toggle-close, .ct-toggle-dropdown-mobile, .ct-toggle, .search-submit, .tp-search__go, .is-link, .wc-block-components-notice-banner__dismiss, .wc-block-components-drawer__close)):active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 var(--tp-b-edge), 0 6px 10px -8px rgba(135, 28, 82, 0.6);
}
@keyframes tp-glint {
	from { transform: translateX(-160%) skewX(-18deg); }
	to { transform: translateX(420%) skewX(-18deg); }
}

/* The quiet button: white with a pink rim, for the second choice beside a main
   one, and for the button on every product card (one loud button a view).
   🔴 The card rules start at `html`, not `body`: on the shop's own pages it is
   the body that carries the class woocommerce, and `body .woocommerce` asks
   for something INSIDE the body. Written that way, the cards were quiet on the
   home page and loud in the shop. */
html body .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link,
html .woocommerce ul.products li.product .button {
	--tp-b-top: var(--tp-paper);
	--tp-b-bottom: var(--tp-paper);
	--tp-b-edge: var(--tp-petal);
	--tp-b-text: var(--tp-deep);
	--tp-b-glint: rgba(211, 91, 151, 0.22);
	/* Blocksy gives the editor's outline button a border and a padding of its own, with a selector four
	   classes deep (which is why the one above is five). The rim here is drawn inside the button
	   instead, so the two never stack into a double line. */
	border: 0;
	padding: 0.7rem 1.5rem;
	--tp-b-shadow: inset 0 0 0 2px var(--tp-deep), 0 3px 0 var(--tp-b-edge);
	box-shadow: var(--tp-b-shadow);
}
html body .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible),
html .woocommerce ul.products li.product .button:is(:hover, :focus-visible) {
	--tp-b-top: var(--tp-soft);
	--tp-b-bottom: var(--tp-blush);
	--tp-b-text: var(--tp-berry);
	box-shadow: inset 0 0 0 2px var(--tp-berry), 0 4px 0 var(--tp-b-edge);
}
html body .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:active,
html .woocommerce ul.products li.product .button:active {
	box-shadow: inset 0 0 0 2px var(--tp-berry), 0 1px 0 var(--tp-b-edge);
}
/* A white button has no clear top to show. */
html body .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link::before,
html .woocommerce ul.products li.product .button::before { display: none; }

/* A button that can't be pressed yet (the lucky dip before a size is chosen): pale, no lift, no glint. */
html body :is(.woocommerce .button, .woocommerce-page .button, button[type="submit"]):is(.disabled, :disabled, .wc-variation-selection-needed) {
	opacity: 0.55;
	transform: none;
	box-shadow: 0 3px 0 var(--tp-b-edge);
	cursor: not-allowed;
}
html body :is(.woocommerce .button, .woocommerce-page .button, button[type="submit"]):is(.disabled, :disabled, .wc-variation-selection-needed)::after { animation: none; }

/* 🔴 WooCommerce's own buttons (the cart's, the checkout's, the sliding cart's) are given a blue ring
   and lose their own edge whenever they hold focus, by a rule four classes deep. A mouse press
   gives focus too, and the sliding cart opens with its close mark in focus, so the blue square
   showed every time. Here a button that holds focus keeps its own look (--tp-b-shadow, named in
   the rules above), and the ring is her berry and only for someone moving by keyboard. These two
   selectors copy WooCommerce's own and start one element earlier, which is what outweighs it. */
html body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link):focus {
	outline: 3px solid transparent;
	box-shadow: var(--tp-b-shadow, none);
}
html body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link):focus-visible {
	outline: 3px solid var(--tp-berry);
	outline-offset: 3px;
}

/* ---------- 4. Header ------------------------------------------------------
   White, her logo at a size where "art studio" can still be read, the menu in
   ink. 🔴 Every link state is set here on purpose: left to the palette, hover
   and current can end up the same colour as the bar they sit on.
   scripts/check-menu.mjs opens the menus and measures every state. */
#header [data-row="middle"] {
	background: var(--tp-paper);
	border-bottom: 1px solid var(--tp-line);
}

#header .site-logo-container img {
	width: auto;
}

#header [data-id="menu"] > ul > li > a {
	--theme-link-initial-color: var(--tp-ink);
	--theme-link-hover-color: var(--tp-deep);
	--theme-link-active-color: var(--tp-deep);
	position: relative;
	color: var(--tp-ink);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--body);
	text-transform: none;
	letter-spacing: 0;
}
#header [data-id="menu"] > ul > li > a:hover,
#header [data-id="menu"] > ul > li.current-menu-item > a,
#header [data-id="menu"] > ul > li.current-menu-ancestor > a {
	color: var(--tp-deep);
}
/* A line that draws itself under a link from the left. The current page keeps its line. */
#header [data-id="menu"] > ul > li > a .ct-menu-link-text,
#header [data-id="menu"] > ul > li > a {
	text-decoration: none;
}
#header [data-id="menu"] > ul > li > a::before {
	content: "";
	position: absolute;
	left: var(--tp-underline-inset, 0.9rem);
	right: var(--tp-underline-inset, 0.9rem);
	bottom: 34%;
	height: 2px;
	border-radius: 2px;
	background: var(--tp-deep);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 280ms var(--tp-settle);
}
#header [data-id="menu"] > ul > li > a:hover::before,
#header [data-id="menu"] > ul > li > a:focus-visible::before,
#header [data-id="menu"] > ul > li.current-menu-item > a::before,
#header [data-id="menu"] > ul > li.current-menu-ancestor > a::before {
	transform: scaleX(1);
}

#header [data-id="menu"] .sub-menu {
	background: var(--tp-paper);
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-r-md);
	box-shadow: var(--tp-shadow-raised);
	overflow: hidden;
}
#header [data-id="menu"] .sub-menu a {
	--theme-link-initial-color: var(--tp-ink);
	--theme-link-hover-color: var(--tp-deep);
	color: var(--tp-ink);
	font-weight: 700;
}
#header [data-id="menu"] .sub-menu a:hover,
#header [data-id="menu"] .sub-menu a:focus-visible,
#header [data-id="menu"] .sub-menu .current-menu-item > a {
	color: var(--tp-deep);
	background: var(--tp-soft);
}

#header [data-id="cart"] {
	--theme-icon-color: var(--tp-ink);
	--theme-icon-hover-color: var(--tp-deep);
	--theme-cart-badge-background: var(--tp-deep);
	--theme-cart-badge-text: var(--tp-paper);
}

#header [data-id="trigger"] {
	--theme-icon-color: var(--tp-ink);
	--theme-icon-hover-color: var(--tp-deep);
}

/* The search box ([tp_search], tp-shop): beside the menu on a wide screen, and the first thing in
   the slide-out menu on a phone (scripts/setup-header.php). Rachel, 12 Oct 2026: "search bar to
   type and search for whatever people want". A field with an edge that can be seen and a glass to
   press. Never a pill, and its button is not the shop's glossy one (it is in that rule's
   exceptions, section 3). */
.tp-search {
	position: relative;
	display: flex;
	width: 12.5rem;
	max-width: 100%;
	margin: 0;
}
html body .tp-search .tp-search__box {
	width: 100%;
	height: 44px;
	min-height: 44px;
	padding: 0 2.9rem 0 0.9rem;
	border: 1.5px solid var(--wp--custom--ui--field-border);
	border-radius: var(--tp-r-md);
	background: var(--tp-paper);
	color: var(--tp-ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	-webkit-appearance: none;
	appearance: none;
}
html body .tp-search .tp-search__box::placeholder { color: var(--tp-ink-soft); opacity: 1; }
html body .tp-search .tp-search__box:focus {
	border-color: var(--tp-deep);
	box-shadow: 0 0 0 3px rgba(178, 42, 110, 0.18);
	outline: none;
}
/* The browser's own "clear" cross would sit under the glass. */
.tp-search .tp-search__box::-webkit-search-cancel-button { display: none; }
html body .tp-search .tp-search__go {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 44px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0 var(--tp-r-md) var(--tp-r-md) 0;
	background: none;
	box-shadow: none;
	color: var(--tp-deep);
	cursor: pointer;
}
html body .tp-search .tp-search__go:hover { color: var(--tp-berry); }
html body .tp-search .tp-search__go:focus-visible { outline: 3px solid var(--tp-berry); outline-offset: -3px; }
/* Between the menu and the bag, with air on both sides. A narrower laptop gets a narrower box,
   still wide enough for its three words. */
#header [data-row="middle"] .tp-search { margin-inline: 0.75rem 0.25rem; }
@media (max-width: 1279px) {
	#header [data-row="middle"] .tp-search { width: 10.75rem; }
	html body #header [data-row="middle"] .tp-search .tp-search__box { padding: 0 2.5rem 0 0.75rem; }
	html body #header [data-row="middle"] .tp-search .tp-search__go { width: 2.4rem; }
}
/* 🔴 Narrower again (a small laptop, or a tablet on its side: 1000 to 1179 wide) there is no room
   for a box beside six links: the theme folds some of them under "More" to make it (seen at 1024
   and at 1100, 12 Oct 2026). So there the box rests as the glass alone, and opens over the menu
   when it is pressed or reached with the keyboard. No script: the box is the same field, drawn
   small until it has focus. The first press goes to the field (the glass lets it through), so it
   opens the box and never sends an empty search. */
@media (max-width: 1179px) {
	/* Its height is said, not left to the field: opened, the field is lifted out of the row, and a
	   form with nothing left in it would be no height at all (the open box then sat half a row low). */
	#header [data-row="middle"] .tp-search { width: 44px; height: 44px; }
	html body #header [data-row="middle"] .tp-search .tp-search__box {
		padding: 0;
		color: transparent;
		cursor: pointer;
	}
	html body #header [data-row="middle"] .tp-search .tp-search__box::placeholder { color: transparent; }
	html body #header [data-row="middle"] .tp-search .tp-search__go { width: 44px; border-radius: var(--tp-r-md); pointer-events: none; }
	html body #header [data-row="middle"] .tp-search:focus-within .tp-search__box {
		position: absolute;
		z-index: 5;
		top: 0;
		right: 0;
		width: 15rem;
		padding: 0 2.9rem 0 0.9rem;
		color: var(--tp-ink);
		cursor: text;
	}
	html body #header [data-row="middle"] .tp-search:focus-within .tp-search__box::placeholder { color: var(--tp-ink-soft); }
	html body #header [data-row="middle"] .tp-search:focus-within .tp-search__go { z-index: 6; width: 2.75rem; pointer-events: auto; }
}
/* And at the narrowest of those (under 1100) the six links still want more room than the bar has,
   glass or no glass: the links sit a little closer and her logo is a little smaller, so all six
   stay on the bar. "art studio" can still be read at this height. */
@media (max-width: 1099px) {
	#header [data-device="desktop"] [data-id="menu"] { --menu-items-spacing: 14px; --tp-underline-inset: 0.5rem; }
	#header [data-device="desktop"] .site-logo-container img { max-height: 72px; }
}
/* In the slide-out menu it is the full width of the panel, with room under it before the links. */
#offcanvas .tp-search { width: 100%; margin-bottom: 1.25rem; }
#offcanvas .tp-search .tp-search__box { height: 50px; font-size: var(--wp--preset--font-size--body); }
#offcanvas .tp-search .tp-search__go { height: 50px; width: 3.1rem; }

/* The strip above the header: one plain line about postage. Blush, ink words. */
#header [data-row="top"] {
	background: var(--tp-blush);
	color: var(--tp-ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
#header [data-row="top"] a {
	color: var(--tp-berry);
	text-decoration: underline;
}

/* The slide-out menu on a phone and a tablet.
   🔴 The panel's GROUND is not set here. Blocksy paints it from its own setting with a selector
   that beats this file, and its default is near-black. A rule here once set the links to ink and
   lost the ground: dark on dark (8 Oct 2026). The ground, the link colours and the close button
   are settings in scripts/setup-header.php; scripts/check-menu.mjs opens the menu and measures.
   What is here is only what the settings can't say, and every state is set on the link itself. */
#offcanvas [data-id="mobile-menu"] .ct-menu-link {
	color: var(--tp-ink);
	font-weight: 800;
	font-size: 1.3125rem;
	padding-block: 0.9rem;
}
#offcanvas [data-id="mobile-menu"] .sub-menu .ct-menu-link {
	color: var(--tp-ink);
	font-weight: 600;
	font-size: 1.0625rem;
	padding-block: 0.7rem;
}
#offcanvas [data-id="mobile-menu"] .ct-menu-link:hover,
#offcanvas [data-id="mobile-menu"] .ct-menu-link:focus-visible,
#offcanvas [data-id="mobile-menu"] .current-menu-item > .ct-menu-link,
#offcanvas [data-id="mobile-menu"] .current-menu-item > .ct-sub-menu-parent > .ct-menu-link,
#offcanvas [data-id="mobile-menu"] .current-menu-ancestor > .ct-sub-menu-parent > .ct-menu-link,
#offcanvas [data-id="mobile-menu"] .current-menu-ancestor > .ct-menu-link {
	color: var(--tp-deep);
}
/* The arrow that opens a sub-menu: a control, so it is drawn in ink, not in a faint grey. */
#offcanvas [data-id="mobile-menu"] .ct-toggle-dropdown-mobile {
	--theme-icon-color: var(--tp-ink);
	--theme-icon-hover-color: var(--tp-deep);
	color: var(--tp-ink);
	border-color: var(--tp-line);
	opacity: 1;
}
#offcanvas [data-id="mobile-menu"] .ct-toggle-dropdown-mobile svg {
	fill: var(--tp-ink);
	opacity: 1;
}

/* ---------- 5. Bands ------------------------------------------------------
   A band is full width; its content sits in ONE inner column, so a heading and
   the paragraph under it share a left edge. White and blush take turns, and
   the ribbon (section 9) is the one strong stripe between them. */
.tp-band {
	position: relative;
	margin-block: 0;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
	overflow: clip;
}
.tp-band--soft { background: var(--tp-soft); }
/* Two white bands, one under the other: one gap between them, not two. (The opal band has a ground of
   its own, so it keeps its top, and so does a white band under it.) */
.tp-band:not(.tp-band--blush, .tp-band--opal) + .tp-band:not(.tp-band--blush, .tp-band--opal) { padding-top: 0; }
.tp-band__inner { max-width: 44rem; margin-inline: auto; }
.tp-band--wide .tp-band__inner { max-width: 72.5rem; }

/* A blush band's top and bottom edges are scalloped, the way the lace doilies
   in her photos are cut. The scallops lap over the bands above and below (the
   negative margin), so what shows between them is the neighbour's own colour. */
.tp-band--blush {
	--tp-scallop: 14px;
	z-index: 1;
	margin-block: calc(var(--tp-scallop) * -1);
	padding-block: calc(var(--wp--preset--spacing--70) + var(--tp-scallop));
	background: var(--tp-blush);
	-webkit-mask:
		radial-gradient(circle var(--tp-scallop) at 50% var(--tp-scallop), #000 calc(100% - 0.5px), rgba(0, 0, 0, 0)) 50% 0 / calc(var(--tp-scallop) * 2) calc(var(--tp-scallop) * 2) repeat-x,
		radial-gradient(circle var(--tp-scallop) at 50% var(--tp-scallop), #000 calc(100% - 0.5px), rgba(0, 0, 0, 0)) 50% 100% / calc(var(--tp-scallop) * 2) calc(var(--tp-scallop) * 2) repeat-x,
		linear-gradient(#000 0 0) 50% 50% / 100% calc(100% - var(--tp-scallop) * 2) no-repeat;
	mask:
		radial-gradient(circle var(--tp-scallop) at 50% var(--tp-scallop), #000 calc(100% - 0.5px), rgba(0, 0, 0, 0)) 50% 0 / calc(var(--tp-scallop) * 2) calc(var(--tp-scallop) * 2) repeat-x,
		radial-gradient(circle var(--tp-scallop) at 50% var(--tp-scallop), #000 calc(100% - 0.5px), rgba(0, 0, 0, 0)) 50% 100% / calc(var(--tp-scallop) * 2) calc(var(--tp-scallop) * 2) repeat-x,
		linear-gradient(#000 0 0) 50% 50% / 100% calc(100% - var(--tp-scallop) * 2) no-repeat;
}

/* 🔴 A page should END on a white band (scripts/setup-pages.php says why). If one ends on blush
   anyway, a strip of white is kept between its scalloped edge and the footer's: without it the
   two edges meet and leave a row of stray dots. */
.entry-content > .tp-band--blush:last-child { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

/* A sentence under a heading, a size up from body. */
.tp-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	color: var(--tp-ink);
	max-width: 38rem;
}

.tp-band h2 { margin-top: 0; margin-bottom: 0.6rem; }
.tp-band .wp-block-buttons { margin-top: 1.75rem; gap: 0.9rem; }
.tp-band .woocommerce { margin-top: 2.25rem; }
/* A row of four pieces on a page stays four across on a tablet. Blocksy's tablet grid is three, which
   leaves the fourth piece alone on a line of its own. (On a phone the row is two and two.) */
@media (min-width: 690px) and (max-width: 999.98px) {
	.tp-band [data-products].columns-4 { --shop-columns: repeat(4, minmax(0, 1fr)); }
}
/* The opal page's ten (five a row on a laptop): five across on a wide tablet, two on a narrow one, never
   Blocksy's three, which leaves one alone on the last line (9 Nov 2026). */
@media (min-width: 860px) and (max-width: 999.98px) {
	.tp-band [data-products].columns-5 { --shop-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 690px) and (max-width: 859.98px) {
	.tp-band [data-products].columns-5 { --shop-columns: repeat(2, minmax(0, 1fr)); }
}
/* A kind with only one to three pieces (the lucky dip's two, a new kind's first) keeps its cards at their
   usual width and sits in the middle, not hard against the left of a row of four (9 Nov 2026). */
@media (min-width: 1000px) {
	.woocommerce-shop ul.products[data-products]:not(:has(> li:nth-child(4))),
	.tax-product_cat ul.products[data-products]:not(:has(> li:nth-child(4))) {
		--shop-columns: repeat(auto-fit, minmax(0, 15.5rem));
		justify-content: center;
	}
}
/* A button under a row of products belongs to the row, not to the last card: it stands clear of them. */
.tp-band .woocommerce + .wp-block-buttons { margin-top: 2.75rem; }
.tp-band .woocommerce ul.products { margin-bottom: 0; }

/* A band whose words are centred (the round tiles, the colours). */
.tp-band--centre .tp-band__inner > :is(p, h2, .wp-block-buttons) { text-align: center; margin-inline: auto; }
.tp-band--centre .wp-block-buttons { justify-content: center; }

/* ---------- 6. The round photo ---------------------------------------------
   Her pieces are round, glossy and set in steel. A round photo here is drawn
   the same way: a polished rim, the picture, and a shine across the top left.
   Used for the kinds of piece and for the two small photos by the opening. */
.tp-dome {
	--tp-rim: 6px;
	position: relative;
	display: block;
	aspect-ratio: 1;
	margin: 0;
	padding: var(--tp-rim);
	border-radius: 50%;
	background: var(--tp-steel);
	box-shadow: var(--tp-shadow-raised);
}
.tp-dome img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}
.tp-dome::after {
	content: "";
	position: absolute;
	inset: var(--tp-rim);
	border-radius: 50%;
	background:
		radial-gradient(52% 36% at 30% 18%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 72%),
		radial-gradient(90% 60% at 60% 108%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%);
	box-shadow: inset 0 0 0 1px rgba(45, 31, 38, 0.1), inset 0 -10px 18px -10px rgba(45, 31, 38, 0.35);
	pointer-events: none;
}

/* ---------- 7. The opening -------------------------------------------------
   Words at the left, her photo at the right with two small round ones lapping
   its corners. On a phone the photo comes second. The ground is white with two
   soft pink washes, so the header's white runs straight into it. */
.tp-hero {
	padding-block: clamp(2.25rem, 5.5vw, 4.5rem) clamp(3.25rem, 7vw, 6rem);
	background:
		radial-gradient(46% 62% at 88% 8%, rgba(245, 205, 225, 0.7), rgba(245, 205, 225, 0) 72%),
		radial-gradient(40% 56% at 2% 100%, rgba(249, 228, 237, 0.95), rgba(249, 228, 237, 0) 70%),
		var(--tp-paper);
}
.tp-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
	gap: clamp(1.75rem, 5vw, 4.75rem);
	align-items: center;
}
.tp-hero__grid > * { margin-block: 0; }
.tp-hero__text h1 { margin: 0 0 1.1rem; }
/* The brush word is bigger than the words beside it: a brush face runs small for its size. */
.tp-hero__text h1 .tp-brush { font-size: 1.34em; padding: 0.02em 0.08em 0.1em 0.02em; line-height: 0.95; }
.tp-hero__text .tp-lead { max-width: 30rem; }

.tp-hero__media {
	position: relative;
	margin: 0;
	padding: 0 1.25rem 1.25rem 0;
}
.tp-hero__photo {
	position: relative;
	margin: 0;
	border-radius: var(--tp-r-xl);
	overflow: hidden;
	box-shadow: var(--tp-shadow-hero);
	transform: rotate(1.4deg);
	animation: tp-float 9s ease-in-out infinite;
}
.tp-hero__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
}
/* Light crossing the photo now and then, the way it crosses a tray of resin pieces. */
.tp-hero__photo::after {
	content: "";
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: 0;
	width: 28%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0));
	transform: translateX(-180%) skewX(-16deg);
	animation: tp-photo-glint 11s ease-in-out 2.5s infinite;
	pointer-events: none;
}
@keyframes tp-float {
	0%, 100% { transform: rotate(1.4deg) translateY(0); }
	50% { transform: rotate(1.4deg) translateY(-8px); }
}
@keyframes tp-photo-glint {
	0% { transform: translateX(-180%) skewX(-16deg); }
	14%, 100% { transform: translateX(520%) skewX(-16deg); }
}

.tp-hero__dome {
	position: absolute;
	z-index: 2;
	width: clamp(5.5rem, 12vw, 9.25rem);
}
.tp-hero__dome--a {
	left: -7%;
	bottom: -3%;
	animation: tp-bob 7s ease-in-out infinite;
}
.tp-hero__dome--b {
	right: -1%;
	top: -11%;
	width: clamp(4.5rem, 9vw, 7rem);
	animation: tp-bob 8s ease-in-out 1.2s infinite;
}
@keyframes tp-bob {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50% { transform: translateY(-9px) rotate(3deg); }
}

/* The opening arrives: each line rises into place, one after the other, once. Pure CSS, so
   nothing waits on a script, and a visitor who asks for less motion sees it all in place. */
.tp-hero__text > *,
.tp-hero__media {
	animation: tp-rise 760ms var(--tp-settle) both;
}
.tp-hero__text > :nth-child(1) { animation-delay: 60ms; }
.tp-hero__text > :nth-child(2) { animation-delay: 150ms; }
.tp-hero__text > :nth-child(3) { animation-delay: 240ms; }
.tp-hero__text > :nth-child(4) { animation-delay: 330ms; }
.tp-hero__media { animation-delay: 200ms; animation-duration: 900ms; }
@keyframes tp-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ---------- 8. A photo beside a few words ----------------------------------- */
.tp-split {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}
.tp-split > * { margin-block: 0; }
.tp-split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
.tp-split__text p { max-width: 34rem; }
.tp-split__photo { margin: 0; }
.tp-split__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--tp-r-xl);
	box-shadow: var(--tp-shadow-raised);
}

/* The side of a split can hold a photo and one small card under it. */
.tp-split__side { display: grid; gap: 1.5rem; align-content: start; }
.tp-split__side > * { margin-block: 0; }
.tp-aside {
	padding: 1.4rem 1.5rem 1.5rem;
	border-radius: var(--tp-r-lg);
	background: var(--tp-soft);
}
body .tp-aside h3 { --theme-font-size: 1.1875rem; margin: 0 0 0.4rem; }
.tp-aside p { margin: 0; color: var(--tp-ink); }
.tp-aside .wp-block-buttons { margin-top: 1.1rem; }

/* A photo of a person, pinned up: a white border, a little tilt, a strip of tape. */
.tp-polaroid {
	position: relative;
	justify-self: center;
	width: min(100%, 22rem);
	margin: 0;
	padding: 0.8rem 0.8rem 2.6rem;
	background: var(--tp-paper);
	border-radius: var(--tp-r-sm);
	box-shadow: var(--tp-shadow-raised);
	transform: rotate(-2.5deg);
	transition: transform 420ms var(--tp-settle);
}
.tp-polaroid img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 18%;
	border-radius: 2px;
}
.tp-polaroid::before {
	content: "";
	position: absolute;
	top: -0.85rem;
	left: 50%;
	width: 6.5rem;
	height: 1.75rem;
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0 7px, rgba(255, 255, 255, 0) 7px 14px),
		rgba(237, 133, 181, 0.7);
	box-shadow: 0 1px 2px rgba(45, 31, 38, 0.12);
	transform: translateX(-50%) rotate(3deg);
}
@media (hover: hover) {
	.tp-polaroid:hover { transform: rotate(-0.5deg) scale(1.015); }
}

/* ---------- 9. The ribbon --------------------------------------------------
   A strip of her own words, moving slowly. It is the one strong stripe on the
   page, between the white opening and the first blush band. The words are in
   the page once; the copies that keep it moving are hidden from a screen
   reader. It stops under the pointer, and stands still for a visitor who asks
   for less motion (section 16). */
.tp-ribbon {
	position: relative;
	z-index: 0;
	overflow: hidden;
	margin-block: 0;
	padding-block: 0.9rem;
	background: linear-gradient(90deg, var(--tp-deep), var(--tp-bright) 50%, var(--tp-deep));
	color: var(--tp-paper);
}
.tp-ribbon__track {
	display: flex;
	width: max-content;
	animation: tp-marquee 96s linear infinite;
}
.tp-ribbon:hover .tp-ribbon__track { animation-play-state: paused; }
.tp-ribbon__set {
	display: flex;
	flex: none;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}
.tp-ribbon__set li {
	display: flex;
	align-items: center;
	gap: 2.25rem;
	margin: 0;
	padding-right: 2.25rem;
}
.tp-ribbon__set li::after {
	content: "";
	flex: none;
	width: 0.75rem;
	height: 0.75rem;
	background: currentColor;
	-webkit-clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
@keyframes tp-marquee {
	to { transform: translateX(-50%); }
}

/* ---------- 10. Find your pair: the kinds and the colours ------------------- */
/* As many a row as [tp_kinds] says (--tp-kinds-per-row: up to four in one row, then two even rows, so six
   kinds sit three and three; 9 Nov 2026), two on a phone. A row that is not full still sits in the middle. Each
   tile keeps the width it had at four a row, so the row narrows rather than the domes growing. */
.tp-kinds {
	--tp-kinds-per-row: 4;
	--tp-kinds-gap: clamp(1rem, 3.5vw, 3rem);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tp-kinds-gap);
	max-width: calc(var(--tp-kinds-per-row) * 11.75rem + (var(--tp-kinds-per-row) - 1) * 3rem);
	margin: 2.25rem auto 0;
	padding: 0;
	list-style: none;
}
.tp-kinds__item { flex: 0 0 calc((100% - (var(--tp-kinds-per-row) - 1) * var(--tp-kinds-gap)) / var(--tp-kinds-per-row)); margin: 0; }
.tp-kind {
	display: grid;
	justify-items: center;
	gap: 0.95rem;
	color: var(--tp-ink);
	font-size: 1.1875rem;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
}
.tp-kind .tp-dome {
	width: min(100%, 11.5rem);
	transition: transform 420ms var(--tp-settle), box-shadow 420ms var(--tp-settle);
}
.tp-kind__name {
	padding-bottom: 2px;
	background: linear-gradient(var(--tp-deep), var(--tp-deep)) 0 100% / 0 2px no-repeat;
	transition: background-size 280ms var(--tp-settle), color 200ms ease;
}
.tp-kind:is(:hover, :focus-visible) { color: var(--tp-deep); }
.tp-kind:is(:hover, :focus-visible) .tp-kind__name { background-size: 100% 2px; }
@media (hover: hover) {
	.tp-kind:hover .tp-dome { transform: translateY(-6px) rotate(-4deg); box-shadow: var(--tp-shadow-hero); }
}
/* The lucky dip's tile is her paint pour with a question mark: you don't know which pair is coming. */
.tp-kind--lucky-dip .tp-dome::before {
	content: "?";
	position: absolute;
	z-index: 1;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--brush);
	font-size: clamp(3rem, 7.5vw, 5.25rem);
	line-height: 1;
	color: var(--tp-paper);
	text-shadow: 0 2px 0 rgba(135, 28, 82, 0.6), 0 0 22px rgba(135, 28, 82, 0.55);
}

.tp-chips-label {
	margin: 2.75rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--tp-ink-soft);
	text-align: center;
}
.tp-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem 0.75rem;
	max-width: 50rem;
	margin: 1rem auto 0;
	padding: 0;
	list-style: none;
}
.tp-chips__item { margin: 0; }
.tp-chip {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 0.5rem;
	width: 5.5rem;
	padding: 0.25rem;
	color: var(--tp-ink);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}
.tp-chip__dome {
	position: relative;
	display: block;
	width: 3.5rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--tp-petal) center / cover no-repeat;
	box-shadow: 0 0 0 3px var(--tp-paper), 0 0 0 4px #b7b4bf, var(--tp-shadow-card);
	transition: transform 320ms var(--tp-settle);
}
.tp-chip__dome::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(52% 36% at 30% 18%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 72%);
	box-shadow: inset 0 -6px 10px -6px rgba(45, 31, 38, 0.4);
}
.tp-chip:is(:hover, :focus-visible) { color: var(--tp-deep); }
@media (hover: hover) {
	.tp-chip:hover .tp-chip__dome { transform: translateY(-4px) scale(1.08); }
}
.tp-chip--pinks .tp-chip__dome { background-image: url("../img/paint/paint-pinks.jpg"); }
.tp-chip--purples .tp-chip__dome { background-image: url("../img/paint/paint-purples.jpg"); }
.tp-chip--blues .tp-chip__dome { background-image: url("../img/paint/paint-blues.jpg"); }
/* Turquoise sits with the greens (Rachel, 12 Oct 2026): the square holds the teal band and the green one. */
.tp-chip--greens-and-turquoise .tp-chip__dome { background-image: url("../img/paint/paint-greens-and-turquoise.jpg"); }
.tp-chip--yellows-and-golds .tp-chip__dome { background-image: url("../img/paint/paint-yellows-and-golds.jpg"); }
.tp-chip--oranges-and-reds .tp-chip__dome { background-image: url("../img/paint/paint-oranges-and-reds.jpg"); }
.tp-chip--rainbow .tp-chip__dome { background-image: url("../img/paint/paint-rainbow.jpg"); }
/* Her painting has no black, white, grey or brown in it, so this one is drawn. Brown is one of
   the neutrals (Rachel, 12 Oct 2026: "a light brownish added to the icon"), so it has four parts. */
.tp-chip--black-white-and-neutrals .tp-chip__dome { background: conic-gradient(from 40deg, #1f1c1e 0 25%, #f7f5f6 0 50%, #b9b2b6 0 75%, #c8a47e 0); }

/* ---------- 11. The next markets -------------------------------------------- */
/* The list and its classes are the Local Pickups plugin's ([local_pickups]). The look is ours. */
.local-pickups {
	display: grid;
	gap: 0.75rem;
	max-width: 30rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}
.local-pickups__item {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 0.55rem 1.1rem 0.55rem 0.55rem;
	background: var(--tp-paper);
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-r-lg);
	box-shadow: var(--tp-shadow-card);
}
/* The date is a small tile in the button's own pink. It carries the day, and the market's name is beside it. */
.local-pickups__date {
	flex: none;
	display: grid;
	justify-items: center;
	gap: 0.12rem;
	width: 4.25rem;
	padding: 0.5rem 0 0.55rem;
	border-radius: var(--tp-r-md);
	background: linear-gradient(180deg, var(--tp-bright), var(--tp-deep));
	color: var(--tp-paper);
	line-height: 1;
}
.local-pickups__weekday,
.local-pickups__month {
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.local-pickups__day { font-size: 1.625rem; font-weight: 900; }
.local-pickups__name { font-size: 1.0625rem; font-weight: 800; line-height: 1.3; color: var(--tp-ink); }
/* Once a market has where it is or its hours (none has yet), they sit under its name. */
.local-pickups__words { display: grid; gap: 0.1rem; }
.local-pickups__where { font-size: var(--wp--preset--font-size--small); line-height: 1.35; color: var(--tp-ink-soft); }
.tp-note {
	margin-top: 1.1rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--tp-ink-soft);
}

/* ---------- 12. The shop: product cards -----------------------------------
   A square photo with soft corners, the name in ink, the price plain, and the
   quiet button. Under the pointer the photo comes a little closer.
   🔴 The photo's SHAPE is not set here. Blocksy writes it on the picture itself (style="aspect-ratio"),
   which beats any stylesheet, from the card's "Image Ratio" setting: scripts/setup-shop-look.php. */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	text-align: left;
}

.woocommerce ul.products li.product figure {
	position: relative;
	margin: 0 0 0.9rem;
	border-radius: var(--tp-r-lg);
	overflow: hidden;
	background: var(--tp-soft);
	box-shadow: var(--tp-shadow-card);
	transition: transform 420ms var(--tp-settle), box-shadow 420ms var(--tp-settle);
}
/* The link inside the figure takes no space of its own, or the figure's ground shows as a strip under the photo. */
.woocommerce ul.products li.product figure .ct-media-container {
	display: block;
	margin: 0;
	border-radius: 0;
}
.woocommerce ul.products li.product figure img {
	transition: transform 700ms var(--tp-settle);
}
@media (hover: hover) {
	.woocommerce ul.products li.product:hover figure {
		transform: translateY(-5px);
		box-shadow: var(--tp-shadow-raised);
	}
	.woocommerce ul.products li.product:hover figure img {
		transform: scale(1.05);
	}
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	--theme-font-size: 1.0625rem;
	--theme-font-weight: 800;
	--theme-line-height: 1.3;
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--tp-ink);
	margin: 0 0 0.2rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	--theme-link-initial-color: var(--tp-ink);
	--theme-link-hover-color: var(--tp-deep);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product .price {
	color: var(--tp-ink);
	font-weight: 700;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product .price del {
	color: var(--tp-ink-soft);
	font-weight: 400;
}

/* A card's button is smaller than a page's. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.added_to_cart {
	min-height: 44px;
	padding: 0.55rem 1.1rem;
	font-size: var(--wp--preset--font-size--small);
}

/* "Sale!" in WooCommerce's default is a floating badge. Here it is a small flat tag. */
.woocommerce span.onsale {
	background: var(--tp-deep);
	color: var(--tp-paper);
	border-radius: var(--tp-r-sm);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--caption);
	min-height: 0;
	min-width: 0;
	line-height: 1.2;
	padding: 0.3rem 0.55rem;
}

/* A piece that has sold. State is always a word, never a colour alone. */
.woocommerce ul.products li.product.outofstock img {
	opacity: 0.55;
}
.woocommerce ul.products li.product .out-of-stock-badge,
.woocommerce .out-of-stock-badge {
	background: var(--wp--custom--signal--sold-tint);
	color: var(--wp--custom--signal--sold);
	border-radius: var(--tp-r-sm);
	font-weight: 800;
}

/* ---------- 12b. The shop: finding a piece --------------------------------------
   The row above the grid (tp-shop/inc/shop.php): the kinds as words to press, and
   behind one fold her colours, sizes and metals. The one that is on is filled. */

/* The band with the shop's name (or a kind's, or a colour's) ends in the same scalloped edge as
   the head of every other page. */
.woocommerce-page .hero-section[data-type="type-2"],
.search .hero-section[data-type="type-2"] {
	--tp-scallop: 14px;
	-webkit-mask:
		radial-gradient(circle var(--tp-scallop) at 50% var(--tp-scallop), #000 calc(100% - 0.5px), rgba(0, 0, 0, 0)) 50% 100% / calc(var(--tp-scallop) * 2) calc(var(--tp-scallop) * 2) repeat-x,
		linear-gradient(#000 0 0) 50% 0 / 100% calc(100% - var(--tp-scallop)) no-repeat;
	mask:
		radial-gradient(circle var(--tp-scallop) at 50% var(--tp-scallop), #000 calc(100% - 0.5px), rgba(0, 0, 0, 0)) 50% 100% / calc(var(--tp-scallop) * 2) calc(var(--tp-scallop) * 2) repeat-x,
		linear-gradient(#000 0 0) 50% 0 / 100% calc(100% - var(--tp-scallop)) no-repeat;
}

.tp-find { margin: 0 0 1.75rem; }
.tp-find ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tp-find li { margin: 0; }
.tp-find__kind,
.tp-find__pick {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 2.75rem;
	padding: 0.45rem 1rem;
	border: 1px solid var(--tp-petal);
	border-radius: var(--tp-r-md);
	background: var(--tp-paper);
	color: var(--tp-ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.tp-find__kind:is(:hover, :focus-visible),
.tp-find__pick:is(:hover, :focus-visible) {
	border-color: var(--tp-deep);
	color: var(--tp-berry);
}
.tp-find__kind.is-on,
.tp-find__pick.is-on {
	border-color: var(--tp-berry);
	background: var(--tp-berry);
	color: var(--tp-paper);
}
.tp-find__kind.is-on:is(:hover, :focus-visible),
.tp-find__pick.is-on:is(:hover, :focus-visible) { color: var(--tp-paper); }

/* The fold. The browser's own; the plus and minus are the same marks as on a piece's page.
   Its line says what is chosen ("Showing only Pinks, 12 mm"), and "Clear" sits at the end of it. */
.tp-find__refine { position: relative; margin-top: 0.75rem; }
.tp-find__refine:has(.tp-find__clear) > .tp-find__more > summary { padding-right: 4.5rem; }
.tp-find__more > summary strong { color: var(--tp-ink); font-weight: 800; }
.tp-find__more > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	margin: 0;
	color: var(--tp-deep);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	list-style: none;
	cursor: pointer;
}
.tp-find__more > summary::-webkit-details-marker { display: none; }
.tp-find__more > summary::after { content: "+"; font-size: 1.35rem; font-weight: 400; line-height: 1; }
.tp-find__more[open] > summary::after { content: "\2212"; }
.tp-find__more > summary:hover { color: var(--tp-berry); }
.tp-find__groups {
	display: grid;
	gap: 0.9rem;
	margin-top: 0.4rem;
	padding: 1.1rem 1.2rem 1.2rem;
	border-radius: var(--tp-r-lg);
	background: var(--tp-soft);
}
.tp-find__group {
	display: grid;
	grid-template-columns: 4.25rem minmax(0, 1fr);
	gap: 0.75rem;
	align-items: start;
}
.tp-find__label {
	color: var(--tp-berry);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.tp-find__group > .tp-find__label { padding-top: 0.95rem; }
/* A colour's dot: the same cut of her painting as the chip on the home page, small. */
.tp-find__pick .tp-find__dot {
	flex: none;
	width: 1.15rem;
	box-shadow: 0 0 0 1px rgba(45, 31, 38, 0.22);
	transition: none;
}
.tp-find__pick .tp-find__dot::after { box-shadow: none; }
.tp-find__pick.is-on .tp-find__dot { box-shadow: 0 0 0 2px var(--tp-paper); }

/* One way out of every choice. (A single choice is let go by pressing it again: it is the filled one.) */
.tp-find__clear {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding-inline: 0.5rem 0;
	color: var(--tp-deep);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/* Nothing matches: a line and a way back, not a notice. */
.tp-nothing { padding: 2.5rem 0 3rem; text-align: center; }
.tp-nothing p { margin: 0 0 1.1rem; font-size: var(--wp--preset--font-size--lead); color: var(--tp-ink); }
.tp-nothing p:last-child { margin-bottom: 0; }

/* The page for an address that isn't there. */
.tp-notfound { padding-block: clamp(4rem, 9vw, 6.5rem); }
.tp-notfound h1 { margin: 0.2rem 0 0.9rem; }
.tp-notfound .tp-lead { margin-inline: auto; }
/* Written by hand, not by the editor, so the row of buttons is laid out here. */
.tp-notfound .wp-block-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; }

@media (max-width: 689.98px) {
	.tp-find__group { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
	.tp-find__group > .tp-find__label { padding-top: 0; }
	.tp-find__kind, .tp-find__pick { padding-inline: 0.85rem; }
}

/* ---------- 13. The shop: one piece ----------------------------------------
   The plan's job for this page: answer every question before the button. In
   order beside the photo: a small label (its collection, or its kind), the
   name, the price, a sentence, "One of a kind" where it is one, the button,
   one line about postage, then the detail folded away.
   The words come from tp-shop (section 5); the order is Blocksy's own layout
   setting (scripts/setup-shop-look.php). This only dresses them. */

/* The trail back up the shop: small and quiet, in ordinary letters. */
.ct-breadcrumbs {
	--theme-link-initial-color: var(--tp-ink-soft);
	--theme-link-hover-color: var(--tp-berry);
	color: var(--tp-ink-soft);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
.ct-breadcrumbs a:hover { text-decoration: underline; }

/* The photo: rounded, and lifted a little off the page.
   Blocksy clips the whole gallery to its own box, and a shadow inside a clip
   shows only as two pink wedges in the corners. The slider clips itself one
   level down (.flexy-view), so the outer clip can come off here. The shadow
   goes on the big photo alone, never around the strip of small ones. */
.woocommerce div.product .woocommerce-product-gallery { overflow: visible; }
.woocommerce div.product .woocommerce-product-gallery .ct-media-container,
.woocommerce div.product .woocommerce-product-gallery img {
	border-radius: var(--tp-r-lg);
}
.woocommerce div.product .woocommerce-product-gallery .ct-product-gallery-container > .ct-media-container,
.woocommerce div.product .woocommerce-product-gallery .flexy-view {
	box-shadow: var(--tp-shadow-raised);
	border-radius: var(--tp-r-lg);
}
/* The small photos under the big one: the one on show has a pink edge. It is
   Blocksy's own marker (a line drawn INSIDE the photo), given our colour. A
   ring drawn outside the photo is cut off by the photo's own frame. */
.woocommerce div.product .woocommerce-product-gallery li.active .ct-media-container::after {
	border-color: var(--tp-deep);
}

.entry-summary .tp-piece__label { margin: 0 0 0.45rem; }
.entry-summary .tp-piece__label a {
	--theme-link-initial-color: var(--tp-berry);
	--theme-link-hover-color: var(--tp-berry);
	color: var(--tp-berry);
	text-decoration: none;
}
.entry-summary .tp-piece__label a:hover { text-decoration: underline; text-underline-offset: 3px; }

.woocommerce div.product .product_title {
	--theme-font-size: var(--wp--preset--font-size--title);
	margin-bottom: 0.35rem;
}

.woocommerce div.product p.price {
	--theme-font-size: 1.5rem;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--tp-ink);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 1.125rem;
	line-height: 1.55;
}

/* A small tag: "One of a kind", "Sold". Words on a tinted ground, never colour alone. */
.tp-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.32rem 0.7rem;
	border-radius: var(--tp-r-sm);
	background: var(--tp-petal);
	color: var(--tp-berry);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
}
.tp-tag::before {
	content: "";
	flex: none;
	width: 0.62rem;
	height: 0.62rem;
	background: currentColor;
	-webkit-clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.tp-tag--sold {
	background: var(--wp--custom--signal--sold-tint);
	color: var(--wp--custom--signal--sold);
}
.tp-tag--sold::before { display: none; }

.woocommerce div.product .tp-stock {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem 0.8rem;
	margin: 0 0 1.1rem;
	color: var(--tp-ink-soft);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	min-height: 54px;
	padding-inline: 1.9rem;
	font-size: 1.125rem;
}

.woocommerce div.product .variations label {
	font-weight: 800;
	color: var(--tp-ink);
}

/* The line about postage, under the button. */
.tp-postage-line {
	margin: 0.95rem 0 0;
	color: var(--tp-ink-soft);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}
.tp-postage-line strong { color: var(--tp-ink); font-weight: 800; }

/* The folded sections. Each fold is a full-width row in ordinary letters, with
   a pink mark that turns when it opens. */
.entry-summary .woocommerce-tabs[data-type*="type-3"] {
	margin-top: 1.6rem;
	border-top: 1px solid var(--tp-line);
}
.entry-summary .woocommerce-tabs .ct-accordion-tab { border-bottom: 1px solid var(--tp-line); }
.entry-summary .woocommerce-tabs .ct-accordion-heading {
	--theme-font-size: var(--wp--preset--font-size--body);
	--theme-font-weight: 800;
	--theme-text-transform: none;
	--theme-letter-spacing: 0;
	--theme-icon-color: var(--tp-deep);
	min-height: 54px;
	padding-block: 0.95rem;
	color: var(--tp-ink);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
}
.entry-summary .woocommerce-tabs .ct-accordion-heading:hover,
.entry-summary .woocommerce-tabs .ct-accordion-heading[aria-expanded="true"] { color: var(--tp-deep); }
.entry-summary .woocommerce-tabs .ct-accordion-heading svg { fill: var(--tp-deep); }
.entry-summary .woocommerce-tabs article .entry-content {
	padding-bottom: 1.1rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}
.entry-summary .woocommerce-tabs article .entry-content > :last-child,
.entry-summary .woocommerce-tabs .tp-note > :last-child { margin-bottom: 0; }

/* Details: a plain two-column list. */
.entry-summary .woocommerce-tabs .shop_attributes { margin: 0; border: 0; }
.entry-summary .woocommerce-tabs .shop_attributes :is(th, td) {
	padding: 0.4rem 0;
	border: 0;
	border-bottom: 1px dashed var(--tp-line);
	background: none;
	font-size: var(--wp--preset--font-size--small);
	text-align: left;
	vertical-align: top;
}
.entry-summary .woocommerce-tabs .shop_attributes tr:last-child :is(th, td) { border-bottom: 0; }
.entry-summary .woocommerce-tabs .shop_attributes th { width: 38%; font-weight: 800; color: var(--tp-ink); }
.entry-summary .woocommerce-tabs .shop_attributes td p { margin: 0; padding: 0; }
.entry-summary .woocommerce-tabs .shop_attributes td a {
	--theme-link-initial-color: var(--tp-ink);
	color: var(--tp-ink);
	text-decoration: underline;
	text-decoration-color: var(--tp-rose);
	text-underline-offset: 3px;
}

/* Postage: each way of sending and its price, read from the shop's own settings. */
.tp-postage-list { margin: 0 0 0.9rem; padding: 0; list-style: none; }
.tp-postage-list li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 0.4rem 0;
	border-bottom: 1px dashed var(--tp-line);
}
.tp-postage-list strong { font-weight: 800; color: var(--tp-ink); white-space: nowrap; }

.woocommerce .related > .ct-module-title,
.woocommerce .upsells > .ct-module-title {
	--theme-font-size: 1.625rem;
	margin-bottom: 1.5rem;
}

/* ---------- 13b. Choosing: buttons to tap, not a list to open -----------------
   On a piece with choices (the lucky dip: a size and a colour), each choice is
   a button, and a colour shows a spot of her own paint. assets/js/tp.js builds
   them from WooCommerce's own lists and keeps the two in step; with no script
   the lists are simply there. */
.tp-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.tp-choice { position: relative; display: inline-flex; margin: 0; }
.tp-choice input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.tp-choice__face {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 46px;
	padding: 0.45rem 0.9rem;
	border-radius: var(--tp-r-md);
	background: var(--tp-paper);
	box-shadow: inset 0 0 0 1.5px var(--wp--custom--ui--field-border);
	color: var(--tp-ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.2;
	transition: box-shadow 160ms ease, background-color 160ms ease, transform 160ms var(--tp-settle);
}
.tp-choice input:hover + .tp-choice__face { box-shadow: inset 0 0 0 2px var(--tp-deep); }
.tp-choice input:checked + .tp-choice__face {
	background: var(--tp-blush);
	box-shadow: inset 0 0 0 2px var(--tp-deep);
	color: var(--tp-berry);
}
.tp-choice input:focus-visible + .tp-choice__face { outline: 3px solid var(--tp-berry); outline-offset: 2px; }
.tp-choice input:disabled + .tp-choice__face { opacity: 0.45; text-decoration: line-through; }
.tp-choice input:active + .tp-choice__face { transform: translateY(1px); }
/* The spot of paint beside a colour's name. Same pictures as the home page's chips. */
.tp-choice__dot {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--tp-petal) center / cover no-repeat;
	box-shadow: 0 0 0 2px var(--tp-paper), 0 0 0 3px #b7b4bf;
}
.tp-choice--pinks .tp-choice__dot { background-image: url("../img/paint/paint-pinks.jpg"); }
.tp-choice--purples .tp-choice__dot { background-image: url("../img/paint/paint-purples.jpg"); }
.tp-choice--blues .tp-choice__dot { background-image: url("../img/paint/paint-blues.jpg"); }
.tp-choice--greens-and-turquoise .tp-choice__dot { background-image: url("../img/paint/paint-greens-and-turquoise.jpg"); }
.tp-choice--yellows-and-golds .tp-choice__dot { background-image: url("../img/paint/paint-yellows-and-golds.jpg"); }
.tp-choice--oranges-and-reds .tp-choice__dot { background-image: url("../img/paint/paint-oranges-and-reds.jpg"); }
.tp-choice--rainbow .tp-choice__dot { background-image: url("../img/paint/paint-rainbow.jpg"); }
.tp-choice--black-white-and-neutrals .tp-choice__dot { background: conic-gradient(from 40deg, #1f1c1e 0 25%, #f7f5f6 0 50%, #b9b2b6 0 75%, #c8a47e 0); }
/* The lucky dip asks for ONE colour, not a family (Rachel, 12 Oct 2026: "red or orange instead of
   Oranges & Reds ... & also a surprise me"). Its list is its own ("Lucky dip colour"), and each is a
   single drawn spot with a little shine, so it reads at a glance. "Surprise me" is a spark on blush,
   the same spark as beside the painted word; "Rainbow" keeps her paint (the rule above). */
.tp-choices--dip-colour .tp-choice__dot {
	position: relative;
	background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 46%), var(--tp-dot, var(--tp-petal));
}
.tp-choices--dip-colour .tp-choice--rainbow .tp-choice__dot { background: url("../img/paint/paint-rainbow.jpg") center / cover no-repeat; }
.tp-choices--dip-colour .tp-choice--pink { --tp-dot: #e2569d; }
.tp-choices--dip-colour .tp-choice--purple { --tp-dot: #8a55c4; }
.tp-choices--dip-colour .tp-choice--blue { --tp-dot: #3f74d1; }
.tp-choices--dip-colour .tp-choice--turquoise { --tp-dot: #2fb3b0; }
.tp-choices--dip-colour .tp-choice--green { --tp-dot: #4a9e4f; }
.tp-choices--dip-colour .tp-choice--yellow { --tp-dot: #f2d541; }
.tp-choices--dip-colour .tp-choice--gold { --tp-dot: #d9a520; }
.tp-choices--dip-colour .tp-choice--orange { --tp-dot: #f08a2c; }
.tp-choices--dip-colour .tp-choice--red { --tp-dot: #d63a3a; }
.tp-choices--dip-colour .tp-choice--black { --tp-dot: #1f1c1e; }
.tp-choices--dip-colour .tp-choice--white { --tp-dot: #f7f5f6; }
.tp-choices--dip-colour .tp-choice--brown { --tp-dot: #8a5a3c; }
.tp-choices--dip-colour .tp-choice--surprise-me .tp-choice__dot { background: var(--tp-blush); }
.tp-choices--dip-colour .tp-choice--surprise-me .tp-choice__dot::after {
	content: "";
	position: absolute;
	inset: 14%;
	background: var(--wp--custom--ui--sparkle);
	-webkit-clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
/* WooCommerce's own list, once the buttons have taken over: still in the page (it is what
   WooCommerce reads), out of sight and out of the tab order. */
.tp-choices__source {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}
.woocommerce div.product table.variations :is(th, td) { display: block; padding: 0; text-align: left; }
.woocommerce div.product table.variations th.label { margin: 0 0 0.5rem; }
.woocommerce div.product table.variations tr { display: block; margin: 0 0 1.1rem; }

/* ---------- 13c. The cart ----------------------------------------------------
   WooCommerce's cart, dressed: the photo with soft corners, the name in ink,
   the totals on a soft card, and the one loud button on the page is the way
   to the checkout. Above it, how far there is to go to free postage (tp-shop,
   section 6). */
/* The cart and the line above it are as wide as the header's own column, so their left edges meet
   the logo's. (Blocksy's "wide" is 1420px here, which put the cart 68px outside it.) */
body.woocommerce-cart .entry-content > .wp-block-woocommerce-cart.alignwide,
body.woocommerce-cart .entry-content > .tp-postage-meter {
	max-width: min(100%, var(--theme-normal-container-max-width));
}
.tp-postage-meter {
	margin: 0 auto 1.9rem;
	padding: 1rem 1.25rem 1.15rem;
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-r-lg);
	background: var(--tp-soft);
}
.tp-postage-meter[hidden] { display: none; }
.tp-postage-meter__words {
	margin: 0 0 0.65rem;
	color: var(--tp-ink);
	font-weight: 700;
	line-height: 1.4;
}
.tp-postage-meter__words strong { color: var(--tp-berry); font-weight: 800; }
/* The bar is a measure, not a button: it may be round-ended. */
.tp-postage-meter__bar {
	height: 0.6rem;
	overflow: hidden;
	border-radius: 999px;
	background: var(--tp-petal);
}
.tp-postage-meter__bar span {
	display: block;
	height: 100%;
	min-width: 0.6rem;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--tp-deep), var(--tp-bright));
	transition: width 700ms var(--tp-settle);
}
.tp-postage-meter.is-reached .tp-postage-meter__words { color: var(--tp-berry); font-weight: 800; }
.tp-postage-meter.is-reached .tp-postage-meter__words::before {
	content: "";
	display: inline-block;
	width: 0.8rem;
	height: 0.8rem;
	margin-right: 0.5rem;
	background: var(--wp--custom--ui--sparkle);
	-webkit-clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.wc-block-cart .wc-block-cart-items { border-bottom: 0; }
.wc-block-cart .wc-block-cart-items__header th {
	color: var(--tp-ink-soft);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.wc-block-cart .wc-block-cart-items__row { border-color: var(--tp-line); }
.wc-block-cart .wc-block-cart-item__image img {
	border-radius: var(--tp-r-md);
	box-shadow: var(--tp-shadow-card);
}
html body .wc-block-cart table.wc-block-cart-items .wc-block-components-product-name {
	--theme-link-initial-color: var(--tp-ink);
	--theme-link-hover-color: var(--tp-deep);
	color: var(--tp-ink);
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.3;
	text-decoration: none;
}
html body .wc-block-cart table.wc-block-cart-items .wc-block-components-product-name:hover { color: var(--tp-deep); }
.wc-block-cart .wc-block-cart-item__prices,
.wc-block-cart .wc-block-components-product-metadata {
	color: var(--tp-ink-soft);
	font-size: var(--wp--preset--font-size--small);
}
.wc-block-cart .wc-block-cart-item__total { color: var(--tp-ink); font-weight: 800; }
.wc-block-cart .wc-block-components-quantity-selector {
	border-radius: var(--tp-r-md);
	border-color: var(--wp--custom--ui--field-border);
}
.wc-block-cart .wc-block-cart-item__remove-link {
	color: var(--tp-ink-soft);
	font-size: var(--wp--preset--font-size--small);
}
.wc-block-cart .wc-block-cart-item__remove-link:hover { color: var(--tp-berry); }

/* The totals: a soft card with the sum that matters in heavier letters. */
.wc-block-cart .wc-block-cart__sidebar {
	padding: 1.4rem 1.4rem 1.5rem;
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-r-lg);
	background: var(--tp-soft);
}
html body .wc-block-cart h2.wc-block-cart__totals-title {
	margin: 0 0 0.6rem;
	padding: 0;
	color: var(--tp-ink);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
}
.wc-block-cart .wc-block-components-totals-wrapper { border-color: var(--tp-line); }
.wc-block-cart .wc-block-components-totals-item__label { color: var(--tp-ink); }
.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--tp-ink);
	font-size: 1.25rem;
	font-weight: 800;
}
.wc-block-cart .wc-block-cart__submit-button { width: 100%; min-height: 54px; font-size: 1.125rem; }
.wc-block-cart .wc-block-components-button__text { font-weight: 800; }

/* An empty cart: one line, the kinds of piece, one button. */
.tp-empty-cart { text-align: center; }
.tp-empty-cart h2 { margin: 0 0 0.5rem; }
.tp-empty-cart .wp-block-buttons { justify-content: center; margin-top: 2.25rem; }

/* ---------- 13d. The bag, and the cart that slides in --------------------------
   WooCommerce's own sliding cart (tp-shop, section 7), with its contents laid
   out in parts/mini-cart.html. Pressing "Add to cart" slides it open with the
   piece in it, and the checkout is one tap from there.
   Dressed like the cart page: the photo with soft corners, the name in ink,
   "View cart" the quiet button and "Checkout" the loud one. */

/* The bag in the header. It sits in one of Blocksy's "HTML" header parts, which
   dress their contents as page text; none of that is wanted around a button. */
#header .ct-header-text[data-id="bag"] { --theme-content-spacing: 0; line-height: 1; }
#header .ct-header-text[data-id="bag"] .entry-content > * { margin: 0; }
#header .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0.5rem;
	border: 0;
	border-radius: var(--tp-r-md);
	background: none;
	color: var(--tp-ink);
	cursor: pointer;
	transition: color 160ms ease, background-color 160ms ease;
}
#header .wc-block-mini-cart__button:is(:hover, :focus-visible) {
	color: var(--tp-deep);
	background: var(--tp-soft);
}
/* How many are in it. WooCommerce writes this badge's two colours onto the
   element itself, worked out from the icon's colour, so they are overruled here. */
#header .wc-block-mini-cart__badge {
	background: var(--tp-deep) !important;
	color: var(--tp-paper) !important;
	font-weight: 800;
}

/* After a piece goes in, WooCommerce adds a "View cart" link beside the button.
   The cart has just slid in to say the same thing, with the way to the checkout. */
html body a.added_to_cart { display: none; }

/* Behind the cart: the page dimmed with her plum, not with grey. */
html body .wc-block-components-drawer__screen-overlay {
	background-color: color-mix(in srgb, var(--tp-ink) 46%, transparent);
}
html body .wc-block-mini-cart__drawer {
	background: var(--tp-paper);
	color: var(--tp-ink);
	box-shadow: -18px 0 44px -20px rgba(135, 28, 82, 0.45);
}
/* The cross that closes it: a plain mark, easy to hit. */
html body .wc-block-components-button.wc-block-components-drawer__close {
	opacity: 0.75;
	box-shadow: none;
	min-height: 0;
}
html body .wc-block-components-button.wc-block-components-drawer__close:is(:hover, :focus-visible) { opacity: 1; }
/* Its keyboard ring sits inside its box (the box runs to the cart's own corner). */
html body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link).wc-block-components-drawer__close:focus-visible {
	outline-offset: -10px;
	border-radius: var(--tp-r-md);
}

html body .wc-block-mini-cart__drawer .wc-block-mini-cart__title {
	color: var(--tp-ink);
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.2;
}
/* "(items: 2)" is a count, not part of the name. */
html body .wc-block-mini-cart__drawer .wc-block-mini-cart__title span + span {
	margin-left: 0.35rem;
	color: var(--tp-ink-soft);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

html body .wc-block-mini-cart__drawer .wc-block-cart-items__row { border-color: var(--tp-line); }
html body .wc-block-mini-cart__drawer .wc-block-cart-item__image img {
	border-radius: var(--tp-r-md);
	box-shadow: var(--tp-shadow-card);
}
html body .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-components-product-name {
	--theme-link-initial-color: var(--tp-ink);
	--theme-link-hover-color: var(--tp-deep);
	color: var(--tp-ink);
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.3;
	text-decoration: none;
}
html body .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-components-product-name:hover { color: var(--tp-deep); }
html body .wc-block-mini-cart__drawer .wc-block-cart-item__prices,
html body .wc-block-mini-cart__drawer .wc-block-components-product-metadata {
	color: var(--tp-ink-soft);
	font-size: var(--wp--preset--font-size--small);
}
html body .wc-block-mini-cart__drawer .wc-block-cart-item__total { color: var(--tp-ink); font-weight: 800; }
html body .wc-block-mini-cart__drawer .wc-block-components-quantity-selector {
	border-radius: var(--tp-r-md);
	border-color: var(--wp--custom--ui--field-border);
}
html body .wc-block-mini-cart__drawer .wc-block-cart-item__remove-link { color: var(--tp-ink-soft); }
html body .wc-block-mini-cart__drawer .wc-block-cart-item__remove-link:hover { color: var(--tp-berry); }

/* How far to free postage, between the pieces and the sum. */
html body .wc-block-mini-cart__drawer .tp-postage-meter--bag {
	flex: none;
	margin: 0;
	padding: 0.9rem 16px 1rem;
	border-width: 1px 0 0;
	border-radius: 0;
	background: var(--tp-paper);
}

html body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
	border-top: 1px solid var(--tp-line);
	background: var(--tp-soft);
}
html body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label,
html body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
	color: var(--tp-ink);
	font-size: 1.125rem;
	font-weight: 800;
}
html body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer .wc-block-components-totals-item__description {
	color: var(--tp-ink-soft);
	font-size: var(--wp--preset--font-size--small);
}
html body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button {
	min-height: 50px;
	font-size: var(--wp--preset--font-size--body);
}
html body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button__text { font-weight: 800; }
/* "View cart" is the quiet one; "Checkout" is the loud one. */
html body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions a.wc-block-mini-cart__footer-cart.wc-block-components-button {
	--tp-b-top: var(--tp-paper);
	--tp-b-bottom: var(--tp-paper);
	--tp-b-edge: var(--tp-petal);
	--tp-b-text: var(--tp-deep);
	--tp-b-glint: rgba(211, 91, 151, 0.22);
	background: linear-gradient(180deg, var(--tp-b-top), var(--tp-b-bottom));
	color: var(--tp-b-text);
	--tp-b-shadow: inset 0 0 0 2px var(--tp-deep), 0 3px 0 var(--tp-b-edge);
	box-shadow: var(--tp-b-shadow);
}
html body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions a.wc-block-mini-cart__footer-cart.wc-block-components-button:is(:hover, :focus-visible) {
	--tp-b-top: var(--tp-soft);
	--tp-b-bottom: var(--tp-blush);
	--tp-b-text: var(--tp-berry);
	box-shadow: inset 0 0 0 2px var(--tp-berry), 0 4px 0 var(--tp-b-edge);
}
html body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions a.wc-block-mini-cart__footer-cart.wc-block-components-button::before { display: none; }

/* Nothing in it yet: a line, and the way into the shop. */
html body .wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper { text-align: center; }
html body .wc-block-mini-cart__drawer .tp-bag-empty__line {
	margin: 0.2rem 0 1.4rem;
	color: var(--tp-ink);
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 800;
	line-height: 1.2;
}

/* ---------- 13f. The checkout --------------------------------------------------
   WooCommerce's own one-page checkout, dressed like the cart: fields a thumb
   can hit, the order on a soft card, one loud button, and as few questions as
   a parcel needs. Its words and its rules are in tp-shop, section 8. */
body.woocommerce-checkout .entry-content > .wp-block-woocommerce-checkout.alignwide {
	max-width: min(100%, var(--theme-normal-container-max-width));
}

/* Two things on the page that ask or say nothing. Nobody has an account here, so "you are checking
   out as a guest" tells no one anything. And the shop posts within one country: a list to choose a
   country from, holding one country, is a question with one answer. It comes back by itself the day
   the shop sells to a second one (the rule only hides a list of two lines: "choose" and the country). */
.wc-block-checkout .wc-block-checkout__guest-checkout-notice,
.wc-block-checkout .wc-block-components-address-form__country:not(:has(option:nth-child(3))) { display: none; }

html body .wc-block-checkout .wc-block-components-checkout-step__title,
html body .wc-block-checkout .wc-block-components-checkout-order-summary__title,
html body .wc-block-checkout .wc-block-components-checkout-order-summary__title-text {
	color: var(--tp-ink);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.25;
	text-transform: none;
}
.wc-block-checkout .wc-block-components-checkout-step__description { color: var(--tp-ink-soft); }

/* A choice (how it is posted, how it is paid): the chosen one in her pink, on the soft tint. */
.wc-block-checkout .wc-block-components-radio-control--highlight-checked,
.wc-block-checkout .wc-block-components-radio-control-accordion-option { border-radius: var(--tp-r-md); }
.wc-block-checkout .wc-block-components-radio-control--highlight-checked::after { border-color: var(--tp-line); border-radius: var(--tp-r-md); }
.wc-block-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-radius: var(--tp-r-md);
	background: var(--tp-soft);
	box-shadow: inset 0 0 0 2px var(--tp-deep);
}
.wc-block-checkout .wc-block-components-radio-control__label { color: var(--tp-ink); font-weight: 700; }
.wc-block-checkout .wc-block-components-radio-control__secondary-label { color: var(--tp-ink); font-weight: 800; }
.wc-block-checkout .wc-block-components-radio-control-accordion-content { color: var(--tp-ink-soft); }

/* A field that was missed says so in the colour for it, in words under the field. */
.wc-block-checkout .wc-block-components-validation-error { color: var(--wp--custom--signal--bad); font-weight: 700; }
.wc-block-checkout .has-error :is(input, select, textarea) { border-color: var(--wp--custom--signal--bad); }

/* The order, beside the questions: a soft card, the sum that matters in heavier letters. */
.wc-block-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-r-lg);
	background: var(--tp-soft);
}
.wc-block-checkout .wc-block-components-order-summary-item__image img {
	border-radius: var(--tp-r-sm);
	box-shadow: var(--tp-shadow-card);
}
html body .wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-name {
	color: var(--tp-ink);
	font-weight: 800;
	line-height: 1.3;
}
.wc-block-checkout .wc-block-components-order-summary-item__individual-prices,
.wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-metadata {
	color: var(--tp-ink-soft);
	font-size: var(--wp--preset--font-size--small);
}
.wc-block-checkout .wc-block-components-totals-wrapper { border-color: var(--tp-line); }
.wc-block-checkout .wc-block-components-totals-item__label { color: var(--tp-ink); }
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--tp-ink);
	font-size: 1.25rem;
	font-weight: 800;
}

.wc-block-checkout .wc-block-checkout__terms { color: var(--tp-ink-soft); font-size: var(--wp--preset--font-size--small); }
.wc-block-checkout .wc-block-checkout__terms a { color: var(--tp-deep); text-decoration: underline; text-underline-offset: 3px; }
.wc-block-checkout .wc-block-components-checkout-place-order-button { min-height: 54px; font-size: 1.125rem; }
.wc-block-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button__text { font-weight: 800; }

/* A list to choose from at the checkout (the state, which market): a long choice stops short of
   the arrow at its right, with three dots, and never runs under it. */
/* 🔴 Marked as overriding, which nothing else in this file is: the theme sets this one padding with
   that mark itself (15px either side, in its sheet for the cart and checkout), and a rule without
   the mark loses to it however exact its selector. Found by listing every rule that matched the
   list: the value read back as 15px while this rule was plainly in the page. */
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__container .wc-blocks-components-select__select {
	padding-inline-end: 2.75rem !important;
	text-overflow: ellipsis;
}

/* ---------- 13g. The page that thanks the buyer ---------------------------------
   WooCommerce's own "order received" page: what was ordered, where it is going
   and what happens next (the first line is tp-shop's, section 9). Dressed like
   the cart: the facts on a soft card, hairlines in her pink, heavier letters
   for the sum. */
html body .woocommerce-order ul.woocommerce-order-overview {
	overflow: hidden;
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-r-lg);
	background: var(--tp-soft);
}
html body .woocommerce-order ul.woocommerce-order-overview li {
	border-color: var(--tp-line);
	color: var(--tp-ink-soft);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0;
	text-transform: none;
}
html body .woocommerce-order ul.woocommerce-order-overview li strong {
	color: var(--tp-ink);
	font-size: 1.0625rem;
	font-weight: 800;
}
html body .woocommerce-order :is(.woocommerce-order-details__title, .woocommerce-column__title) {
	margin-bottom: 0.75rem;
	color: var(--tp-ink);
	font-size: 1.25rem;
	font-weight: 800;
}
html body .woocommerce-order table.shop_table :is(th, td) { border-color: var(--tp-line); color: var(--tp-ink); }
html body .woocommerce-order table.shop_table thead th {
	color: var(--tp-ink-soft);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
html body .woocommerce-order table.shop_table tfoot tr:last-child :is(th, td),
html body .woocommerce-order table.shop_table .order-total :is(th, td) { font-weight: 800; }
html body .woocommerce-order table.shop_table a {
	color: var(--tp-ink);
	font-weight: 800;
	text-decoration: none;
}
html body .woocommerce-order address {
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-r-md);
	font-style: normal;
}
/* Where the parcel is, once it has a number. */
html body .woocommerce-order .tp-tracking {
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--tp-petal);
	border-radius: var(--tp-r-md);
	background: var(--tp-soft);
}

/* ---------- 13e. What the shop says back -------------------------------------
   "... has been added to your cart", "that one is already in your cart", a
   coupon that did not work. Blocksy's own are a grey bar for news and a strong
   red bar with white words for anything refused, and our main button sat pink
   on the red.
   Here each is a soft card with its words in ink. The words say what happened;
   colour only backs them up, in the ground and the small mark at the start.
   News is blush. Something refused is a pale red, because that one has to be
   noticed. The button inside is the quiet one: the page's own button is still
   the loud one on the page.

   There are two kinds of element. A page's notice (.woocommerce-message and
   its family) is coloured by Blocksy through variables on a one-class
   selector. The cart's and the checkout's own (a "notice banner") is reached
   from the body's class with three classes' weight, and has its border taken
   off. So the banner's rules start `html :is(body.woocommerce-page, body)`:
   that matches any body, and carries the weight of the heavier of the two.
   🔴 Written with the lighter selector, the banner kept Blocksy's white words
   on our pale red ground. */
html body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-thankyou-order-received),
html :is(body.woocommerce-page, body) .wc-block-components-notice-banner:is(.is-success, .is-info, .is-error, .is-warning) {
	--theme-text-color: var(--tp-ink);
	--theme-link-initial-color: var(--tp-deep);
	--theme-link-hover-color: var(--tp-berry);
	--background-color: var(--tp-soft);
	border: 1px solid var(--tp-petal);
	border-radius: var(--tp-r-md);
	background-color: var(--background-color);
	color: var(--tp-ink);
	box-shadow: var(--tp-shadow-card);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.45;
}
html body .woocommerce-error,
html :is(body.woocommerce-page, body) .wc-block-components-notice-banner.is-error {
	--background-color: var(--wp--custom--signal--bad-tint);
	border-color: color-mix(in srgb, var(--wp--custom--signal--bad) 30%, var(--wp--custom--signal--bad-tint));
}
html :is(body.woocommerce-page, body) .wc-block-components-notice-banner.is-warning {
	--background-color: var(--wp--custom--signal--warn-tint);
	border-color: color-mix(in srgb, var(--wp--custom--signal--warn) 30%, var(--wp--custom--signal--warn-tint));
}
/* The mark at the start. */
html body :is(.woocommerce-message, .woocommerce-info, .woocommerce-thankyou-order-received)::before {
	color: var(--tp-deep);
	opacity: 1;
}
/* Good news starts with a tick. Blocksy's mark is a bell from its icon font, for every kind of
   notice; beside "Your order has come through" a bell reads as an alarm. The tick is drawn here
   (a white stroke on her deep pink, the same disc the cart's own notices carry), so no font is
   asked for and nothing is fetched. News that is neither good nor bad keeps the bell. */
html body :is(.woocommerce-message, .woocommerce-thankyou-order-received)::before {
	content: "";
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--tp-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4l3 3 5.8-6.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
html body .woocommerce-error::before {
	color: var(--wp--custom--signal--bad);
	opacity: 1;
}
html :is(body.woocommerce-page, body) .wc-block-components-notice-banner:is(.is-success, .is-info, .is-error, .is-warning) > svg {
	background-color: var(--tp-deep);
	fill: var(--tp-paper);
}
html :is(body.woocommerce-page, body) .wc-block-components-notice-banner.is-error > svg { background-color: var(--wp--custom--signal--bad); }
html :is(body.woocommerce-page, body) .wc-block-components-notice-banner.is-warning > svg { background-color: var(--wp--custom--signal--warn); }
/* The cross that closes one: a plain mark. Blocksy paints every drawing inside a banner as a small
   button, the cross included, which made it a filled square. Its box is 16 px (WooCommerce fixes
   that), so the place a finger can land is widened around it without moving anything. */
html :is(body.woocommerce-page, body) .wc-block-components-notice-banner .wc-block-components-notice-banner__dismiss {
	position: relative;
	color: var(--tp-ink-soft);
	opacity: 1;
}
html :is(body.woocommerce-page, body) .wc-block-components-notice-banner .wc-block-components-notice-banner__dismiss::after {
	content: "";
	position: absolute;
	inset: -12px;
}
html :is(body.woocommerce-page, body) .wc-block-components-notice-banner .wc-block-components-notice-banner__dismiss svg {
	background: none;
	fill: currentColor;
}
html :is(body.woocommerce-page, body) .wc-block-components-notice-banner .wc-block-components-notice-banner__dismiss:is(:hover, :focus-visible) { color: var(--tp-berry); }

/* The button inside a notice, and the coupon box's "Apply": the quiet one, a size smaller. */
html body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button,
html body .wc-block-components-totals-coupon__form button.wc-block-components-totals-coupon__button {
	--tp-b-top: var(--tp-paper);
	--tp-b-bottom: var(--tp-paper);
	--tp-b-edge: var(--tp-petal);
	--tp-b-text: var(--tp-deep);
	--tp-b-glint: rgba(211, 91, 151, 0.22);
	flex: none;
	min-height: 40px;
	padding: 0.45rem 1.1rem;
	font-size: var(--wp--preset--font-size--small);
	--tp-b-shadow: inset 0 0 0 2px var(--tp-deep), 0 3px 0 var(--tp-b-edge);
	box-shadow: var(--tp-b-shadow);
}
html body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button:is(:hover, :focus-visible),
html body .wc-block-components-totals-coupon__form button.wc-block-components-totals-coupon__button:is(:hover, :focus-visible) {
	--tp-b-top: var(--tp-soft);
	--tp-b-bottom: var(--tp-blush);
	--tp-b-text: var(--tp-berry);
	box-shadow: inset 0 0 0 2px var(--tp-berry), 0 4px 0 var(--tp-b-edge);
}
html body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button:active,
html body .wc-block-components-totals-coupon__form button.wc-block-components-totals-coupon__button:active {
	box-shadow: inset 0 0 0 2px var(--tp-berry), 0 1px 0 var(--tp-b-edge);
}
html body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button::before,
html body .wc-block-components-totals-coupon__form button.wc-block-components-totals-coupon__button::before { display: none; }
/* "Apply" before a code is typed: pale, and still a button with its rim. */
html body .wc-block-components-totals-coupon__form button.wc-block-components-totals-coupon__button:disabled { box-shadow: inset 0 0 0 2px var(--tp-deep), 0 3px 0 var(--tp-b-edge); }

/* ---------- 14. Footer ------------------------------------------------------
   The foot of every page: her mark and her line, the shop's links, her two
   social pages, then the copyright line. Blush, with the same scalloped edge as
   a blush band, lapping up over whatever comes before it.
   Laid out by scripts/setup-footer.php.
   🔴 Blocksy sets link colours on each link element in the footer, so every
   state is set here on the links themselves (and scripts/check-menu.mjs
   measures them). A rule on the menu's wrapper never reaches them. */
[data-footer*="type-1"] .ct-footer {
	--tp-scallop: 14px;
	position: relative;
	z-index: 1;
	margin-top: calc(var(--tp-scallop) * -1);
	padding-top: var(--tp-scallop);
	background: var(--tp-blush);
	color: var(--tp-ink);
	-webkit-mask:
		radial-gradient(circle var(--tp-scallop) at 50% var(--tp-scallop), #000 calc(100% - 0.5px), rgba(0, 0, 0, 0)) 50% 0 / calc(var(--tp-scallop) * 2) calc(var(--tp-scallop) * 2) repeat-x,
		linear-gradient(#000 0 0) 50% 100% / 100% calc(100% - var(--tp-scallop)) no-repeat;
	mask:
		radial-gradient(circle var(--tp-scallop) at 50% var(--tp-scallop), #000 calc(100% - 0.5px), rgba(0, 0, 0, 0)) 50% 0 / calc(var(--tp-scallop) * 2) calc(var(--tp-scallop) * 2) repeat-x,
		linear-gradient(#000 0 0) 50% 100% / 100% calc(100% - var(--tp-scallop)) no-repeat;
}

[data-footer*="type-1"] .ct-footer [data-row] {
	background: transparent;
	border: 0;
}
[data-footer*="type-1"] .ct-footer [data-row="middle"] > .ct-container {
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.25rem);
	align-items: start;
	gap: 2.5rem;
}
[data-footer*="type-1"] .ct-footer [data-row="bottom"] > .ct-container {
	padding-block: 1.1rem 1.4rem;
	border-top: 1px solid var(--tp-petal);
}

/* Her mark and her line. */
.tp-footer-brand { display: grid; gap: 0.75rem; justify-items: start; }
.tp-footer-brand__logo { margin: 0; }
.tp-footer-brand__logo img { display: block; width: 9.5rem; height: auto; }
.tp-footer-brand__line {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--tp-ink-soft);
}

/* The links: one under another from the column's left edge, ink, berry and underlined under the
   pointer and on the page you are on. Her social pages sit at the right on a wide screen. */
[data-footer*="type-1"] .ct-footer [data-column="menu"] { --horizontal-alignment: flex-start; }
[data-footer*="type-1"] .ct-footer [data-column="socials"] { --horizontal-alignment: flex-end; }
[data-footer*="type-1"] .ct-footer [data-id="menu"] ul { row-gap: 0.15rem; justify-content: flex-start; }
[data-footer*="type-1"] .ct-footer [data-id="menu"] li { text-align: left; }
@media (max-width: 689px) {
	[data-footer*="type-1"] .ct-footer [data-column="socials"] { --horizontal-alignment: flex-start; }
}
[data-footer*="type-1"] .ct-footer [data-id="menu"] .ct-menu-link {
	--theme-link-initial-color: var(--tp-ink);
	--theme-link-hover-color: var(--tp-berry);
	padding-block: 0.4rem;
	color: var(--tp-ink);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none;
}
[data-footer*="type-1"] .ct-footer [data-id="menu"] .ct-menu-link:hover,
[data-footer*="type-1"] .ct-footer [data-id="menu"] .ct-menu-link:focus-visible,
[data-footer*="type-1"] .ct-footer [data-id="menu"] .current-menu-item > .ct-menu-link {
	color: var(--tp-berry);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Her social pages: two round tiles in the button's pink, the icon in white. */
[data-footer*="type-1"] .ct-footer .ct-social-box {
	--items-spacing: 0.75rem;
	--theme-icon-size: 20px;
}
[data-footer*="type-1"] .ct-footer .ct-social-box a {
	--theme-icon-color: var(--tp-paper);
	--theme-icon-hover-color: var(--tp-paper);
	--background-color: var(--tp-deep);
	--background-hover-color: var(--tp-berry);
	justify-content: center;
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 50%;
	background: linear-gradient(180deg, var(--tp-bright), var(--tp-deep));
	box-shadow: 0 3px 0 var(--tp-berry);
	transition: transform 160ms var(--tp-settle), box-shadow 160ms var(--tp-settle);
}
[data-footer*="type-1"] .ct-footer .ct-social-box a .ct-icon-container {
	background: none;
	width: auto;
	height: auto;
}
[data-footer*="type-1"] .ct-footer .ct-social-box a svg { fill: var(--tp-paper); }
[data-footer*="type-1"] .ct-footer .ct-social-box a:is(:hover, :focus-visible) {
	transform: translateY(-2px);
	box-shadow: 0 5px 0 var(--tp-berry);
}
[data-footer*="type-1"] .ct-footer .ct-social-box a:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 var(--tp-berry);
}

/* The sign-up for her list: a row across the foot of every page, above the three columns.
   On a wide screen the words are at the left and the two boxes and the button run in a line. */
[data-footer*="type-1"] .ct-footer [data-row="top"] > .ct-container { padding-block: clamp(2.25rem, 4.5vw, 3.25rem) 0; }
[data-footer*="type-1"] .ct-footer [data-row="top"]:not(:has(.tp-join)) { display: none; }
[data-footer*="type-1"] .ct-footer [data-row="top"] .ct-widget { margin: 0; }
.tp-join {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
	gap: 1.5rem 3.5rem;
	align-items: center;
	padding-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
	border-bottom: 1px solid var(--tp-petal);
}
.tp-join__words .tp-eyebrow { margin: 0 0 0.35rem; }
body .tp-join__title { --theme-font-size: 1.625rem; margin: 0 0 0.45rem; color: var(--tp-ink); }
.tp-join__words p:last-child { margin: 0; color: var(--tp-ink); }
.tp-join .tp-form { margin: 0; }
.tp-join .fluentform form > fieldset {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto;
	gap: 0.75rem;
	align-items: end;
	margin: 0;
	padding: 0;
	border: 0;
}
.tp-join .fluentform form > fieldset > * { margin: 0; min-width: 0; }
.tp-join .fluentform .ff-el-group { margin-bottom: 0; }
.tp-join .fluentform .ff-t-container { display: block; }
.tp-join .fluentform .ff-t-cell { padding: 0; }
.tp-join .fluentform .ff_submit_btn_wrapper { margin: 0; }
.tp-join .fluentform .ff-message-success { grid-column: 1 / -1; }
/* A message under a missed box must not push the row's other boxes out of line. */
.tp-join .fluentform .ff-el-is-error { align-self: start; }

/* The footer's links, in three groups: the shop, about her, the small print. One list; a link
   with the class tp-menu-break starts a new column (scripts/build-menu.php puts it on the first
   link of the second and third groups). The middle column of the footer is the wide one, so the
   three groups have room. On a phone: two columns, and the third group sits under the second. */
[data-footer*="type-1"] .ct-footer [data-id="menu"] ul { display: block; columns: 3; column-gap: 2rem; }
[data-footer*="type-1"] .ct-footer [data-id="menu"] li { break-inside: avoid; }
[data-footer*="type-1"] .ct-footer [data-id="menu"] li.tp-menu-break { break-before: column; }
@media (min-width: 1000px) {
	[data-footer*="type-1"] .ct-footer [data-row="middle"] > .ct-container { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr) minmax(0, 0.45fr); }
}
@media (max-width: 689.98px) {
	[data-footer*="type-1"] .ct-footer [data-id="menu"] ul { columns: 2; }
	[data-footer*="type-1"] .ct-footer [data-id="menu"] li.tp-menu-break ~ li.tp-menu-break { break-before: auto; margin-top: 1.1rem; }
}
@media (max-width: 999.98px) {
	.tp-join { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 689.98px) {
	.tp-join .fluentform form > fieldset { grid-template-columns: minmax(0, 1fr); }
	.tp-join .fluentform .ff_submit_btn_wrapper .ff-btn { width: 100%; }
}

[data-footer*="type-1"] .ct-footer .ct-footer-copyright {
	color: var(--tp-ink-soft);
	font-size: var(--wp--preset--font-size--small);
}
[data-footer*="type-1"] .ct-footer a:not(.ct-menu-link):not([data-network]) {
	color: var(--tp-ink);
	text-decoration: underline;
}

/* ---------- 14b. The other pages ---------------------------------------------
   About, Collections, Stockists, Markets, FAQ and care, Join, and the four
   policy pages. The same bands as Home; these are the few parts Home doesn't
   have. */

/* The head a page opens with: a label, the page's name, one line. It sits
   straight under the header, so only its lower edge is scalloped. */
.tp-page-head {
	margin-top: 0;
	padding-block: var(--wp--preset--spacing--60) calc(var(--wp--preset--spacing--60) + var(--tp-scallop));
	-webkit-mask:
		radial-gradient(circle var(--tp-scallop) at 50% var(--tp-scallop), #000 calc(100% - 0.5px), rgba(0, 0, 0, 0)) 50% 100% / calc(var(--tp-scallop) * 2) calc(var(--tp-scallop) * 2) repeat-x,
		linear-gradient(#000 0 0) 50% 0 / 100% calc(100% - var(--tp-scallop)) no-repeat;
	mask:
		radial-gradient(circle var(--tp-scallop) at 50% var(--tp-scallop), #000 calc(100% - 0.5px), rgba(0, 0, 0, 0)) 50% 100% / calc(var(--tp-scallop) * 2) calc(var(--tp-scallop) * 2) repeat-x,
		linear-gradient(#000 0 0) 50% 0 / 100% calc(100% - var(--tp-scallop)) no-repeat;
}
body .tp-page-head h1 {
	--theme-font-size: clamp(2.1rem, 5.2vw, 3.1rem);
	margin: 0.2rem auto 0;
}
.tp-page-head .tp-eyebrow { margin-bottom: 0.4rem; }
.tp-page-head .tp-lead { margin: 0.9rem auto 0; }
.tp-page-head .tp-stockists { margin-top: 2.25rem; text-align: left; }

/* A page of plain words (postage, returns, privacy, terms): a reading width, and room above a small heading. */
.tp-prose h3 { margin: 2.2rem 0 0.5rem; }
.tp-prose .tp-lead { margin-bottom: 0.5rem; }
.tp-prose .tp-postage-list { margin-bottom: 1.25rem; }
.tp-band :is(ul.wp-block-list, ol.wp-block-list) { padding-left: 1.25rem; }
.tp-band ul.wp-block-list li { margin-bottom: 0.45rem; }

/* A photo beside words that start at the top (a list of dates), and a painting wider than it is tall. */
.tp-split--top { align-items: start; }
.tp-split__photo--wide img { aspect-ratio: 5 / 3; }

/* Four plain reasons, side by side. */
.tp-reasons {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: 2.25rem;
}
.tp-reasons > * { margin-block: 0; }
.tp-reason {
	padding: 1.25rem 1.25rem 1.4rem;
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-r-lg);
	background: var(--tp-paper);
	box-shadow: var(--tp-shadow-card);
}
body .tp-reason h3 { --theme-font-size: 1.125rem; margin: 0 0 0.4rem; }
.tp-reason p { margin: 0; color: var(--tp-ink-soft); font-size: var(--wp--preset--font-size--small); line-height: 1.55; }

/* Her own words, set larger, under a small round painting. */
.tp-quote {
	max-width: 36rem;
	margin: 0 auto 1.25rem;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
	line-height: 1.55;
	color: var(--tp-ink);
}
.tp-quote__dome { width: 7.5rem; margin: 0 auto 1.6rem; }

/* A collection: its name, a few words, its pieces. A hairline between one and the next. */
.tp-collection + .tp-collection {
	margin-top: 4rem;
	padding-top: 3.5rem;
	border-top: 1px solid var(--tp-line);
}
.tp-collection__name { margin: 0 0 0.5rem; }

/* The shops that stock her: a town, in small capitals, and the shop's name. */
.tp-stockists {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tp-stockist {
	display: grid;
	/* Packed at the top: a card with a one-line address, or none, is as tall as its neighbour. */
	align-content: start;
	gap: 0.2rem;
	margin: 0;
	padding: 0.95rem 1.1rem 1rem;
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-r-lg);
	background: var(--tp-paper);
	box-shadow: var(--tp-shadow-card);
}
.tp-stockist__town {
	color: var(--tp-berry);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.tp-stockist__name { color: var(--tp-ink); font-weight: 800; line-height: 1.3; }
.tp-stockist__name a { color: inherit; }
/* Where it is, under its name (Rachel, 12 Oct 2026: "add state and addresses"). */
.tp-stockist__address { color: var(--tp-ink-soft); font-size: var(--wp--preset--font-size--small); line-height: 1.45; }

/* Her regular markets: the name, its rule in words, and the next date. */
.local-pickups-regulars {
	display: grid;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}
.local-pickups-regular {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.1rem 1rem;
	align-items: center;
	margin: 0;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-r-lg);
	background: var(--tp-paper);
}
.local-pickups-regular__name { grid-column: 1; color: var(--tp-ink); font-weight: 800; line-height: 1.3; }
.local-pickups-regular__when,
.local-pickups-regular__where { grid-column: 1; color: var(--tp-ink-soft); font-size: var(--wp--preset--font-size--small); }
.local-pickups-regular__next {
	grid-column: 2;
	grid-row: 1 / span 2;
	color: var(--tp-berry);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	white-space: nowrap;
}

/* A question that opens to its answer. The browser's own; the plus and minus are the same marks
   as the folds on a piece's page. */
.tp-faqs h2 { margin: 2.75rem 0 0.6rem; }
.tp-faqs .tp-band__inner > h2:first-child { margin-top: 0; }
.tp-faq { margin: 0; border-bottom: 1px solid var(--tp-line); }
.tp-faq > summary {
	position: relative;
	margin: 0;
	padding: 1rem 2.4rem 1rem 0;
	color: var(--tp-ink);
	font-weight: 800;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}
.tp-faq > summary::-webkit-details-marker { display: none; }
.tp-faq > summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 0.25rem;
	transform: translateY(-50%);
	color: var(--tp-deep);
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1;
}
.tp-faq[open] > summary { color: var(--tp-deep); }
.tp-faq[open] > summary::after { content: "\2212"; }
.tp-faq > summary:hover { color: var(--tp-deep); }
.tp-faq > :not(summary) { margin: 0 0 1rem; }
.tp-faq > :last-child { margin-bottom: 1.4rem; }

@media (max-width: 999.98px) {
	.tp-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 689.98px) {
	.tp-stockists { grid-template-columns: minmax(0, 1fr); }
	.local-pickups-regular { grid-template-columns: minmax(0, 1fr); }
	.local-pickups-regular__next { grid-column: 1; grid-row: auto; margin-top: 0.2rem; white-space: normal; }
}
@media (max-width: 519.98px) {
	.tp-reasons { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 14d. Opal, and photos in a row (26 Oct 2026) ---------------------
   Her family mines opal at White Cliffs. The opal band's ground is the opal
   itself: the milky white of the chips in her photos, with the play of colour
   (aqua, violet, pink, gold, green) drifting slowly across it the way it moves
   when a stone is turned. It is neither white nor blush, so it sits between
   either; its words are ink on a ground paler than her blush. */
.tp-band--opal {
	background:
		radial-gradient(30% 48% at 12% 22%, rgba(178, 231, 234, 0.8), rgba(178, 231, 234, 0) 70%),
		radial-gradient(26% 44% at 88% 18%, rgba(249, 211, 227, 0.85), rgba(249, 211, 227, 0) 70%),
		radial-gradient(30% 50% at 78% 88%, rgba(214, 200, 246, 0.8), rgba(214, 200, 246, 0) 70%),
		radial-gradient(24% 40% at 30% 92%, rgba(250, 233, 188, 0.75), rgba(250, 233, 188, 0) 70%),
		radial-gradient(20% 34% at 52% 48%, rgba(204, 238, 214, 0.6), rgba(204, 238, 214, 0) 70%),
		#fbf8f4;
	background-size: 150% 150%;
	animation: tp-opal-play 26s ease-in-out infinite alternate;
}
@keyframes tp-opal-play {
	from { background-position: 0% 10%; }
	to { background-position: 100% 90%; }
}
/* Her studs on a rough opal, with one of them close up lapping its corner, the way the opening's are. */
.tp-opal__media {
	position: relative;
	margin: 0;
	padding: 0 1.25rem 1.5rem 0;
}
.tp-opal__media > * { margin-block: 0; }
.tp-opal__photo img { aspect-ratio: 1; }
.tp-opal__dome {
	position: absolute;
	z-index: 2;
	right: -1%;
	bottom: -4%;
	width: clamp(5.25rem, 11vw, 8.5rem);
	animation: tp-bob 8s ease-in-out infinite;
}

/* A photo taller than it is wide, beside words (White Cliffs). */
.tp-split__photo--tall img { aspect-ratio: 4 / 5; }

/* Photos in a row, each with a few words under it: three across, or four. */
.tp-photos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2.6vw, 1.9rem);
	margin-top: 2.25rem;
}
.tp-photos--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tp-photos > * { margin: 0; }
.tp-photos img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--tp-r-lg);
	box-shadow: var(--tp-shadow-raised);
}
.tp-photos figcaption {
	margin: 0.75rem 0 0;
	color: var(--tp-ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	line-height: 1.35;
	text-align: center;
}
/* Pinned up, like her own photos of people (.tp-polaroid): a white border, a strip of tape, each at its own tilt. */
.tp-photos--pinned { gap: clamp(1.25rem, 3vw, 2.25rem); padding-top: 0.75rem; }
.tp-photos--pinned > figure {
	position: relative;
	padding: 0.65rem 0.65rem 0.2rem;
	background: var(--tp-paper);
	border-radius: var(--tp-r-sm);
	box-shadow: var(--tp-shadow-raised);
	transform: rotate(-2deg);
	transition: transform 420ms var(--tp-settle);
}
.tp-photos--pinned > figure:nth-child(2n) { transform: rotate(1.6deg); }
.tp-photos--pinned > figure:nth-child(3n) { transform: rotate(-0.8deg); }
.tp-photos--pinned > figure::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: -0.75rem;
	left: 50%;
	width: 5.5rem;
	height: 1.5rem;
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0 7px, rgba(255, 255, 255, 0) 7px 14px),
		rgba(237, 133, 181, 0.7);
	box-shadow: 0 1px 2px rgba(45, 31, 38, 0.12);
	transform: translateX(-50%) rotate(3deg);
}
.tp-photos--pinned img { border-radius: 2px; box-shadow: none; }
.tp-photos--pinned figcaption { margin: 0; padding: 0.6rem 0.25rem 0.7rem; }
@media (hover: hover) {
	.tp-photos--pinned > figure:hover { transform: rotate(0deg) scale(1.02); }
}
/* Each size, worn: square, three across. Her own photos carry the size on a ribbon. */
.tp-photos--sizes img { aspect-ratio: 1; }

@media (max-width: 999.98px) {
	.tp-photos--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 689.98px) {
	/* Three photos on a phone: the first across the width, two under it. */
	.tp-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tp-photos:not(.tp-photos--four, .tp-photos--sizes) > :first-child { grid-column: 1 / -1; }
	.tp-photos:not(.tp-photos--four, .tp-photos--sizes) > :first-child img { aspect-ratio: 4 / 3; }
	/* Nine sizes in twos: the last one sits in the middle of its row. */
	.tp-photos--sizes > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.5rem); }
	.tp-opal__media { padding: 0 0.75rem 1.25rem 0; }
}

/* ---------- 14c. Before the shop opens ---------------------------------------
   While opening-soon mode applies (tp-shop/inc/soon.php) a visitor's page has no
   menu, no bag and no links in its footer. What is left empty is put away, so
   nothing looks broken: her logo alone in the header, her mark and her two social
   pages in the footer. */
.tp-soon #header [data-row*="top"],
.tp-soon #header [data-id="menu"],
.tp-soon #header [data-id="trigger"],
.tp-soon #header [data-id="text"],
.tp-soon #offcanvas,
.tp-soon [data-footer*="type-1"] .ct-footer [data-column="menu"] { display: none; }
/* Her logo alone, in the middle. */
.tp-soon #header [data-row*="middle"] > .ct-container { display: flex; justify-content: center; }
.tp-soon #header [data-row*="middle"] [data-column="end"] { display: none; }
.tp-soon [data-footer*="type-1"] .ct-footer [data-row="middle"] > .ct-container { grid-template-columns: minmax(0, 1fr) auto; }

/* The opening page: the sign-up beside a photo, then where she'll be until then. */
.tp-opening .tp-form { margin-top: 1.25rem; }
.tp-opening .tp-split__text p { max-width: 30rem; }
.tp-opening-markets .local-pickups { margin: 1.25rem auto 0; text-align: left; }
/* Someone who scanned the code on her table is on a phone, and came to sign up: the sign-up first, then the photo. */
@media (max-width: 781px) {
	.tp-opening .tp-split > .tp-split__text { order: -1; }
}

/* ---------- 15. Forms -------------------------------------------------------
   Fields a thumb can hit, borders that can be seen, and the same button as
   everywhere else. */
/* A tick, and the dot in a round choice: her deep pink. The theme's own is a blue (#2872fa). */
html body {
	--theme-form-selection-field-active-color: var(--tp-deep);
	--theme-form-selection-field-initial-color: var(--wp--custom--ui--field-border);
}
body :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], select, textarea) {
	--theme-form-field-border-initial-color: var(--wp--custom--ui--field-border);
	--theme-form-field-border-focus-color: var(--tp-deep);
	--theme-form-field-border-radius: var(--tp-r-md);
	--theme-form-field-height: 48px;
	--theme-form-text-initial-color: var(--tp-ink);
	--theme-form-text-focus-color: var(--tp-ink);
	background-color: var(--tp-paper);
}

/* The shop's three forms (Fluent Forms): the same fields as the checkout's, a label above each,
   a message in words under one that was missed, and the answer in a soft card. */
.fluentform .ff-el-group { margin-bottom: 1.1rem; }
.fluentform .ff-el-input--label { margin-bottom: 0.35rem; }
.fluentform .ff-el-input--label label {
	color: var(--tp-ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
}
.fluentform .ff-el-form-control {
	width: 100%;
	min-height: 50px;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--custom--ui--field-border);
	border-radius: var(--tp-r-md);
	background: var(--tp-paper);
	color: var(--tp-ink);
	font: inherit;
}
.fluentform textarea.ff-el-form-control { min-height: 8.5rem; }
.fluentform .ff-el-form-control:focus {
	border-color: var(--tp-deep);
	box-shadow: 0 0 0 3px rgba(178, 42, 110, 0.18);
	outline: none;
}
.fluentform .ff-el-help-message { margin-top: 0.3rem; color: var(--tp-ink-soft); font-size: var(--wp--preset--font-size--small); }
.fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--wp--custom--signal--bad); }
.fluentform .error.text-danger,
.fluentform .ff-el-is-error .text-danger {
	margin-top: 0.3rem;
	color: var(--wp--custom--signal--bad);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}
.fluentform .ff-el-form-check label { display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 600; line-height: 1.45; }
.fluentform .ff-el-form-check input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--tp-deep); }
.fluentform .ff_submit_btn_wrapper { margin: 0.4rem 0 0; }
/* The plugin leaves room under a form for what might follow. What follows here is ours, with its own space. */
.tp-form .fluentform, .tp-form .frm-fluent-form, .tp-form .frm-fluent-form fieldset { margin-bottom: 0; }
.tp-form .ff-message-success,
.fluentform_wrapper .ff-message-success {
	margin: 0;
	padding: 1rem 1.2rem;
	border: 1px solid var(--tp-petal);
	border-radius: var(--tp-r-md);
	background: var(--tp-paper);
	box-shadow: var(--tp-shadow-card);
	color: var(--tp-ink);
}
.tp-form .ff-message-success p:last-child { margin-bottom: 0; }
.tp-band .tp-form { margin-top: 1.75rem; max-width: 34rem; }
.tp-band--centre .tp-form, .tp-join-page .tp-form { margin-inline: auto; }
.tp-join-page .tp-form { margin-top: 0; }
.tp-join-page .tp-note { max-width: 34rem; margin: 1.1rem auto 0; }

/* ---------- 16. Things settle into place as they come into view -------------
   assets/js/tp.js marks what is below the first screen when the page loads,
   and lets each thing rise into place the first time it is scrolled to.
   🔴 Nothing is hidden unless that script is running: the class that hides is
   only ever added BY the script, to things it is about to watch. With no
   script, an old browser, a print-out or a visitor who asks for less motion,
   every band is simply there. */
.tp-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 700ms ease, transform 800ms var(--tp-settle);
	transition-delay: var(--tp-delay, 0ms);
}
.tp-reveal.is-in {
	opacity: 1;
	transform: none;
}
@media print {
	.tp-reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- 17. The phone -------------------------------------------------
   Targets of 46px and up, nothing closer than 16px to the screen edge. */
@media (max-width: 781px) {
	.tp-hero__grid,
	.tp-split,
	.tp-split--flip { grid-template-columns: minmax(0, 1fr); }
	.tp-hero__media { padding: 0.5rem 0.75rem 1rem 0.5rem; }
	.tp-hero__dome--a { left: -1%; bottom: -1%; }
	.tp-hero__dome--b { right: 1%; top: -7%; }
	/* Words first, then the picture, whichever way round the band is on a wide screen. */
	.tp-split--flip > .tp-split__text { order: -1; }
	.local-pickups { max-width: none; }
}
@media (max-width: 689px) {
	body {
		--theme-button-min-height: 48px;
	}
	.tp-band {
		padding-inline: 1.125rem;
	}
	.woocommerce div.product form.cart .single_add_to_cart_button {
		width: 100%;
	}
	/* Two cards a row: each card's button fills its card, so the buttons line up in two columns
	   whatever their words are ("Add to cart", "Select options"). */
	.woocommerce ul.products li.product .ct-woo-card-actions .button {
		width: 100%;
		padding-inline: 0.5rem;
	}
	.tp-kinds {
		--tp-kinds-gap: 1rem;
		gap: 1.75rem var(--tp-kinds-gap);
	}
	.tp-kinds__item { flex-basis: calc((100% - var(--tp-kinds-gap)) / 2); }
	.tp-kind { font-size: 1.0625rem; }
	.tp-chips { gap: 0.9rem 0.25rem; }
	.tp-chip { width: 4.9rem; }
	/* The opening's two buttons stack and fill the width, the main one first. */
	.tp-hero__text .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.tp-hero__text .wp-block-button,
	.tp-hero__text .wp-block-button__link { width: 100%; }
}

/* ---------- 18. Less motion -------------------------------------------------
   For a visitor whose device asks for it: nothing loops, nothing drifts, and
   everything is already in place. The ribbon becomes a still row of words. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.tp-paint,
	.tp-paint::before,
	.tp-paint::after,
	.tp-hero__photo,
	.tp-hero__photo::after,
	.tp-hero__dome,
	.tp-ribbon__track,
	.tp-band--opal,
	.tp-opal__dome {
		animation: none !important;
	}
	.tp-hero__photo::after { display: none; }
	.tp-ribbon__track { width: auto; justify-content: center; }
	.tp-ribbon__set { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; row-gap: 0.45rem; padding-inline: 1rem; }
	.tp-ribbon__set[aria-hidden="true"] { display: none; }
	/* Standing still, the phrases are a plain centred list: the stars between them only make sense in a moving line. */
	.tp-ribbon__set { column-gap: 2rem; }
	.tp-ribbon__set li { padding-right: 0; }
	.tp-ribbon__set li::after { display: none; }
	.tp-reveal { opacity: 1; transform: none; }
}

/* Local Pickups' markets calendar (0.6.0) lays itself out; its accent is her deep pink (9 Nov 2026). */
:root { --local-pickups-accent: var(--wp--preset--color--pink-deep, #B22A6E); }
.local-pickups-calendar__market { color: var(--wp--preset--color--ink, #2D1F26); }

/* Autoriah Collections (9 Nov 2026) lays itself out; its accent is her deep pink. */
:root { --autoriah-collections-accent: var(--wp--preset--color--pink-deep, #B22A6E); }

/* The row of her collections under the kinds (tp-shop 0.30.0): a touch smaller, a past one quieter. */
.tp-find ul.tp-find__kinds.tp-find__collections { margin-top: .65rem; font-size: .92em; }
.tp-find__collections .tp-find__kind.is-past:not(.is-on) { opacity: .75; }
.tp-find__past { font-weight: 400; opacity: .8; }