/*
Theme Name: This Tiny Life — Autumn
Theme URI: https://thistinylife.co.uk/
Author: This Tiny Life (built with Claude Code)
Author URI: https://thistinylife.co.uk/
Description: A stripped launch theme — the front page IS the "Settle into Autumn" landing (full-screen film that parts like a curtain, the letter in four parts, then the real WooCommerce product and checkout), rendered entirely from the theme. Activate it, set the films and copy in Customize → Autumn Landing. The honey landing stays available on the "Honey landing" page template.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.2
Version: 1.17.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: this-tiny-life
Tags: full-site-editing, block-patterns, editor-style, custom-colors, custom-logo, custom-menu, featured-images, wide-blocks, block-styles, style-variations, accessibility-ready, e-commerce, blog
*/

/*
 * This Tiny Life keeps its design in theme.json and its layout in block
 * templates/patterns. This stylesheet holds only the small amount of custom CSS
 * that theme.json cannot express: the homepage overlay-to-parchment header
 * transition, portrait media ratios, hover still-to-video crossfade and a few
 * editorial refinements. Everything here is documented and reversible.
 *
 * NOTE: On a normal front-end load WordPress serves style.css directly (there is
 * no minified variant in this theme). Motion behaviour lives in
 * assets/js/tiny-life-motion.js and its companion rules below.
 */

/* ---------------------------------------------------------------------------
   1. Reading + layout helpers
--------------------------------------------------------------------------- */

/* Fine editorial rule used instead of boxed cards. */
.tiny-rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	margin: 0;
}

/* Small uppercase Futura label used for categories, section eyebrows, prices. */
.tiny-eyebrow {
	font-family: var(--wp--preset--font-family--futura);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	font-size: 0.7rem;
	line-height: 1.4;
}

/* Section title accent — an elegant italic Caslon heading sitting under a
   small-caps label (the Wilding Ways / editorial treatment; not a script). */
.tiny-script {
	font-family: var(--wp--preset--font-family--caslon);
	font-style: italic;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   1b. Link treatments
--------------------------------------------------------------------------- */

/* Two distinct link treatments:
   - MENUS / sub-navs / footer (navigation) and TITLES: no animation. Menus get
     a plain underline that simply appears on hover/focus; titles never underline.
   - INLINE / content links (.tiny-inline-link, .tiny-link): the growing
     underline — it sits under the first few letters at rest and extends to the
     full word on hover/focus. Only content links, never menus or titles. */
.tiny-nav a,
.tiny-footer a,
.tiny-journal-nav a {
	text-decoration: none;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	transition: color 180ms ease;
}

.tiny-nav a:hover,
.tiny-nav a:focus-visible,
.tiny-footer a:hover,
.tiny-footer a:focus-visible,
.tiny-journal-nav a:hover,
.tiny-journal-nav a:focus-visible {
	text-decoration: underline;
}

/* Growing underline for inline/content links. */
.tiny-inline-link,
.tiny-link {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 1.4em 1px; /* underlines the first few letters at rest */
	padding-bottom: 2px;
	transition: background-size 380ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms ease;
}

.tiny-inline-link:hover,
.tiny-inline-link:focus-visible,
.tiny-link:hover,
.tiny-link:focus-visible {
	background-size: 100% 1px; /* extends across the whole word */
}

@media (prefers-reduced-motion: reduce) {
	.tiny-inline-link,
	.tiny-link {
		transition: none;
	}
}

/* Inside a menu / category nav, an inline link is really a nav item — it must
   NOT carry the growing underline on top of the menu's plain hover underline
   (that doubled up on the Shop/Journal category navs). Menu treatment only. */
.tiny-nav .tiny-inline-link,
.tiny-nav .tiny-link,
.tiny-journal-nav .tiny-inline-link,
.tiny-journal-nav .tiny-link {
	background-image: none;
	padding-bottom: 0;
}

.tiny-card__link,
.tiny-card__link a,
.tiny-card__link a:hover,
.tiny-card__link a:focus,
.tiny-card__link a:focus-visible,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
	text-decoration: none !important;
	background-image: none !important;
	padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
   2. Portrait / editorial media ratios
   The spec asks for consistent 4:5 cards, 16:9 film, 9:16 reels.
--------------------------------------------------------------------------- */

.tiny-ratio-4-5 img,
.tiny-ratio-4-5 video,
.tiny-ratio-4-5 .wp-block-cover__image-background {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	height: auto;
}

.tiny-ratio-16-9 img,
.tiny-ratio-16-9 video,
.tiny-ratio-16-9 iframe {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	height: auto;
}

.tiny-ratio-9-16 {
	max-width: 340px;
	margin-inline: auto;
}

.tiny-ratio-9-16 img,
.tiny-ratio-9-16 video {
	aspect-ratio: 9 / 16;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* Quiet film frame — a hairline, no heavy shadow. */
.tiny-film-frame img {
	border: 1px solid var(--wp--preset--color--rule);
}

/* 9:16 card media — Journal feed cards, sized for vertical reels. Fills the card
   (unlike the standalone .tiny-ratio-9-16 which is capped/centred). */
.tiny-ratio-9-16-card img,
.tiny-ratio-9-16-card video {
	aspect-ratio: 9 / 16;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* Keep the About profiles two-up on mobile (image with bio under each). */
@media (max-width: 781px) {
	.tiny-keep-2col.wp-block-columns {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: var(--wp--preset--spacing--30);
	}
	.tiny-keep-2col.wp-block-columns > .wp-block-column {
		flex: 1 1 50% !important;
	}
}

/* ---------------------------------------------------------------------------
   Split section (Experiences / feature): full-height image beside a panel.
--------------------------------------------------------------------------- */
.tiny-split {
	gap: 0 !important;
	align-items: stretch;
}

.tiny-split .tiny-split-media {
	padding: 0;
}

.tiny-split .tiny-split-media .wp-block-image,
.tiny-split .tiny-split-media figure {
	height: 100%;
	margin: 0;
}

.tiny-split .tiny-split-media img {
	width: 100%;
	height: 100%;
	min-height: 460px;
	object-fit: cover;
	display: block;
}

@media (max-width: 781px) {
	.tiny-split .tiny-split-media img {
		min-height: 320px;
	}
}

/* Small line illustration used in panels — keep it quiet. */
.tiny-illustration img {
	opacity: 0.9;
}

/* ---------------------------------------------------------------------------
   Store teaser triptych (Gillon): three full-width, equal-height panels edge
   to edge, the centre one a film with the wordmark overlaid.
--------------------------------------------------------------------------- */
.tiny-gillon {
	gap: 0 !important;
	margin: 0;
	align-items: stretch;
}

.tiny-gillon .wp-block-column {
	padding: 0;
	margin: 0;
}

.tiny-gillon .wp-block-image,
.tiny-gillon figure,
.tiny-gillon .wp-block-cover,
.tiny-gillon .tiny-gillon-film {
	margin: 0;
	height: 100%;
	width: 100%;
}

.tiny-gillon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* On phones the Gillon teaser becomes TWO panels side by side — the left still
   and the centre film (with the wordmark) — dropping the third image. */
@media (max-width: 781px) {
	.tiny-gillon {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
	}
	.tiny-gillon > .wp-block-column {
		flex: 1 1 50% !important;
	}
	.tiny-gillon > .wp-block-column:last-child {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
   Mobile swipe rows: on phones, card rows (From the Journal, Wander in) become
   a horizontal, snap-scrolling carousel that bleeds to the screen edges.
--------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.tiny-swipe.wp-block-columns {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: var(--wp--preset--spacing--30);
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--wp--preset--spacing--40));
		padding-inline: var(--wp--preset--spacing--40);
	}
	.tiny-swipe.wp-block-columns::-webkit-scrollbar {
		display: none;
	}
	.tiny-swipe.wp-block-columns > .wp-block-column {
		flex: 0 0 76% !important;
		scroll-snap-align: start;
	}
}

/* Featured film goes edge-to-edge on mobile. */
@media (max-width: 781px) {
	.tiny-film-mobile-full {
		margin-inline: calc(-1 * var(--wp--preset--spacing--50));
	}
	.tiny-film-mobile-full img {
		border-left: 0;
		border-right: 0;
	}
}

/* ---------------------------------------------------------------------------
   Recipe reel: eyebrow+title, then media, then body — driven by a grid so the
   mobile order is title → image → text → buttons, while desktop keeps text left
   and the 4:5 film on the right.
--------------------------------------------------------------------------- */
.tiny-recipe-reel {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "head" "media" "body";
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

.tiny-rr-head { grid-area: head; }
.tiny-rr-media { grid-area: media; }
.tiny-rr-body { grid-area: body; }

.tiny-rr-head :where(h1, h2, h3) {
	margin: 0;
}

.tiny-rr-body > :first-child {
	margin-top: 0;
}

@media (min-width: 782px) {
	/* Constrain the whole reel and centre it so the copy column can't stretch
	   wide — the 9:16 film then sits right beside the text, not adrift on the
	   far edge. */
	.tiny-recipe-reel {
		max-width: 840px;
		margin-inline: auto;
		grid-template-columns: 1fr 300px;
		grid-template-areas:
			"head  media"
			"body  media";
		grid-template-rows: auto auto;
		column-gap: var(--wp--preset--spacing--50);
		row-gap: var(--wp--preset--spacing--30);
		align-content: center;
		align-items: start;
	}
	/* Head and body hug each other (top-left); the film sits immediately to the
	   right in a fixed 300px column, vertically centred against the copy. */
	.tiny-rr-head { align-self: end; }
	.tiny-rr-body { align-self: start; }
	.tiny-rr-media {
		grid-row: 1 / 3;
		align-self: center;
		width: 300px;
	}
}

/* ---------------------------------------------------------------------------
   3. Editorial card (Journal / recipe / product)
   Whole card is one accessible link; title only, no blog clutter.
--------------------------------------------------------------------------- */

.tiny-card {
	position: relative;
}

.tiny-card:focus-within {
	outline: 2px solid var(--wp--preset--color--olive);
	outline-offset: 4px;
}

/* Stretch a single link across the whole card so the entire card is clickable. */
.tiny-card .tiny-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tiny-card img {
	transition: transform 600ms ease, opacity 400ms ease;
}

/* Archive/feed card titles — uppercase, letter-spaced Caslon (the editorial
   reel look), with a two-line extract underneath. */
.tiny-reel-title {
	font-family: var(--wp--preset--font-family--caslon);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.26em;
	line-height: 1.6;
}

.tiny-card__extract {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--wp--preset--color--olive);
}

@media (hover: hover) {
	.tiny-card:hover img,
	.tiny-card:focus-within img {
		transform: scale(1.02);
	}
}

/* ---------------------------------------------------------------------------
   4. Still-to-video hover crossfade
   A card may hold a still image and a muted, looping preview video stacked in a
   .tiny-hover-media wrapper. The video fades in on hover/focus on pointer
   devices only; touch and reduced-motion keep the still. JS handles play/pause.
--------------------------------------------------------------------------- */

.tiny-hover-media {
	position: relative;
	overflow: hidden;
}

.tiny-hover-media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 500ms ease;
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.tiny-hover-media.is-playing video {
		opacity: 1;
	}
}

/* ---------------------------------------------------------------------------
   5. Hero film
--------------------------------------------------------------------------- */

.tiny-hero {
	position: relative;
	min-height: 78vh;
}

@media (min-width: 782px) {
	.tiny-hero {
		min-height: 86vh;
	}
}

.tiny-hero__video,
.tiny-hero .wp-block-cover__image-background,
.tiny-hero video {
	object-fit: cover;
}

/* The cover uses flex to position its content bottom-left; without this the
   inner container sizes to its constrained contentSize (720px) as a max-content
   flex item and overflows narrow viewports. Force it to the available width. */
.tiny-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: 100%;
}

.tiny-hero__pause {
	position: absolute;
	right: var(--wp--preset--spacing--40);
	bottom: var(--wp--preset--spacing--40);
	z-index: 3;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
	color: var(--wp--preset--color--cream);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--cream) 55%, transparent);
	border-radius: 0;
	padding: 0.5rem 0.9rem;
	font-family: var(--wp--preset--font-family--futura);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	cursor: pointer;
}

.tiny-hero__pause:focus-visible {
	outline: 2px solid var(--wp--preset--color--cream);
	outline-offset: 2px;
}

/* On small screens the bottom-left strapline is tall, so let the pause control
   flow beneath the content instead of overlapping the last line. */
@media (max-width: 781px) {
	.tiny-hero__pause {
		position: static;
		display: inline-block;
		margin-top: var(--wp--preset--spacing--30);
	}
}

/* ---------------------------------------------------------------------------
   6. Homepage header: overlay hero, then transition to parchment
   The header on the homepage starts transparent over the cream hero text and
   becomes solid parchment once the user scrolls past the hero threshold. JS
   toggles .tiny-header--solid on the <body>. Internal pages are always solid.
--------------------------------------------------------------------------- */

.tiny-site-header {
	position: relative;
	z-index: 20;
}

/* Homepage: the hero must sit flush to the very top with the header overlaid.
   Remove the root/top spacing WordPress adds so there is no parchment strip
   above the full-bleed film. */
body.tiny-home .wp-site-blocks {
	padding-top: 0;
}

body.tiny-home .tiny-main {
	margin-top: 0;
	padding-top: 0;
}

body.tiny-home .tiny-main > .tiny-hero:first-child,
body.tiny-home .wp-block-template-part + .tiny-main {
	margin-top: 0;
}

/* Field Notes band sits flush to the footer: when the full-width newsletter is
   the last thing in <main>, drop main's bottom padding so the terracotta band
   meets the deep-olive footer with no parchment gap between them. */
.tiny-main:has(> .tiny-newsletter:last-child),
.tiny-main:has(> .wp-block-post-content > .tiny-newsletter:last-child) {
	/* !important beats the per-template inline padding-bottom on <main>. */
	padding-bottom: 0 !important;
}
/* ...and drop the root block-gap above the footer. The footer is its own
   full-width band, so the little parchment sliver the layout adds above it is
   never wanted — on flush-newsletter pages this closes the last line, and on
   ordinary pages <main>'s own bottom padding still gives breathing room. We
   target the footer's own template-part wrapper (not "main + part") because
   WooCommerce wraps the product template, so main isn't the footer's sibling. */
.wp-block-template-part:has(> .tiny-footer) {
	margin-block-start: 0 !important;
}

/* Full-width Field Notes on regular Pages (About, etc.): inside post-content the
   band only reaches the content edges, because post-content isn't the root
   padded container. Break it out to the full viewport so it goes edge-to-edge
   like it does on the homepage/recipe/product templates. Any hairline overflow
   is caught by the html/body overflow-x guard below. */
.wp-block-post-content > .tiny-newsletter {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

body.tiny-home .tiny-site-header {
	position: absolute;
	inset-inline: 0;
	top: 0;
	background: transparent;
	color: var(--wp--preset--color--cream);
	transition: background-color 400ms ease, color 400ms ease;
}

body.tiny-home .tiny-site-header a {
	color: var(--wp--preset--color--cream);
}

/* Sticky solid state after the hero threshold (homepage only). */
body.tiny-home.tiny-header-solid .tiny-site-header {
	position: fixed;
	background: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 1px 0 var(--wp--preset--color--rule);
}

body.tiny-home.tiny-header-solid .tiny-site-header a {
	color: var(--wp--preset--color--ink);
}

/* Non-home pages: always parchment, in normal flow. */
.tiny-site-header--solid {
	background: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* Header brand mark (the bundled/site logo via [ttl_logo]) — centred, compact. */
.tiny-site-header .ttl-logo-mark { line-height: 0; }
.tiny-site-header .ttl-logo-mark a { display: inline-block; }
.tiny-site-header .ttl-logo-mark img,
.tiny-site-header .ttl-logo-mark .custom-logo { display: block; height: auto; width: auto; max-height: 2.1rem; max-width: 220px; }

/* ---------------------------------------------------------------------------
   7. Central wordmark three-column header grid (desktop)
--------------------------------------------------------------------------- */

.tiny-header-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
}

/* Keep the three cells and their navs on one shared centre line so the left and
   right menu items never sit higher/lower than each other or the wordmark.
   The cells stretch to the full row height and centre their own content, and
   the nav lists carry no stray block margin. !important is needed to beat the
   per-block flex-layout rules WordPress generates for each nav/group. */
.tiny-header-grid > * {
	display: flex !important;
	align-items: center !important;
	align-self: stretch;
	margin: 0;
}

.tiny-header-grid .wp-block-navigation,
.tiny-header-grid .wp-block-navigation__container,
.tiny-header-grid nav,
.tiny-header-grid ul {
	align-items: center !important;
	margin: 0 !important;
	padding: 0;
}

.tiny-header-grid .tiny-nav a {
	line-height: 1;
	display: inline-flex;
	align-items: center;
}

.tiny-header-grid .tiny-header-left {
	justify-self: start;
	justify-content: flex-start;
}

.tiny-header-grid .tiny-header-center {
	justify-self: center;
	justify-content: center;
	text-align: center;
}

.tiny-header-grid .tiny-header-right {
	justify-self: end;
	justify-content: flex-end;
}

.tiny-wordmark {
	font-family: var(--wp--preset--font-family--caslon);
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

/* Logo wordmark (temporary SVG). Uses currentColor so it is cream over the hero
   and ink on internal pages, matching the header text colour. */
.tiny-logo {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.tiny-logo svg {
	display: block;
	height: 34px;
	width: auto;
}

@media (max-width: 600px) {
	.tiny-logo svg {
		height: 27px;
	}
}

/* Desktop split nav vs mobile hamburger. The three-column grid with left/right
   navigation is shown on wide screens; a single combined menu + basket is shown
   on small screens with the wordmark still centred.
   NOTE: !important is required to win against WordPress core's
   `.wp-block-group.is-layout-flex{display:flex}` (0,2,0 specificity), which the
   nav groups also carry — this is a legitimate responsive show/hide utility. */
/* Desktop shows the split nav (About·Journal·Shop·Experiences left, Newsletter
   right); below 980px it becomes: hamburger (left) · logo (centre) · cart (right). */
.tiny-desktop-nav {
	display: none !important;
}

.tiny-mobile-only {
	display: flex !important;
	align-items: center;
}

@media (min-width: 980px) {
	.tiny-desktop-nav {
		display: flex !important;
	}
	.tiny-mobile-only {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
   Mobile menu: a full-screen parchment panel that gently SLIDES IN from the
   left (like the cart drawer), with the list centred in the middle of it. We
   keep the panel in the DOM and animate transform so both open and close slide.
------------------------------------------------------------------------- */
.tiny-mobile-menu .wp-block-navigation__responsive-container {
	position: fixed !important;
	inset: 0 !important;
	width: 100%;
	height: 100%;
	background-color: var(--wp--preset--color--parchment) !important;
	color: var(--wp--preset--color--ink) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--50);
	z-index: 100;
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 440ms;
}

.tiny-mobile-menu .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--parchment) !important;
	transform: translateX(0);
	visibility: visible;
	transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tiny-mobile-menu .wp-block-navigation__responsive-container-content {
	width: 100%;
	max-width: 100%;
	text-align: center;
}

/* Plain block layout + text-align:center is the reliable way to centre the list
   horizontally in the viewport (flex align-items fought the WordPress defaults). */
.tiny-mobile-menu .wp-block-navigation__responsive-container .wp-block-navigation__container {
	display: block !important;
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 0;
}

.tiny-mobile-menu .wp-block-navigation__responsive-container .wp-block-navigation__container > li {
	display: block !important;
	width: 100%;
	text-align: center;
	margin: 0 0 var(--wp--preset--spacing--40) 0;
}

.tiny-mobile-menu .wp-block-navigation__responsive-container .wp-block-navigation__container > li:last-child {
	margin-bottom: 0;
}

.tiny-mobile-menu .wp-block-navigation__responsive-container a,
.tiny-mobile-menu .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
	display: inline-block !important;
	width: auto !important;
}

.tiny-mobile-menu .wp-block-navigation__responsive-container a {
	font-family: var(--wp--preset--font-family--caslon);
	font-size: 2rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink);
}

.tiny-mobile-menu .wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--ink);
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.tiny-mobile-menu .wp-block-navigation__responsive-container,
	.tiny-mobile-menu .wp-block-navigation__responsive-container.is-menu-open {
		transition: none;
	}
}

/* Nav links: Futura medium, sentence case (not uppercase), quiet spacing.
   (Hover colour shift is defined in §1b above.) */
.tiny-nav a {
	font-family: var(--wp--preset--font-family--futura);
	font-weight: 500;
	font-size: 0.9rem;
	text-transform: none;
	letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------------
   8. Footer (deep olive / cream)
--------------------------------------------------------------------------- */

.tiny-footer {
	background: var(--wp--preset--color--deep-olive);
	color: var(--wp--preset--color--cream);
}

.tiny-footer a {
	color: var(--wp--preset--color--cream);
	/* underline treatment comes from the unified link rule in §1b */
}

/* ---------------------------------------------------------------------------
   8b. Recipe (Gill-Meller-like) split
   Desktop: text left, tall 4:5 photo right (gently sticky).
   Mobile:  title/intro, THEN photo, THEN serves/ingredients/method (photo is
            pulled above the method text with order).
--------------------------------------------------------------------------- */

/* Gill-Meller-style recipe: title + intro beside a square photo up top, then
   the recipe copy (Ingredients over Method) beside a sticky film on the right. */
.tiny-recipe-square img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
}

.tiny-recipe-body {
	align-items: flex-start;
}

@media (min-width: 782px) {
	.tiny-recipe-film {
		position: sticky;
		top: 96px;
	}
}

/* Ingredients — simple round bullets, close-set, like Gill's. */
.tiny-ingredients {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

.tiny-ingredients li {
	position: relative;
	padding-left: 1.35rem;
	line-height: 1.6;
}

.tiny-ingredients li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--terracotta);
}

/* Method — Gill sets his steps as plain paragraphs with air between them. */
.tiny-method-step {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* ---------------------------------------------------------------------------
   9. WooCommerce editorial adjustments
   Remove default Woo blue / rounded app styling, keep it quiet and on-brand.
--------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--wp--preset--color--olive);
	background: color-mix(in srgb, var(--wp--preset--color--parchment) 92%, var(--wp--preset--color--olive));
	color: var(--wp--preset--color--ink);
}

/* Unified button: a clean white button that fills with the accent from the
   bottom on hover / focus. Text stays ink. Lowercase. Covers core + WooCommerce
   buttons. Over imagery, use .is-over-image (or .ttl-hero-cta) for a parchment
   base so it reads against the photo. */
.wp-block-button__link,
.tiny-rr-body .wp-block-read-more,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link),
.single-product .single_add_to_cart_button {
	position: relative;
	display: inline-block;
	border: 1px solid var(--wp--preset--color--ink) !important;
	background-color: #FFFFFF !important;
	color: var(--wp--preset--color--ink) !important;
	background-image: linear-gradient(var(--wp--preset--color--terracotta), var(--wp--preset--color--terracotta)) !important;
	background-repeat: no-repeat !important;
	background-position: 50% 100% !important;
	background-size: 100% 0% !important;
	border-radius: 0 !important;
	padding: 0.72rem 1.6rem !important;
	font-family: var(--wp--preset--font-family--futura);
	font-weight: 500;
	font-size: 0.8rem;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: lowercase;
	text-decoration: none !important;
	transition: background-size 400ms ease, color 400ms ease !important;
}
/* Buttons that sit over a photo take the site background so they stay legible. */
.is-over-image .wp-block-button__link,
.wp-block-cover .wp-block-button__link {
	background-color: var(--wp--preset--color--parchment) !important;
}

/* Keep a pair/row of buttons on one comfortable baseline: equal height and a
   sensible minimum width so short labels ("Back to home") don't read as chips. */
.wp-block-buttons .wp-block-button__link,
.tiny-rr-body .wp-block-buttons .wp-block-button__link,
.tiny-rr-body .wp-block-read-more {
	min-width: 11rem;
	text-align: center;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.tiny-rr-body .wp-block-read-more:hover,
.tiny-rr-body .wp-block-read-more:focus-visible,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus,
.single-product .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:focus-visible {
	background-size: 100% 100% !important;
	color: var(--wp--preset--color--cream) !important;
}

/* Search field (404, search page) — a quiet parchment field with a terracotta
   submit sized to match, so the control never looks oversized or empty. */
.wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
	background: color-mix(in srgb, var(--wp--preset--color--parchment) 60%, #fff);
}

.wp-block-search .wp-block-search__input {
	border: 0;
	background: transparent;
	border-radius: 0;
	padding: 0.72rem 1rem;
	font-family: var(--wp--preset--font-family--futura);
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink);
}

.wp-block-search .wp-block-search__input:focus {
	outline: none;
	box-shadow: none;
}

.wp-block-search__button.wp-block-search__button {
	margin: 0;
	border: 0 !important;
	border-left: 1px solid var(--wp--preset--color--terracotta) !important;
	background: transparent !important;
	color: var(--wp--preset--color--terracotta) !important;
	border-radius: 0 !important;
	padding: 0.72rem 1.5rem !important;
	font-family: var(--wp--preset--font-family--futura);
	font-weight: 500;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	transition: background-color 300ms ease, color 300ms ease;
}

.wp-block-search__button.wp-block-search__button:hover,
.wp-block-search__button.wp-block-search__button:focus-visible {
	background: var(--wp--preset--color--terracotta) !important;
	color: var(--wp--preset--color--cream) !important;
}

.woocommerce .price,
.wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--futura);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

/* Square, quiet product images. */
.woocommerce ul.products li.product img,
.wc-block-grid__product-image img {
	border-radius: 0;
}

/* Editorial two-column product grid.
   WordPress gives the product-template an `is-layout-flow` (stacking) class that
   overrides WooCommerce's own grid, so we set the grid ourselves. This keeps the
   shop reliably two-up on desktop and one-up on small screens regardless of how
   the product-collection block resolves its internal layout. */
.tiny-shop-grid .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tiny-shop-grid .wc-block-product-template > li,
.tiny-shop-grid .wc-block-product-template .wp-block-post {
	list-style: none;
	margin: 0;
}

@media (max-width: 600px) {
	.tiny-shop-grid .wc-block-product-template {
		grid-template-columns: 1fr;
	}
}

/* Classic [products] / [related_products] grid — the reliable WooCommerce
   product loop. Two columns desktop, one on small screens, with quiet 4:5
   editorial cards. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce's classic clearfix pseudo-elements would otherwise become grid
   items and leave an empty first cell — remove them in grid mode. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
	display: none;
}

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

@media (max-width: 560px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: 1fr;
	}
}

/* Related products stay two-up (only two exist). */
.woocommerce .related.products ul.products,
.tiny-shop-grid .related.products ul.products {
	grid-template-columns: repeat(2, 1fr);
}

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	text-align: left;
	list-style: none;
}

.woocommerce ul.products li.product::before {
	content: none; /* kill any stray list marker */
}

.woocommerce ul.products li.product img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	height: auto;
	margin-bottom: var(--wp--preset--spacing--30);
	border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--caslon);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	padding: 0;
	margin: 0 0 0.25rem;
}

.woocommerce ul.products li.product .price {
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
}

/* Functional stock badge only (e.g. Sold out). */
.woocommerce ul.products li.product .onsale {
	display: none; /* no aggressive sale flashes; keep it quiet */
}

/* ---------------------------------------------------------------------------
   Mini-cart: a quiet basket icon in the header that opens WooCommerce's
   slide-out drawer. The icon inherits the header text colour (cream over the
   hero, ink on internal pages); the count badge is terracotta.
--------------------------------------------------------------------------- */
.tiny-mini-cart,
.tiny-mini-cart .wc-block-mini-cart__button {
	margin: 0;
	padding: 0;
	background: transparent !important;
	border: 0 !important;
	color: inherit !important;
	cursor: pointer;
}

.tiny-mini-cart .wc-block-mini-cart__button:hover {
	opacity: 0.7;
}

.tiny-mini-cart svg {
	fill: currentColor;
	width: 24px;
	height: 24px;
}

/* We only want the icon in the header, not the running total beside it. */
.tiny-mini-cart .wc-block-mini-cart__amount,
.tiny-mini-cart .wc-block-mini-cart__quantity-badge + .wc-block-mini-cart__amount {
	display: none;
}

.tiny-mini-cart .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--cream);
}

/* The slide-out drawer, themed to match. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__content,
.wc-block-mini-cart__drawer .components-modal__content {
	background: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--ink);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
	font-family: var(--wp--preset--font-family--caslon);
	font-weight: 400;
}

/* Block product grid (used by any remaining product-collection blocks). */
.tiny-shop-grid .wc-block-components-product-image img,
.tiny-shop-grid .wp-block-woocommerce-product-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.tiny-shop-grid .wp-block-post-title,
.tiny-shop-grid .wp-block-woocommerce-product-price {
	text-align: left;
}

/* Quiet product title links in the grid. */
.tiny-shop-grid .wp-block-post-title a {
	font-family: var(--wp--preset--font-family--caslon);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.tiny-shop-grid .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Single-product gallery: keep it simple and squared, no rounded app corners. */
.tiny-product-gallery img {
	border-radius: 0;
}

/* Optional video slide (second in the gallery). It takes the SAME ratio as the
   product's still photos: the ratio is measured from the first gallery image and
   passed in as --tiny-gallery-ratio (functions.php), so the slider height never
   jumps between the stills and the film. Falls back to the still if unknown. */
.tiny-gallery-video {
	position: relative;
	background: var(--wp--preset--color--ink);
}

.tiny-gallery-video__el {
	display: block;
	width: 100%;
	aspect-ratio: var(--tiny-gallery-ratio, 4 / 5);
	object-fit: cover;
	border-radius: 0;
}

/* ---------------------------------------------------------------------------
   Product gallery carousel — TOAST-style: sliding image with chevron arrows
   and dot paging (WooCommerce flexslider; options set in functions.php).
--------------------------------------------------------------------------- */
.woocommerce-product-gallery {
	position: relative;
}

.woocommerce-product-gallery .flex-viewport {
	overflow: hidden;
}

/* Hide the default thumbnail strip — we use dots instead. */
.woocommerce-product-gallery .flex-control-thumbs {
	display: none !important;
}

/* Chevron prev / next */
.woocommerce-product-gallery .flex-direction-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-product-gallery .flex-direction-nav a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--wp--preset--color--parchment) 90%, transparent);
	border: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--ink);
	font-size: 0;
	opacity: 0.85;
	transition: opacity 300ms ease, background-color 300ms ease;
}

.woocommerce-product-gallery:hover .flex-direction-nav a,
.woocommerce-product-gallery .flex-direction-nav a:focus-visible {
	opacity: 1;
}

.woocommerce-product-gallery .flex-direction-nav a::before {
	font-family: inherit;
	font-size: 1.7rem;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	content: "\2039"; /* ‹ */
}

.woocommerce-product-gallery .flex-direction-nav a.flex-next::before {
	content: "\203A"; /* › */
}

.woocommerce-product-gallery .flex-direction-nav a:hover {
	background: var(--wp--preset--color--terracotta);
}

.woocommerce-product-gallery .flex-direction-nav a:hover::before {
	color: var(--wp--preset--color--cream);
}

.woocommerce-product-gallery .flex-direction-nav .flex-prev {
	left: 12px;
}

.woocommerce-product-gallery .flex-direction-nav .flex-next {
	right: 12px;
	left: auto;
}

/* Dot paging */
.woocommerce-product-gallery .flex-control-paging {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 1.1rem 0 0;
	padding: 0;
}

.woocommerce-product-gallery .flex-control-paging li {
	margin: 0;
}

.woocommerce-product-gallery .flex-control-paging li a {
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--rule);
	border: 0;
	box-shadow: none;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	transition: background-color 250ms ease, transform 250ms ease;
}

.woocommerce-product-gallery .flex-control-paging li a.flex-active {
	background: var(--wp--preset--color--terracotta);
	transform: scale(1.15);
}

/* Field Notes signup — one clean joined control on the terracotta band: a
   bordered wrapper, a borderless email field, and a Subscribe button set flush
   inside it and divided by a hairline (so no doubled/misaligned edges). */
.tiny-newsletter .tiny-newsletter-form {
	display: flex;
	align-items: stretch;
	max-width: 460px;
	margin-inline: auto;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--cream) 55%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--cream) 10%, transparent);
}

.tiny-newsletter input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	border-radius: 0;
	padding: 0.9rem 1.1rem;
	font-family: var(--wp--preset--font-family--futura);
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--cream);
}

.tiny-newsletter input[type="email"]:focus {
	outline: none;
}

.tiny-newsletter input[type="email"]::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--cream) 70%, transparent);
}

.tiny-newsletter .tiny-newsletter-form .wp-block-button__link,
.tiny-newsletter .tiny-newsletter-form .wp-element-button {
	display: inline-flex;
	align-items: center;
	margin: 0 !important;
	min-width: 0 !important;
	border: 0 !important;
	border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--cream) 55%, transparent) !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--wp--preset--color--cream) !important;
	padding: 0.9rem 1.6rem !important;
	white-space: nowrap;
	transition: background-color 300ms ease, color 300ms ease !important;
}

.tiny-newsletter .tiny-newsletter-form .wp-block-button__link:hover,
.tiny-newsletter .tiny-newsletter-form .wp-element-button:hover,
.tiny-newsletter .tiny-newsletter-form .wp-block-button__link:focus-visible,
.tiny-newsletter .tiny-newsletter-form .wp-element-button:focus-visible {
	background-color: var(--wp--preset--color--cream) !important;
	color: var(--wp--preset--color--terracotta) !important;
}

/* Stack on small screens: each control gets its own outline. */
@media (max-width: 560px) {
	.tiny-newsletter .tiny-newsletter-form {
		flex-direction: column;
		border: 0;
		background: transparent;
		gap: 0.6rem;
		max-width: 340px;
	}
	.tiny-newsletter input[type="email"] {
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--cream) 55%, transparent);
		background: color-mix(in srgb, var(--wp--preset--color--cream) 10%, transparent);
	}
	.tiny-newsletter .tiny-newsletter-form .wp-block-button__link,
	.tiny-newsletter .tiny-newsletter-form .wp-element-button {
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--cream) 55%, transparent) !important;
		justify-content: center;
	}
}

/* Product detail accordions (native details/summary) — quiet, editorial.
   Borders come from CSS (not inline) so the copy-paste snippet for each
   product's Description needs no styling — just <details class="tiny-accordion">. */
.tiny-accordion {
	padding: 0.9rem 0;
	border-top: 1px solid var(--wp--preset--color--rule);
}

/* First accordion in the product Description hugs the summary above it, and the
   last carries a closing rule. */
.tiny-product-accordions {
	margin-top: var(--wp--preset--spacing--30);
}

.tiny-product-accordions > .tiny-accordion:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.tiny-accordion summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding-right: 1.5rem;
	font-family: var(--wp--preset--font-family--futura);
	font-weight: 500;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--ink);
}

.tiny-accordion summary::-webkit-details-marker {
	display: none;
}

.tiny-accordion summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: -0.15em;
	font-size: 1.1rem;
	font-weight: 400;
	color: var(--wp--preset--color--olive);
	transition: transform 250ms ease;
}

.tiny-accordion[open] summary::after {
	content: "\2013"; /* en dash */
}

.tiny-accordion > *:not(summary) {
	margin-top: 0.9rem;
}

/* The classic [related_products] shortcode prints its own "Related products"
   heading; we supply a script heading above it, so hide the shortcode's. */
.woocommerce .related.products > h2,
.woocommerce-page .related.products > h2 {
	display: none;
}

/* Sold-out / stock badge, functional only. */
.tiny-badge {
	display: inline-block;
	font-family: var(--wp--preset--font-family--futura);
	font-weight: 500;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 0.25rem 0.6rem;
	background: var(--wp--preset--color--pale-clay);
	color: var(--wp--preset--color--deep-olive);
}

/* ---------------------------------------------------------------------------
   10. Accessibility: visible focus everywhere, skip link
--------------------------------------------------------------------------- */

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	padding: 0.75rem 1rem;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* ---------------------------------------------------------------------------
   11. Reduced motion: stop every transition/animation
--------------------------------------------------------------------------- */

@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;
	}

	.tiny-hover-media video {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
   12. No horizontal overflow safeguard
--------------------------------------------------------------------------- */

html,
body {
	/* `clip` (not `hidden`) prevents horizontal scroll without turning html/body
	   into a scroll container — which would break `position: sticky` (used by the
	   honey landing's left media and the recipe film). */
	overflow-x: clip;
	max-width: 100%;
}

img,
video,
iframe {
	max-width: 100%;
}

/* ===========================================================================
   Hand-drawn warmth (HOLM-inspired)
   A rustic, hand-made feel: sketched hamburger / drawer-close icons, masked in
   currentColor so they adapt to the header they sit on.
=========================================================================== */

/* --- Hand-drawn mobile icons (hamburger + drawer close) ---------------------
   The default straight-line icons are hidden and replaced with rough,
   slightly-wavy strokes. Masked in currentColor so they read cream over the
   hero and ink on solid headers/the drawer. */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	display: none;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 27px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath d='M2 3 Q9 1.4 14 3 T25 3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M2 10 Q10 8.4 15 10 T25 10' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M2 17 Q8 15.4 13 17 T25 17' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 20'%3E%3Cpath d='M2 3 Q9 1.4 14 3 T25 3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M2 10 Q10 8.4 15 10 T25 10' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M2 17 Q8 15.4 13 17 T25 17' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.wp-block-navigation__responsive-container-close::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M3 3 Q10 12 19 19' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M19 3 Q11 10 3 19' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M3 3 Q10 12 19 19' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M19 3 Q11 10 3 19' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Buttons and the search field keep their clean, straight edges. */

/* ===========================================================================
   Honey landing — .ttl-honey-landing
   Desktop: a fixed one-screen 50/50 split. The CTA button flips the RIGHT half
   over (3D page-turn) to reveal the product on its back; the left media stays.
   Mobile: everything stacks; the button opens a slide-up bottom sheet.
   All scoped to .ttl-honey-landing. No JS — a hidden checkbox drives it.
=========================================================================== */
.ttl-honey-landing {
	--ttl-bg: #F4F1EB;
	--ttl-ink: #11100E;
	--ttl-terra: #DD7553;
	--ttl-terra-dark: #C55E3E;
	--ttl-line: rgba(17, 16, 14, 0.16);
	--ttl-cream: #FFFFFF;
	--ttl-copy-bg: #DDD9D0;
	margin: 0 !important;
	padding: 0;
	background: var(--ttl-bg);
	color: var(--ttl-ink);
	height: 100vh;
	overflow: hidden;
}

/* Pull the landing flush to the very top — no parchment strip above the hero
   (covers both the front page and the /honey/ page, on either theme). */
.wp-site-blocks:has(.ttl-honey-landing) { padding-top: 0 !important; margin-top: 0 !important; }
/* wpautop (run by the shortcode block) can drop an empty <p> between our inline
   controls and the hero — a full-width strip on mobile. Kill any stray para. */
.ttl-honey-landing .ttl-split > p { display: none !important; }

.ttl-honey-landing .ttl-split { display: flex; margin: 0; gap: 0; height: 100vh; align-items: stretch; }
.ttl-honey-landing .ttl-media-col,
.ttl-honey-landing .ttl-panel-col { flex: 1 1 50%; min-width: 0; margin: 0; }

/* Left media — fills the left half. */
.ttl-honey-landing .ttl-media-col { position: relative; height: 100vh; overflow: hidden; background: var(--ttl-ink); }
.ttl-honey-landing .ttl-media-col figure,
.ttl-honey-landing .ttl-media { margin: 0; height: 100%; }
.ttl-honey-landing .ttl-media-hero img,
.ttl-honey-landing .ttl-media-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Hero media: show the desktop (4:5) variant by default, the mobile (9:16) one
   on small screens. Both are rendered; only the right one is shown. */
.ttl-honey-landing .ttl-media-hero .ttl-media-m { display: none; }

/* Right panel holds the flip. */
.ttl-honey-landing .ttl-panel-col { position: relative; height: 100vh; overflow: hidden; padding: 0; background: var(--ttl-bg); }

/* The flip card. */
.ttl-honey-landing .ttl-flip { position: relative; width: 100%; height: 100vh; perspective: 2000px; }
.ttl-honey-landing .ttl-flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ttl-honey-landing .ttl-drawer-toggle:checked ~ .ttl-panel-col .ttl-flip .ttl-flip-inner { transform: rotateY(180deg); }

/* Left column crossfades from the bee hero to the honey gallery as it turns. */
.ttl-honey-landing .ttl-media-hero,
.ttl-honey-landing .ttl-media-gallery { position: absolute; inset: 0; transition: opacity 0.7s ease; }
.ttl-honey-landing .ttl-media-gallery { opacity: 0; overflow-y: auto; z-index: 1; }
.ttl-honey-landing .ttl-media-gallery .ttl-gal-item { margin: 0; height: 100vh; }
.ttl-honey-landing .ttl-media-gallery .ttl-gal-item img,
.ttl-honey-landing .ttl-media-gallery .ttl-gal-item video { position: static; width: 100%; height: 100%; object-fit: cover; display: block; }
.ttl-honey-landing .ttl-drawer-toggle:checked ~ .ttl-media-col .ttl-media-hero { opacity: 0; }
.ttl-honey-landing .ttl-drawer-toggle:checked ~ .ttl-media-col .ttl-media-gallery { opacity: 1; }

/* Basket link — top-right, so buyers who already hold jars can reach checkout. */
.ttl-honey-landing .ttl-cart-link {
	position: fixed; top: 1rem; right: 1rem; z-index: 900;
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.9rem; height: 2.9rem; border-radius: 50%;
	background: color-mix(in srgb, var(--ttl-cream) 92%, transparent);
	color: var(--ttl-ink); box-shadow: 0 2px 10px rgba(38, 51, 46, 0.18);
	transition: background 0.2s ease, color 0.2s ease, opacity 0.3s ease;
}
.ttl-honey-landing .ttl-cart-link:hover { background: var(--ttl-terra); color: var(--ttl-ink); }
.ttl-honey-landing .ttl-cart-count {
	position: absolute; top: -0.3rem; right: -0.3rem;
	min-width: 1.15rem; height: 1.15rem; padding: 0 0.28rem; box-sizing: border-box;
	border-radius: 999px; background: var(--ttl-ink); color: #fff;
	font-family: var(--wp--preset--font-family--futura); font-size: 0.7rem;
	line-height: 1.15rem; text-align: center; font-weight: 600;
}
/* Hide the basket link while the product/sheet is open (the close × takes over). */
.ttl-honey-landing .ttl-drawer-toggle:checked ~ .ttl-cart-link { opacity: 0; visibility: hidden; }

.ttl-honey-landing .ttl-flip-front,
.ttl-honey-landing .ttl-flip-back {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background: var(--ttl-bg);
}
.ttl-honey-landing .ttl-flip-front {
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow-y: auto;
	padding: clamp(1.5rem, 4vh, 3.5rem) clamp(1.5rem, 4vw, 4.5rem);
}
/* The homepage note is long — start it from the top so nothing clips. */
.ttl-honey-landing .ttl-flip-front { justify-content: flex-start; }
.ttl-honey-landing .ttl-flip-front .ttl-intro { margin-block: auto; }
.ttl-honey-landing .ttl-flip-back {
	transform: rotateY(180deg);
	overflow-y: auto;
	padding: clamp(2rem, 5vh, 3.5rem) clamp(1.6rem, 4vw, 3.5rem);
}

/* --- Front: the welcome + CTA -------------------------------------------- */
.ttl-honey-landing .ttl-intro { margin-inline: auto; max-width: 30rem; }
.ttl-honey-landing .ttl-intro p { font-family: var(--wp--preset--font-family--futura); font-size: clamp(0.9rem, 1.05vh, 1.02rem); line-height: 1.6; margin: 0 0 0.8rem; color: var(--ttl-ink); text-align: center; }
.ttl-honey-landing .ttl-intro p.ttl-wordmark { font-family: var(--wp--preset--font-family--caslon); font-size: clamp(1.7rem, 2.4vw, 2.4rem); line-height: 1; color: var(--ttl-terra); margin: 0 0 0.4rem; }
.ttl-honey-landing .ttl-wordmark em { font-style: italic; }
/* Bundled brand logo (gold wordmark), or the WP Site Logo if one is set. */
.ttl-honey-landing .ttl-logo-svg { display: block; width: auto; height: auto; max-width: min(240px, 72%); }
.ttl-honey-landing .ttl-intro p.ttl-tagline { font-family: var(--wp--preset--font-family--caslon); font-style: italic; font-size: 1.2rem; color: var(--ttl-ink); margin: 0.3rem 0 1.4rem; }

/* Homepage copy is centred. */
.ttl-honey-landing .ttl-flip-front .ttl-intro { text-align: center; margin-inline: auto; max-width: 34rem; }
.ttl-honey-landing .ttl-flip-front .ttl-intro p { text-align: center; }
.ttl-honey-landing .ttl-flip-front .ttl-logo-lockup { text-align: center; }
.ttl-honey-landing .ttl-flip-front .ttl-logo-lockup img { margin-left: auto; margin-right: auto; }
.ttl-honey-landing .ttl-signoff { font-family: var(--wp--preset--font-family--caslon); font-style: italic; font-size: 1.15rem; margin-top: 1.2rem; }

.ttl-honey-landing .ttl-cta-wrap { text-align: center; margin-top: 1.8rem; }

/* Quantity box border matches the add-to-basket button (was a lighter hairline). */
.ttl-honey-landing .ttl-cart .quantity.ttl-qty { border-color: var(--ttl-ink); }

/* --- Desktop right panel: fit on one screen; keep the CTA always visible ----
   The welcome note is editable and can run long, so rather than rely on it
   fitting, the button is pinned to the bottom of the panel while the copy
   scrolls behind it — visible at any screen size. Copy + logo trimmed a touch. */
@media (min-width: 782px) {
	.ttl-honey-landing .ttl-flip-front { padding-top: clamp(1.2rem, 3vh, 2.6rem); padding-bottom: 0; }
	.ttl-honey-landing .ttl-flip-front .ttl-intro p { font-size: 1rem; line-height: 1.6; margin: 0 0 0.85rem; }
	.ttl-honey-landing .ttl-flip-front .ttl-intro p.ttl-tagline { font-size: 1.1rem; margin: 0.2rem 0 1.8rem; }
	.ttl-honey-landing .ttl-flip-front .ttl-signoff { font-size: 1rem; margin-top: 0.8rem; }
	.ttl-honey-landing .ttl-flip-front .ttl-logo-lockup { margin-bottom: 0.2rem; }
	.ttl-honey-landing .ttl-flip-front .ttl-logo-svg { max-width: 168px; }
	.ttl-honey-landing .ttl-flip-front .ttl-logo-lockup img { max-height: 2.3rem; }
	.ttl-honey-landing .ttl-flip-front .ttl-cta-wrap {
		position: sticky;
		bottom: 0;
		margin-top: 1rem;
		padding: 0.9rem 0 1.1rem;
		background: linear-gradient(to top, var(--ttl-bg) 68%, transparent);
	}
}
.ttl-honey-landing .ttl-cta {
	position: relative;
	display: inline-block;
	cursor: pointer;
	border: 1px solid var(--ttl-ink);
	background-color: #FFFFFF;
	color: var(--ttl-ink);
	background-image: linear-gradient(var(--ttl-terra), var(--ttl-terra));
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: 100% 0%;
	padding: 1rem 2.2rem;
	font-family: var(--wp--preset--font-family--futura);
	font-weight: 500;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: lowercase;
	transition: background-size 400ms ease, color 400ms ease;
	-webkit-user-select: none;
	user-select: none;
}
.ttl-honey-landing .ttl-cta:hover,
.ttl-honey-landing .ttl-cta:focus-visible { background-size: 100% 100%; color: var(--ttl-cream); }
/* The hero button sits over the photo, so it takes the site background. */
.ttl-honey-landing .ttl-hero-cta { background-color: var(--ttl-bg); }
.ttl-honey-landing .ttl-cta span { margin-left: 0.45rem; }

.ttl-honey-landing .ttl-drawer-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ttl-honey-landing .ttl-drawer-scrim { display: none; }

/* Close control on the back. */
.ttl-honey-landing .ttl-drawer-close {
	position: absolute;
	top: 0.75rem;
	right: 1.1rem;
	width: 2.4rem;
	height: 2.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.9rem;
	line-height: 1;
	cursor: pointer;
	color: var(--ttl-ink);
	z-index: 2;
}
.ttl-honey-landing .ttl-drawer-close:hover { color: var(--ttl-terra); }

/* --- Back: the product --------------------------------------------------- */
.ttl-honey-landing .ttl-drawer-inner { max-width: 34rem; margin-inline: auto; }
.ttl-honey-landing .ttl-eyebrow { font-family: var(--wp--preset--font-family--futura); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ttl-terra); margin: 0 0 0.7rem; }
.ttl-honey-landing .ttl-name { font-family: var(--wp--preset--font-family--caslon); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.05; margin: 0 0 0.5rem; color: var(--ttl-ink); }
.ttl-honey-landing .ttl-price { font-family: var(--wp--preset--font-family--futura); font-size: 1.1rem; margin: 0 0 1.6rem; color: var(--ttl-ink); }
.ttl-honey-landing .ttl-price-value { font-weight: 500; }
.ttl-honey-landing .ttl-weight { color: color-mix(in srgb, var(--ttl-ink) 62%, transparent); }
.ttl-honey-landing .ttl-product-image { margin: 0 0 1.6rem; max-width: 18rem; }
.ttl-honey-landing .ttl-product-image img,
.ttl-honey-landing .ttl-product-image video { width: 100%; height: auto; display: block; }
.ttl-honey-landing .ttl-desc { font-family: var(--wp--preset--font-family--futura); font-size: 1rem; line-height: 1.6; margin: 0 0 1.6rem; }
.ttl-honey-landing .ttl-preorder { border: 1px solid var(--ttl-line); background: color-mix(in srgb, var(--ttl-terra) 8%, transparent); padding: 1rem 1.2rem; margin: 0 0 1.6rem; }
.ttl-honey-landing .ttl-preorder .ttl-eyebrow { margin-bottom: 0.4rem; }
.ttl-honey-landing .ttl-preorder p { font-family: var(--wp--preset--font-family--futura); font-size: 0.92rem; line-height: 1.55; margin: 0; }
.ttl-honey-landing .ttl-fineprint { font-family: var(--wp--preset--font-family--futura); font-size: 0.82rem; color: color-mix(in srgb, var(--ttl-ink) 68%, transparent); margin: 1rem 0 0; }

.ttl-honey-landing .ttl-cart { margin: 1.4rem 0 0; }
.ttl-honey-landing .ttl-cart form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.7rem; margin: 0; }
.ttl-honey-landing .ttl-cart .quantity { display: inline-flex; }
.ttl-honey-landing .ttl-cart .quantity input.qty { width: 4rem; min-height: 3.2rem; text-align: center; border: 1px solid var(--ttl-line); background: var(--ttl-cream); color: var(--ttl-ink); font-family: var(--wp--preset--font-family--futura); font-size: 1rem; border-radius: 0; }
.ttl-honey-landing .ttl-cart button.single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 12rem;
	min-height: 3.2rem;
	position: relative;
	border: 1px solid var(--ttl-ink);
	border-radius: 0;
	background-color: #FFFFFF;
	color: var(--ttl-ink);
	background-image: linear-gradient(var(--ttl-terra), var(--ttl-terra));
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: 100% 0%;
	font-family: var(--wp--preset--font-family--futura);
	font-weight: 500;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: lowercase;
	cursor: pointer;
	transition: background-size 400ms ease, color 400ms ease;
}
.ttl-honey-landing .ttl-cart button.single_add_to_cart_button:hover { background-size: 100% 100%; color: var(--ttl-cream); }
/* Lock the quantity box and the add-to-basket button to the exact same height.
   !important so a WooCommerce/plugin min-height on the button can't override it. */
.ttl-honey-landing .ttl-cart .quantity.ttl-qty,
.ttl-honey-landing .ttl-cart button.single_add_to_cart_button { height: 3.5rem !important; min-height: 0 !important; max-height: 3.5rem !important; box-sizing: border-box !important; align-self: center !important; }
.ttl-honey-landing .ttl-cart .quantity.ttl-qty input.qty,
.ttl-honey-landing .ttl-cart .ttl-qty-btn { min-height: 0; height: auto; }
.ttl-honey-landing .stock { font-family: var(--wp--preset--font-family--futura); font-size: 0.82rem; color: color-mix(in srgb, var(--ttl-ink) 65%, transparent); margin: 0.7rem 0 0; }
.ttl-honey-landing .woocommerce-message,
.ttl-honey-landing .woocommerce-info,
.ttl-honey-landing .woocommerce-error { list-style: none; border-top: 2px solid var(--ttl-terra); background: var(--ttl-cream); color: var(--ttl-ink); padding: 0.9rem 1.1rem; margin: 0 0 1.2rem; font-family: var(--wp--preset--font-family--futura); font-size: 0.9rem; }

.ttl-honey-landing .ttl-accordions { margin-top: 2rem; }
.ttl-honey-landing .tiny-accordion { border: 0; border-top: 1px solid var(--ttl-line); padding: 0.9rem 0; margin: 0; }
.ttl-honey-landing .ttl-accordions > .tiny-accordion:last-of-type { border-bottom: 1px solid var(--ttl-line); }
.ttl-honey-landing .tiny-accordion summary { list-style: none; cursor: pointer; position: relative; padding-right: 1.5rem; font-family: var(--wp--preset--font-family--futura); font-weight: 500; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ttl-ink); }
.ttl-honey-landing .tiny-accordion summary::-webkit-details-marker { display: none; }
.ttl-honey-landing .tiny-accordion summary::after { content: "+"; position: absolute; right: 0; top: -0.1em; font-size: 1.15rem; color: var(--ttl-terra); }
.ttl-honey-landing .tiny-accordion[open] summary::after { content: "\2212"; }
.ttl-honey-landing .tiny-accordion :where(p, ul) { font-family: var(--wp--preset--font-family--futura); margin-top: 0.85rem; font-size: 0.92rem; line-height: 1.55; }
.ttl-honey-landing .tiny-accordion a { color: var(--ttl-terra); }

/* Settable brand mark (WP Site Logo) with the script wordmark as fallback. */
.ttl-honey-landing .ttl-logo-lockup { margin: 0 0 0.4rem; text-align: center; }
.ttl-honey-landing .ttl-logo-lockup a { display: inline-block; }
.ttl-honey-landing .ttl-logo-lockup img,
.ttl-honey-landing .ttl-logo-lockup .custom-logo { display: block; margin: 0 auto; width: auto; height: auto; max-height: 3rem; max-width: min(80%, 20rem); }

/* Hero overlay and the sheet close are mobile-only. */
.ttl-honey-landing .ttl-hero-overlay,
.ttl-honey-landing .ttl-sheet-close { display: none; }

/* On desktop the jar IS the left hero, so the product face stays clean — no
   duplicated thumbnail. The image returns inside the mobile sheet. */
.ttl-honey-landing .ttl-product-image { display: none; }

/* Toast-style quantity stepper (JS adds − / + around the native field). */
.ttl-honey-landing .ttl-cart .quantity.ttl-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--ttl-line); background: var(--ttl-cream); }
.ttl-honey-landing .ttl-cart .quantity.ttl-qty input.qty { border: 0; background: transparent; width: 2.8rem; min-height: 3.2rem; -moz-appearance: textfield; }
.ttl-honey-landing .ttl-cart .quantity.ttl-qty input.qty::-webkit-outer-spin-button,
.ttl-honey-landing .ttl-cart .quantity.ttl-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ttl-honey-landing .ttl-qty-btn { border: 0; background: transparent; width: 2.8rem; min-height: 3.2rem; font-size: 1.35rem; line-height: 1; color: var(--ttl-ink); cursor: pointer; font-family: var(--wp--preset--font-family--futura); transition: color 0.2s ease, background 0.2s ease; }
.ttl-honey-landing .ttl-qty-btn:hover { color: var(--ttl-terra); background: color-mix(in srgb, var(--ttl-terra) 8%, transparent); }

/* Respect reduced motion — no spin, just cross the faces. */
@media (prefers-reduced-motion: reduce) {
	.ttl-honey-landing .ttl-flip-inner { transition: none; }
}

/* --- Mobile: full-screen photo hero → full-screen slide-up sheet ---------- */
@media (max-width: 781px) {
	.ttl-honey-landing { height: auto; overflow: visible; }
	.ttl-honey-landing .ttl-split { height: auto; flex-direction: column; }
	.ttl-honey-landing .ttl-media-col,
	.ttl-honey-landing .ttl-panel-col { flex: 1 1 auto; width: 100%; }

	/* The photo fills the phone; wordmark + button sit over it. */
	.ttl-honey-landing .ttl-media-col { position: relative; height: 100vh; height: 100dvh; }
	.ttl-honey-landing .ttl-media-hero img,
	.ttl-honey-landing .ttl-media-hero video { position: absolute; inset: 0; height: 100%; }
	/* Swap to the mobile (9:16) hero variant on small screens. */
	.ttl-honey-landing .ttl-media-hero .ttl-media-d { display: none; }
	.ttl-honey-landing .ttl-media-hero .ttl-media-m { display: block; }
	.ttl-honey-landing .ttl-hero-overlay {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		position: absolute;
		inset: 0;
		z-index: 2;
		text-align: center;
		padding: 0 1.4rem calc(2.4rem + env(safe-area-inset-bottom));
		background: linear-gradient(to top, rgba(38, 51, 46, 0.62) 0%, rgba(38, 51, 46, 0.18) 42%, rgba(38, 51, 46, 0) 68%);
	}
	.ttl-honey-landing .ttl-hero-overlay .ttl-wordmark { font-family: var(--wp--preset--font-family--caslon); color: #fff; font-size: 2.6rem; line-height: 1; margin: 0 0 0.2rem; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
	/* Over the video hero the logo reads as clean white (brightness/invert forces
	   the terracotta mark white), with a soft shadow for legibility. */
	.ttl-honey-landing .ttl-hero-logo img,
	.ttl-honey-landing .ttl-hero-logo .custom-logo { max-height: 3.6rem; filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45)); }
	.ttl-honey-landing .ttl-hero-overlay .ttl-tagline { font-family: var(--wp--preset--font-family--caslon); font-style: italic; color: #fff; margin: 0.3rem 0 1.4rem; font-size: 1.15rem; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
	/* A contained, centred button — not a full-bleed bar. (Beats .ttl-cta below.) */
	.ttl-honey-landing .ttl-hero-overlay .ttl-hero-cta { width: auto; max-width: none; align-self: center; padding: 1.1rem 2.4rem; }
	/* On mobile there's no left column — the gallery lives in the sheet instead. */
	.ttl-honey-landing .ttl-media-gallery { display: none; }

	/* The panel becomes a full-screen sheet that slides up over everything. */
	.ttl-honey-landing .ttl-panel-col { position: static; height: auto; overflow: visible; background: transparent; }
	.ttl-honey-landing .ttl-flip {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		perspective: none;
		background: var(--ttl-bg);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateY(100%);
		transition: transform 0.42s cubic-bezier(0.16, 0.84, 0.44, 1);
		z-index: 1000;
	}
	.ttl-honey-landing .ttl-drawer-toggle:checked ~ .ttl-panel-col .ttl-flip { transform: translateY(0); }
	.ttl-honey-landing .ttl-flip-inner { position: static; height: auto; transform: none !important; transform-style: flat; display: block; }
	.ttl-honey-landing .ttl-flip-front,
	.ttl-honey-landing .ttl-flip-back {
		position: static;
		height: auto;
		overflow: visible;
		-webkit-backface-visibility: visible;
		backface-visibility: visible;
		padding: clamp(1.6rem, 6vw, 2.4rem) clamp(1.25rem, 6vw, 2rem);
	}
	/* Copy section gets its own warm-grey background; product keeps the site bg. */
	.ttl-honey-landing .ttl-flip-front { display: block; padding-top: 3.2rem; background: var(--ttl-copy-bg); }
	/* Drop the desktop page-turn rotation so the sheet text isn't mirrored. */
	.ttl-honey-landing .ttl-flip-back { transform: none; padding-top: 1.5rem; background: var(--ttl-bg); }

	/* Tagline and the opener live on the hero — not in the sheet. The small
	   terracotta logo sits at the top of the sheet copy (like desktop). */
	.ttl-honey-landing .ttl-flip-front .ttl-tagline,
	.ttl-honey-landing .ttl-flip-front .ttl-cta-wrap { display: none; }
	.ttl-honey-landing .ttl-flip-front .ttl-front-logo { display: block; text-align: center; margin: 0 0 1rem; }
	.ttl-honey-landing .ttl-flip-front .ttl-front-logo .ttl-logo-svg,
	.ttl-honey-landing .ttl-flip-front .ttl-front-logo img { max-width: 150px; max-height: 2.1rem; margin: 0 auto; }

	/* The jar photo returns inside the sheet (no left column on mobile). */
	.ttl-honey-landing .ttl-product-image { display: block; margin: 0 auto 1.6rem; max-width: 14rem; }

	/* One close control, pinned to the top-right of the sheet. */
	.ttl-honey-landing .ttl-drawer-close { display: none; }
	.ttl-honey-landing .ttl-sheet-close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0.7rem;
		right: 0.7rem;
		width: 2.6rem;
		height: 2.6rem;
		font-size: 1.9rem;
		line-height: 1;
		color: var(--ttl-ink);
		background: color-mix(in srgb, var(--ttl-bg) 88%, transparent);
		border-radius: 50%;
		cursor: pointer;
		z-index: 3;
	}

	.ttl-honey-landing .ttl-cta { width: 100%; }
	.ttl-honey-landing .ttl-cart form.cart { justify-content: center; }
	.ttl-honey-landing .ttl-cart button.single_add_to_cart_button { flex-basis: 100%; width: 100%; }
	.ttl-honey-landing .ttl-drawer-scrim { display: none; }
}

/* =========================================================================
   Autumn landing — [ttl_autumn_landing]  (scoped to .ttl-autumn-landing)
   Land: full-screen film + lock-up. Tap → the film freezes and parts like a
   curtain revealing the letter, read in four parts; the last part's button →
   ordering (box film left, product right). No 3D transforms anywhere.
   Mobile: hero → sheet with the letter in parts → the box slides up over it.
   Type, spacing and controls mirror the honey landing.
   ========================================================================= */
.ttl-autumn-landing {
	--ttl-bg: #F8F4EA;
	--ttl-ink: #11100E;
	--ttl-terra: #DD7553;
	--ttl-line: rgba(17, 16, 14, 0.16);
	--ttl-cream: #FFFFFF;
	--ttl-curtain: 1.5s cubic-bezier(0.6, 0, 0.25, 1);
	margin: 0 !important;
	padding: 0;
	background: var(--ttl-bg);
	color: var(--ttl-ink);
	height: 100vh;
	overflow: hidden;
}
/* The page is a set of fixed layers: no page scroll, flush to the top, a
   softer grain on the warmer cream. */
body:has(.ttl-autumn-landing) { overflow: hidden; background: #F8F4EA; }
body:has(.ttl-autumn-landing)::after { opacity: 0.07; }
.wp-site-blocks:has(.ttl-autumn-landing) { padding-top: 0 !important; margin-top: 0 !important; }
/* The shortcode output gets an autop pass on the way out, which wraps stray
   inline runs (the × labels, the basket button) in classless <p>s. Make those
   transparent to layout so the flex rows and fixed controls behave. Real
   paragraphs all carry a class or live inside .ttl-step / .ttl-preorder. */
.ttl-autumn-landing :is(.ttl-stage, .ttl-letter-page, .ttl-order-page, .ttl-order-panel, .ttl-order-media, .ttl-curtain, .ttl-product, .ttl-cart, form.cart, .ttl-hero) > p:not([class]) { display: contents; }
.ttl-autumn-landing .ttl-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Buttons — the honey .ttl-cta. */
.ttl-autumn-landing .ttl-cta {
	position: relative; display: inline-block; cursor: pointer;
	border: 1px solid var(--ttl-ink); background-color: #FFFFFF; color: var(--ttl-ink);
	background-image: linear-gradient(var(--ttl-terra), var(--ttl-terra));
	background-repeat: no-repeat; background-position: 50% 100%; background-size: 100% 0%;
	padding: 1rem 2.2rem; font-family: var(--wp--preset--font-family--futura); font-weight: 500; font-size: 0.85rem;
	letter-spacing: 0.06em; text-transform: lowercase; text-decoration: none; line-height: normal;
	transition: background-size 400ms ease, color 400ms ease; -webkit-user-select: none; user-select: none;
}
.ttl-autumn-landing .ttl-cta:hover, .ttl-autumn-landing .ttl-cta:focus-visible { background-size: 100% 100%; color: var(--ttl-cream); }
.ttl-autumn-landing .ttl-cta span { margin-left: 0.45rem; }
/* Hero button: ghost — cream hairline and cream text over the film, fills
   cream with ink text on hover. */
.ttl-autumn-landing .ttl-hero-cta { background-color: transparent; border-color: var(--ttl-bg); color: var(--ttl-bg); background-image: linear-gradient(var(--ttl-bg), var(--ttl-bg)); text-shadow: 0 1px 6px rgba(0,0,0,0.25); }
.ttl-autumn-landing .ttl-hero-cta:hover, .ttl-autumn-landing .ttl-hero-cta:focus-visible { color: var(--ttl-ink); text-shadow: none; }

/* Basket link — top-right, as on honey; hidden once the letter is open (the × takes over). */
.ttl-autumn-landing .ttl-cart-link { position: fixed; top: 1rem; right: 1rem; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: color-mix(in srgb, var(--ttl-cream) 92%, transparent); color: var(--ttl-ink); box-shadow: 0 2px 10px rgba(38, 51, 46, 0.18); transition: background 0.2s ease, opacity 0.3s ease; }
.ttl-autumn-landing .ttl-cart-link:hover { background: var(--ttl-terra); }
.ttl-autumn-landing .ttl-cart-count { position: absolute; top: -0.3rem; right: -0.3rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.28rem; box-sizing: border-box; border-radius: 999px; background: var(--ttl-ink); color: #fff; font-family: var(--wp--preset--font-family--futura); font-size: 0.7rem; line-height: 1.15rem; text-align: center; font-weight: 600; }
.ttl-autumn-landing #ttl-note:checked ~ .ttl-cart-link { opacity: 0; visibility: hidden; }

/* --- Layer 1 (behind the curtain): the letter, one part at a time ------------ */
.ttl-autumn-landing .ttl-letter-page { position: fixed; inset: 0; z-index: 1; background: var(--ttl-bg); display: flex; flex-direction: row; align-items: stretch; transition: opacity 0.5s ease, visibility 0.5s; }
.ttl-autumn-landing .ttl-letter-panel { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: clamp(1.2rem, 3vh, 2.4rem) clamp(1.5rem, 4vw, 4.5rem); }
/* With a photo/clip per section, the letter becomes the honey split: media left, words right. */
.ttl-autumn-landing .ttl-letter-media { flex: 1 1 50%; min-width: 0; position: relative; background: var(--ttl-ink); overflow: hidden; }
.ttl-autumn-landing .ttl-has-media .ttl-letter-panel { flex: 1 1 50%; }
/* Each section carries its own film. On desktop it is pinned into the left
   half (the column itself is just the dark backing); sections crossfade, so
   the film crossfades with them. On phones it becomes a square up top. */
.ttl-autumn-landing .ttl-step-media { position: fixed; left: 0; top: 0; width: 50vw; height: 100vh; overflow: hidden; background: var(--ttl-ink); }
.ttl-autumn-landing .ttl-step-media > video, .ttl-autumn-landing .ttl-step-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* The section's drawing and title sit over the film on the left, as the
   lock-up sits over the bees hero: lower third, soft veil, the cream drawing. */
.ttl-autumn-landing .ttl-lm-overlay { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; background: radial-gradient(ellipse 62% 50% at 50% 50%, rgba(17,16,14,0.42) 0%, rgba(17,16,14,0.18) 55%, rgba(17,16,14,0) 100%); }
.ttl-autumn-landing .ttl-lm-art { display: block; width: auto; height: clamp(9rem, 26vh, 15rem); margin: 0 0 0.4rem; opacity: 0.96; filter: drop-shadow(0 1px 6px rgba(0,0,0,0.25)); }
.ttl-autumn-landing .ttl-step p.ttl-lm-title, .ttl-autumn-landing .ttl-lm-title { font-family: var(--wp--preset--font-family--caslon); text-align: center; font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.2; color: #fff; margin: 0; max-width: 26rem; text-shadow: 0 1px 12px rgba(0,0,0,0.45); }

.ttl-autumn-landing #ttl-order:checked ~ .ttl-letter-page { opacity: 0; visibility: hidden; }
.ttl-autumn-landing .ttl-letterhead { text-align: center; flex: 0 0 auto; width: 100%; max-width: 34rem; margin: 0; padding: 0 0 1.1rem; border-bottom: 1px solid var(--ttl-line); }
.ttl-autumn-landing .ttl-logo-lockup { margin: 0 0 0.2rem; text-align: center; }
.ttl-autumn-landing .ttl-logo-lockup a { display: inline-block; }
.ttl-autumn-landing .ttl-logo-lockup img, .ttl-autumn-landing .ttl-logo-lockup .custom-logo { display: block; margin: 0 auto; width: auto; height: auto; max-width: 168px; max-height: 2.3rem; }
.ttl-autumn-landing .ttl-tagline { font-family: var(--wp--preset--font-family--caslon); font-style: italic; font-size: 1.1rem; color: var(--ttl-ink); margin: 0.2rem 0 0; text-align: center; }
.ttl-autumn-landing .ttl-dots { display: flex; justify-content: center; gap: 0.5rem; margin: 1rem 0 0.4rem; flex: 0 0 auto; }
.ttl-autumn-landing .ttl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ttl-line); cursor: pointer; transition: background 0.3s ease; }
.ttl-autumn-landing .ttl-steps { position: relative; flex: 1 1 auto; width: 100%; max-width: 34rem; min-height: 0; }
.ttl-autumn-landing .ttl-step { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto; padding: 1rem 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.6s ease, visibility 0.6s; }
/* Auto margins centre the section vertically without ever clipping when it is taller than the panel. */
.ttl-autumn-landing .ttl-step-inner { margin-block: auto; width: 100%; position: relative; }
.ttl-autumn-landing .ttl-step-art { display: block; width: auto; height: clamp(4.5rem, 11vh, 7rem); margin: auto auto 0.9rem; mix-blend-mode: multiply; opacity: 0.92; flex: 0 0 auto; }
.ttl-autumn-landing .ttl-copy-m { display: none; }
.ttl-autumn-landing .ttl-step-title { font-family: var(--wp--preset--font-family--caslon); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.2; color: var(--ttl-ink); text-align: center; margin: 0 0 1.2rem; }
.ttl-autumn-landing .ttl-step p { font-family: var(--wp--preset--font-family--futura); font-size: 1rem; line-height: 1.6; margin: 0 0 0.85rem; color: var(--ttl-ink); text-align: left; }
.ttl-autumn-landing .ttl-step .ttl-signoff { font-style: italic; margin-top: 0.8rem; }
.ttl-autumn-landing .ttl-step-nav { display: flex; align-items: baseline; justify-content: center; gap: 1rem; margin-top: 1.8rem; }
/* Page-turns: the sentence and an arrow; only the words underline on hover. */
.ttl-autumn-landing .ttl-next { display: inline-flex; align-items: baseline; gap: 0.45rem; cursor: pointer; font-family: var(--wp--preset--font-family--futura); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--ttl-ink); text-decoration: none; }
.ttl-autumn-landing .ttl-next .ttl-next-txt { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; text-decoration-thickness: 1px; transition: text-decoration-color 0.3s ease; }
.ttl-autumn-landing .ttl-next:hover .ttl-next-txt, .ttl-autumn-landing .ttl-next:focus-visible .ttl-next-txt { text-decoration-color: var(--ttl-ink); }
.ttl-autumn-landing .ttl-next span { display: inline-block; transition: transform 0.3s ease, color 0.3s ease; }
.ttl-autumn-landing .ttl-next:hover span { transform: translateX(0.2rem); }
.ttl-autumn-landing .ttl-back { color: rgba(17, 16, 14, 0.5); margin-right: 0.6rem; }
.ttl-autumn-landing .ttl-back:hover { color: var(--ttl-ink); }
.ttl-autumn-landing .ttl-back:hover span { transform: translateX(-0.2rem); }
/* Desktop: the progress dots run vertically in the right margin, out of the
   copy's way; a quiet "skip to the box" link sits bottom-right (hidden on the
   last section, where the real button takes over, and on phones). */
@media (min-width: 782px) {
	.ttl-autumn-landing .ttl-dots { position: fixed; right: clamp(1.4rem, 3.5vw, 3rem); top: 50%; transform: translateY(-50%); flex-direction: column; gap: 0.6rem; margin: 0; z-index: 5; }
	.ttl-autumn-landing .ttl-letterhead { margin-bottom: 0.6rem; }
	.ttl-autumn-landing .ttl-step { padding-bottom: 3rem; }
}
/* Section actions, one row under the copy: the order button on the left,
   the next-section text link on the right. */
.ttl-autumn-landing .ttl-step-nav { display: flex; align-items: center; justify-content: center; gap: 1.6rem; margin-top: 1.8rem; }
.ttl-autumn-landing .ttl-step-nav .ttl-buy { padding: 0.9rem 1.7rem; font-size: 0.82rem; }
/* Hero: the order button matches the site's white/ink button (terracotta on hover). */
.ttl-autumn-landing .ttl-hero .ttl-cta { width: 21.5rem; max-width: 100%; text-align: center; box-sizing: border-box; white-space: nowrap; }
.ttl-autumn-landing .ttl-hero-buy { margin-top: 0.7rem; }
.ttl-autumn-landing #ttl-s1:checked ~ .ttl-letter-page .ttl-step-1, .ttl-autumn-landing #ttl-s2:checked ~ .ttl-letter-page .ttl-step-2, .ttl-autumn-landing #ttl-s3:checked ~ .ttl-letter-page .ttl-step-3,
.ttl-autumn-landing #ttl-s4:checked ~ .ttl-letter-page .ttl-step-4 { opacity: 1; visibility: visible; pointer-events: auto; }
.ttl-autumn-landing #ttl-s1:checked ~ .ttl-letter-page .ttl-dot:nth-child(1), .ttl-autumn-landing #ttl-s2:checked ~ .ttl-letter-page .ttl-dot:nth-child(2), .ttl-autumn-landing #ttl-s3:checked ~ .ttl-letter-page .ttl-dot:nth-child(3),
.ttl-autumn-landing #ttl-s4:checked ~ .ttl-letter-page .ttl-dot:nth-child(4) { background: var(--ttl-ink); }

/* Close × (letter + box pages) */
.ttl-autumn-landing .ttl-close { position: fixed; top: 0.75rem; right: 1.1rem; z-index: 5; width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; line-height: 1; color: var(--ttl-ink); cursor: pointer; transition: color 0.2s ease; }
.ttl-autumn-landing .ttl-close:hover { color: var(--ttl-terra); }

/* --- Layer 2: ordering — the honey split (box film left, product right) ------ */
.ttl-autumn-landing .ttl-order-page { position: fixed; inset: 0; z-index: 2; display: flex; background: var(--ttl-bg); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s; }
.ttl-autumn-landing #ttl-order:checked ~ .ttl-order-page { opacity: 1; visibility: visible; transform: none; }
.ttl-autumn-landing .ttl-order-media { flex: 1 1 50%; min-width: 0; position: relative; background: var(--ttl-ink); overflow: hidden; }
.ttl-autumn-landing .ttl-order-media video, .ttl-autumn-landing .ttl-order-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* The line over the box film: centred, Caslon italic with swash/ligature alternates, soft radial veil. */
.ttl-autumn-landing .ttl-order-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 45% at 50% 50%, rgba(17,16,14,0.38) 0%, rgba(17,16,14,0.14) 55%, rgba(17,16,14,0) 100%); pointer-events: none; }
.ttl-autumn-landing .ttl-order-caption { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; margin: 0; text-align: center; font-family: var(--wp--preset--font-family--caslon); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: 0.01em; color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,0.45); padding: 0 1.5rem; pointer-events: none; font-feature-settings: "swsh" 1, "dlig" 1, "calt" 1, "liga" 1; font-variant-ligatures: common-ligatures discretionary-ligatures; }
.ttl-autumn-landing .ttl-order-panel { flex: 1 1 50%; min-width: 0; overflow-y: auto; padding: clamp(2rem, 5vh, 3.5rem) clamp(1.6rem, 4vw, 3.5rem); }
.ttl-autumn-landing .ttl-product { max-width: 34rem; margin-inline: auto; }
.ttl-autumn-landing .ttl-eyebrow { font-family: var(--wp--preset--font-family--futura); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ttl-terra); margin: 0 0 0.7rem; }
.ttl-autumn-landing .ttl-name { font-family: var(--wp--preset--font-family--caslon); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.05; margin: 0 0 0.5rem; color: var(--ttl-ink); }
.ttl-autumn-landing .ttl-price { font-family: var(--wp--preset--font-family--futura); font-size: 1.1rem; margin: 0 0 1.6rem; color: var(--ttl-ink); }
.ttl-autumn-landing .ttl-price-value { font-weight: 500; }
.ttl-autumn-landing .ttl-muted { color: color-mix(in srgb, var(--ttl-ink) 62%, transparent); }
.ttl-autumn-landing .ttl-desc { font-family: var(--wp--preset--font-family--futura); font-size: 1rem; line-height: 1.6; margin: 0 0 1.6rem; }
.ttl-autumn-landing .ttl-preorder { border: 1px solid var(--ttl-line); background: color-mix(in srgb, var(--ttl-terra) 8%, transparent); padding: 1rem 1.2rem; margin: 0 0 1.6rem; }
.ttl-autumn-landing .ttl-preorder .ttl-eyebrow { margin-bottom: 0.4rem; }
.ttl-autumn-landing .ttl-preorder p { font-family: var(--wp--preset--font-family--futura); font-size: 0.92rem; line-height: 1.55; margin: 0; }
.ttl-autumn-landing .ttl-stock { font-family: var(--wp--preset--font-family--futura); font-size: 0.82rem; color: color-mix(in srgb, var(--ttl-ink) 65%, transparent); margin: 0.7rem 0 0; }
.ttl-autumn-landing .stock { display: none; }
.ttl-autumn-landing .woocommerce-message, .ttl-autumn-landing .woocommerce-info, .ttl-autumn-landing .woocommerce-error { list-style: none; border-top: 2px solid var(--ttl-terra); background: var(--ttl-cream); color: var(--ttl-ink); padding: 0.9rem 1.1rem; margin: 0 0 1.2rem; font-family: var(--wp--preset--font-family--futura); font-size: 0.9rem; }
/* The real WooCommerce add-to-basket, styled as on honey (quantity + button, same height). */
.ttl-autumn-landing .ttl-cart { margin: 1.4rem 0 0; }
.ttl-autumn-landing .ttl-cart form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin: 0; }
.ttl-autumn-landing .ttl-cart .quantity { display: inline-flex; }
.ttl-autumn-landing .ttl-cart .quantity input.qty { width: 4rem; min-height: 3.2rem; text-align: center; border: 1px solid var(--ttl-line); background: var(--ttl-cream); color: var(--ttl-ink); font-family: var(--wp--preset--font-family--futura); font-size: 1rem; border-radius: 0; }
.ttl-autumn-landing .ttl-cart .quantity.ttl-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--ttl-ink); background: var(--ttl-cream); }
.ttl-autumn-landing .ttl-cart .quantity.ttl-qty input.qty { border: 0; background: transparent; width: 2.8rem; -moz-appearance: textfield; }
.ttl-autumn-landing .ttl-cart .quantity.ttl-qty input.qty::-webkit-outer-spin-button, .ttl-autumn-landing .ttl-cart .quantity.ttl-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ttl-autumn-landing .ttl-qty-btn { border: 0; background: transparent; width: 2.8rem; font-size: 1.35rem; line-height: 1; color: var(--ttl-ink); cursor: pointer; font-family: var(--wp--preset--font-family--futura); transition: color 0.2s ease, background 0.2s ease; }
.ttl-autumn-landing .ttl-qty-btn:hover { color: var(--ttl-terra); background: color-mix(in srgb, var(--ttl-terra) 8%, transparent); }
.ttl-autumn-landing .ttl-cart button.single_add_to_cart_button { flex: 1 1 auto; min-width: 12rem; position: relative; border: 1px solid var(--ttl-ink); border-radius: 0; background-color: #FFFFFF; color: var(--ttl-ink); background-image: linear-gradient(var(--ttl-terra), var(--ttl-terra)); background-repeat: no-repeat; background-position: 50% 100%; background-size: 100% 0%; font-family: var(--wp--preset--font-family--futura); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: lowercase; cursor: pointer; transition: background-size 400ms ease, color 400ms ease; }
.ttl-autumn-landing .ttl-cart button.single_add_to_cart_button:hover { background-size: 100% 100%; color: var(--ttl-cream); }
.ttl-autumn-landing .ttl-cart .quantity.ttl-qty, .ttl-autumn-landing .ttl-cart button.single_add_to_cart_button { height: 3.5rem !important; min-height: 0 !important; max-height: 3.5rem !important; box-sizing: border-box !important; align-self: center !important; }
.ttl-autumn-landing .ttl-cart .quantity.ttl-qty input.qty, .ttl-autumn-landing .ttl-qty-btn { min-height: 0; height: auto; }
/* Tabs — honey accordions. */
.ttl-autumn-landing .ttl-accordions { margin-top: 2rem; }
.ttl-autumn-landing .tiny-accordion { border: 0; border-top: 1px solid var(--ttl-line); padding: 0.9rem 0; margin: 0; }
.ttl-autumn-landing .ttl-accordions > .tiny-accordion:last-of-type { border-bottom: 1px solid var(--ttl-line); }
.ttl-autumn-landing .tiny-accordion summary { list-style: none; cursor: pointer; position: relative; padding-right: 1.5rem; font-family: var(--wp--preset--font-family--futura); font-weight: 500; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ttl-ink); }
.ttl-autumn-landing .tiny-accordion summary::-webkit-details-marker { display: none; }
.ttl-autumn-landing .tiny-accordion summary::after { content: "+"; position: absolute; right: 0; top: -0.1em; font-size: 1.15rem; color: var(--ttl-terra); }
.ttl-autumn-landing .tiny-accordion[open] summary::after { content: "\2212"; }
.ttl-autumn-landing .tiny-accordion :where(p, ul) { font-family: var(--wp--preset--font-family--futura); margin: 0.85rem 0 0; font-size: 0.92rem; line-height: 1.55; }
.ttl-autumn-landing .tiny-accordion ul { padding-left: 1.1rem; }
.ttl-autumn-landing .tiny-accordion a { color: var(--ttl-terra); }

/* --- Layer 3 (front): the curtain ------------------------------------------- */
.ttl-autumn-landing .ttl-curtain { position: fixed; inset: 0; z-index: 3; overflow: hidden; background: var(--ttl-ink); }
.ttl-autumn-landing .ttl-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ttl-autumn-landing .ttl-film.ttl-media-m { display: none; }
.ttl-autumn-landing .ttl-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(17,16,14,0.58) 0%, rgba(17,16,14,0.2) 40%, rgba(17,16,14,0.03) 68%); pointer-events: none; }
.ttl-autumn-landing .ttl-pane { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; z-index: 2; visibility: hidden; transition: transform var(--ttl-curtain), visibility 0s linear var(--ttl-curtain); }
.ttl-autumn-landing .ttl-pane-l { left: 0; transform-origin: left center; }
.ttl-autumn-landing .ttl-pane-r { right: 0; transform-origin: right center; }
.ttl-autumn-landing .ttl-pane-fill { position: absolute; top: 0; width: 100vw; height: 100%; background-size: cover; background-position: center; }
.ttl-autumn-landing .ttl-pane-l .ttl-pane-fill { left: 0; }
.ttl-autumn-landing .ttl-pane-r .ttl-pane-fill { right: 0; }
.ttl-autumn-landing .ttl-pane-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,16,14,0.58) 0%, rgba(17,16,14,0.2) 40%, rgba(17,16,14,0.03) 68%); }
/* Pleats (soft vertical folds) live inside the scaling pane so they gather with it. */
.ttl-autumn-landing .ttl-pane::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(0,0,0,0.28) 0, rgba(0,0,0,0) 3.5%, rgba(255,255,255,0.10) 6%, rgba(0,0,0,0) 8.5%, rgba(0,0,0,0.28) 12%); opacity: 0; transition: opacity 0.45s ease 0.05s; }
.ttl-autumn-landing .ttl-edge { position: absolute; top: 0; bottom: 0; width: 22%; z-index: 2; opacity: 0; transition: opacity 0.7s ease; pointer-events: none; }
.ttl-autumn-landing .ttl-pane-l .ttl-edge { right: 0; background: linear-gradient(to left, rgba(0,0,0,0.55), transparent); }
.ttl-autumn-landing .ttl-pane-r .ttl-edge { left: 0; background: linear-gradient(to right, rgba(0,0,0,0.55), transparent); }
.ttl-autumn-landing #ttl-note:checked ~ .ttl-curtain { pointer-events: none; background: transparent; }
.ttl-autumn-landing #ttl-note:checked ~ .ttl-curtain .ttl-film, .ttl-autumn-landing #ttl-note:checked ~ .ttl-curtain .ttl-veil { visibility: hidden; }
.ttl-autumn-landing #ttl-note:checked ~ .ttl-curtain .ttl-pane { visibility: visible; transition: transform var(--ttl-curtain); }
.ttl-autumn-landing #ttl-note:checked ~ .ttl-curtain .ttl-pane-l { transform: translateX(-34%) scaleX(0.34); }
.ttl-autumn-landing #ttl-note:checked ~ .ttl-curtain .ttl-pane-r { transform: translateX(34%) scaleX(0.34); }
.ttl-autumn-landing #ttl-note:checked ~ .ttl-curtain .ttl-pane::before, .ttl-autumn-landing #ttl-note:checked ~ .ttl-curtain .ttl-edge { opacity: 1; }
/* No JS = no still to hand the panes: the film simply fades away instead. */
html:not(.ttl-js) .ttl-autumn-landing .ttl-pane { display: none; }
html:not(.ttl-js) .ttl-autumn-landing .ttl-curtain { transition: opacity 0.8s ease; }
html:not(.ttl-js) .ttl-autumn-landing #ttl-note:checked ~ .ttl-curtain { opacity: 0; }
/* Lower-third lock-up. */
.ttl-autumn-landing .ttl-hero { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding: 0 1.4rem calc(9vh + env(safe-area-inset-bottom)); transition: opacity 0.35s ease; }
.ttl-autumn-landing #ttl-note:checked ~ .ttl-curtain .ttl-hero { opacity: 0; pointer-events: none; }
.ttl-autumn-landing .ttl-hero-logo img, .ttl-autumn-landing .ttl-hero-logo .custom-logo { filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,0.45)); }
/* The line sits in the centre of the film — Caslon italic with its swash
   alternates, ~28px, soft drop shadow. Logo + button stay in the bottom third. */
.ttl-autumn-landing .ttl-hero-centre { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 1.5rem; text-align: center; }
.ttl-autumn-landing .ttl-hero .ttl-hero-logo { margin: 0 0 0.6rem; }
.ttl-autumn-landing .ttl-hero .ttl-hero-logo img, .ttl-autumn-landing .ttl-hero .ttl-hero-logo .custom-logo { max-width: 148px; max-height: 2rem; }
.ttl-autumn-landing .ttl-hero .ttl-hero-line { margin: 0; color: #fff; font-size: 1.75rem; line-height: 1.2; text-shadow: 0 2px 10px rgba(0,0,0,0.45); font-feature-settings: "swsh" 1, "dlig" 1, "calt" 1, "liga" 1; font-variant-ligatures: common-ligatures discretionary-ligatures; }

@keyframes ttl-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.ttl-autumn-landing .ttl-pane, .ttl-autumn-landing .ttl-hero, .ttl-autumn-landing .ttl-letter-page, .ttl-autumn-landing .ttl-order-page, .ttl-autumn-landing .ttl-step { transition: none; }
}

/* --- Mobile: hero → sheet with the letter in parts → the box slides up ------- */
@media (max-width: 781px) {
	.ttl-autumn-landing { height: 100vh; height: 100dvh; }
	.ttl-autumn-landing .ttl-film.ttl-media-d { display: none; }
	.ttl-autumn-landing .ttl-film.ttl-media-m { display: block; }
	.ttl-autumn-landing .ttl-pane { display: none; }
	.ttl-autumn-landing #ttl-note:checked ~ .ttl-curtain .ttl-film, .ttl-autumn-landing #ttl-note:checked ~ .ttl-curtain .ttl-veil { visibility: visible; }
	.ttl-autumn-landing #ttl-note:checked ~ .ttl-curtain { background: var(--ttl-ink); }
	.ttl-autumn-landing .ttl-veil { background: linear-gradient(to top, rgba(38,51,46,0.62) 0%, rgba(38,51,46,0.18) 42%, rgba(38,51,46,0) 68%); }
	.ttl-autumn-landing .ttl-hero { padding-bottom: calc(2.4rem + env(safe-area-inset-bottom)); }
	.ttl-autumn-landing .ttl-hero .ttl-hero-logo img, .ttl-autumn-landing .ttl-hero .ttl-hero-logo .custom-logo { max-height: 2.6rem; max-width: min(64%, 14rem); }
	.ttl-autumn-landing .ttl-hero .ttl-hero-line { font-size: 1.5rem; }
	.ttl-autumn-landing .ttl-hero-cta { padding: 1.1rem 2.4rem; }

	.ttl-autumn-landing .ttl-letter-page { z-index: 4; overflow: hidden; background: var(--ttl-bg); transform: translateY(100%); transition: transform 0.42s cubic-bezier(0.16, 0.84, 0.44, 1); }
	/* Each section opens with its film as a full-bleed square (the 4:5 clip
	   centre-cropped), drawing + title over it, then the copy on cream. */
	.ttl-autumn-landing .ttl-letter-media { display: none; }
	.ttl-autumn-landing .ttl-letter-panel, .ttl-autumn-landing .ttl-has-media .ttl-letter-panel { position: absolute; inset: 0; z-index: 1; display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--ttl-bg); }
	.ttl-autumn-landing .ttl-step-media { position: relative; left: auto; top: auto; width: auto; height: auto; aspect-ratio: 4 / 5; margin: 0 calc(-1 * clamp(1.25rem, 6vw, 2rem)) 1.4rem; }
	.ttl-autumn-landing .ttl-lm-art { height: clamp(6.5rem, 26vw, 9rem); }
	.ttl-autumn-landing .ttl-step p.ttl-lm-title { font-size: 1.4rem; text-align: center; }
	/* The section film (4:5) starts at the very top of the sheet; the logo
	   (white) sits over it, the × top-right, no dots. */
	.ttl-autumn-landing .ttl-letter-panel { padding: 0 clamp(1.25rem, 6vw, 2rem) 1.6rem; }
	.ttl-autumn-landing .ttl-letterhead { position: absolute; top: 1.1rem; left: 0; right: 0; z-index: 2; border: 0; padding: 0; margin: 0; pointer-events: none; }
	.ttl-autumn-landing .ttl-letterhead img, .ttl-autumn-landing .ttl-letterhead .custom-logo { max-width: 132px; max-height: 1.9rem; filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,0.45)); }
	.ttl-autumn-landing .ttl-dots { display: none; }
	.ttl-autumn-landing .ttl-steps { position: static; flex: none; width: 100%; max-width: none; }
	.ttl-autumn-landing .ttl-step { position: static; display: none; opacity: 1; visibility: visible; overflow: visible; pointer-events: auto; }
	.ttl-autumn-landing #ttl-s1:checked ~ .ttl-letter-page .ttl-step-1, .ttl-autumn-landing #ttl-s2:checked ~ .ttl-letter-page .ttl-step-2, .ttl-autumn-landing #ttl-s3:checked ~ .ttl-letter-page .ttl-step-3,
	.ttl-autumn-landing #ttl-s4:checked ~ .ttl-letter-page .ttl-step-4 { display: block; animation: ttl-fade 0.45s ease; transition-delay: 0s; }
	.ttl-autumn-landing #ttl-note:checked ~ .ttl-letter-page { transform: translateY(0); }
	.ttl-autumn-landing #ttl-order:checked ~ .ttl-letter-page { opacity: 1; visibility: visible; }
	.ttl-autumn-landing .ttl-step { padding: 0 0 0.8rem; }
	.ttl-autumn-landing .ttl-step-inner { margin-block: 0; }
	/* Phones get the shorter copy where one is set. */
	.ttl-autumn-landing .ttl-copy-d { display: none; }
	.ttl-autumn-landing .ttl-copy-m { display: block; }
	.ttl-autumn-landing .ttl-step p { text-align: left; font-size: 0.95rem; line-height: 1.55; }
	.ttl-autumn-landing .ttl-step-nav { margin-top: 1.4rem; gap: 1.1rem; flex-wrap: wrap; }
	/* Air between the drawing and the title on the square. */
	.ttl-autumn-landing .ttl-lm-art { margin-bottom: 1.1rem; }
	.ttl-autumn-landing .ttl-hero-buy { margin-top: 0.7rem; }
	.ttl-autumn-landing .ttl-close { position: fixed; top: 0.7rem; right: 0.7rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(248, 244, 234, 0.88); z-index: 6; }

	.ttl-autumn-landing .ttl-order-page { z-index: 5; display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 1; visibility: hidden; transform: translateY(100%); transition: transform 0.42s cubic-bezier(0.16, 0.84, 0.44, 1), visibility 0.42s; }
	.ttl-autumn-landing #ttl-order:checked ~ .ttl-order-page { visibility: visible; transform: translateY(0); }
	/* The box film sits at the top of the sheet, square, so the order details show beneath it. */
	.ttl-autumn-landing .ttl-order-media { display: block; position: relative; width: 100%; aspect-ratio: 1 / 1; }
	.ttl-autumn-landing .ttl-order-caption { font-size: 1.5rem; }
	.ttl-autumn-landing .ttl-order-panel { padding: 1.6rem clamp(1.25rem, 6vw, 2rem) 2rem; }
	.ttl-autumn-landing .ttl-cart form.cart { flex-wrap: nowrap; }
	.ttl-autumn-landing .ttl-cart button.single_add_to_cart_button { min-width: 0; padding-inline: 1rem; }
}

/* =========================================================================
   Checkout & cart — quiet, Toast-level polish.
   Brand type + colour only, no structural overrides, so it stays robust on
   both the full site and the honey landing. Covers classic (shortcode) and
   block-based (wp-block-woocommerce-*) checkout markup.
   ========================================================================= */
/* Drop the full-width rule under the logo on the cart/checkout header. */
.woocommerce-checkout .tiny-site-header--solid,
.woocommerce-cart .tiny-site-header--solid { border-bottom: 0 !important; }

.woocommerce-checkout, .woocommerce-cart {
	--tl-co-ink: #11100E;
	--tl-co-cream: #FFFFFF;
	--tl-co-terra: #DD7553;
	--tl-co-terra-dark: #C55E3E;
	--tl-co-line: rgba(17, 16, 14, 0.16);
}

/* Headings in Caslon to match the store. */
.woocommerce-checkout h1, .woocommerce-checkout h2, .woocommerce-checkout h3,
.woocommerce-cart h1, .woocommerce-cart h2, .woocommerce-cart h3,
.woocommerce-checkout .wc-block-components-title,
.woocommerce-checkout .wc-block-components-checkout-step__title {
	font-family: var(--wp--preset--font-family--caslon) !important;
	font-weight: 400;
	letter-spacing: 0.01em;
}

/* Inputs: square, calm, cream — not the default chunky grey. */
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-cart .input-text,
.woocommerce form .form-row input.input-text,
.wc-block-components-text-input input,
.wc-block-components-combobox input {
	border-radius: 0 !important;
	border: 1px solid var(--tl-co-line) !important;
	background: var(--tl-co-cream) !important;
	color: var(--tl-co-ink) !important;
	font-family: var(--wp--preset--font-family--futura) !important;
	min-height: 3rem;
}
.wc-block-components-text-input input:focus,
.woocommerce-checkout .input-text:focus {
	outline: 2px solid var(--tl-co-terra);
	outline-offset: 1px;
}

/* Checkout/cart primary actions: full-width and prominent, but otherwise
   inherit the site's clean white → accent-fill button style (see global rule). */
.woocommerce #payment #place_order,
.woocommerce-checkout button.button.alt,
.woocommerce-cart a.checkout-button.button.alt,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	padding: 1.15rem 1.6rem !important;
	font-size: 1rem !important;
	letter-spacing: 0.06em;
}

/* Place Order position, responsive: under the Order Summary on the wide
   two-column layout (desktop/tablet, WooCommerce adds .is-large), but in the
   form column on the stacked layout (mobile). Needs the Actions block moved
   into the Totals column on the checkout page; WooCommerce keeps a copy in the
   form column, and these rules show the right one for the current width. The
   :has() guard means if the block was never moved, the form-column button
   always stays — checkout is never left without one. */
/* Place Order position, responsive. When the Actions block has been moved into
   the Totals column on the checkout page, WooCommerce keeps a copy in the form
   column too — so we show the right one per width: under the Order Summary on
   desktop/tablet, in the form column on mobile. The :has() guard means that if
   the block was never moved, the form-column button always stays. */
@media (max-width: 781px) {
	.wc-block-checkout__sidebar .wc-block-checkout__actions { display: none !important; }
}
@media (min-width: 782px) {
	.wc-block-checkout:has(.wc-block-checkout__sidebar .wc-block-checkout__actions) .wc-block-checkout__main .wc-block-checkout__actions { display: none !important; }
	.wc-block-checkout__sidebar .wc-block-checkout__actions { margin-top: 1rem; }
}

/* Order summary + totals: hairline rules, brand type. */
.woocommerce-checkout #order_review,
.woocommerce-cart .cart_totals,
.wc-block-components-totals-wrapper { border-color: var(--tl-co-line) !important; }
.woocommerce-checkout .order-total,
.wc-block-components-totals-item { font-family: var(--wp--preset--font-family--futura); }

/* Cart quantity control echoes the product panel. */
.woocommerce-cart .quantity input.qty,
.wc-block-components-quantity-selector {
	border-radius: 0 !important;
	border: 1px solid var(--tl-co-line) !important;
	background: var(--tl-co-cream);
}

/* =========================================================================
   Light paper grain over the whole site. A self-contained SVG noise texture,
   fixed and non-interactive, blended faintly so it reads as paper texture
   rather than static. No external asset.
   ========================================================================= */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	pointer-events: none;
	opacity: 0.14;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.7'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 220px 220px;
	background-repeat: repeat;
}