/*
Theme Name: This Tiny Life — Honey
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 Spring Honey landing (page-turn flip on desktop, bottom sheet on mobile, real WooCommerce checkout), rendered entirely from the theme. Just activate it; no page setup needed. Switch to the full "This Tiny Life" theme when the site is ready.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.2
Version: 1.9.7
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);
}

/* ---------------------------------------------------------------------------
   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: terracotta outline that fills with colour from the bottom on
   hover / focus (text fades to cream). Covers core and WooCommerce buttons. */
.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--terracotta) !important;
	background-color: transparent !important;
	color: var(--wp--preset--color--terracotta) !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: none;
	text-decoration: none !important;
	transition: background-size 400ms ease, color 400ms ease !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: #F2E7D2;
	--ttl-ink: #26332E;
	--ttl-terra: #CF6F4D;
	--ttl-terra-dark: #B85C3C;
	--ttl-line: rgba(38, 51, 46, 0.16);
	--ttl-cream: #FBF6EC;
	margin: 0 !important;
	padding: 0;
	background: var(--ttl-bg);
	color: var(--ttl-ink);
	height: 100vh;
	overflow: hidden;
}

.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-col img,
.ttl-honey-landing .ttl-media-col video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* 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-flip .ttl-flip-inner { transform: rotateY(180deg); }

.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);
}
.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; }
.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 0 1.4rem; }

.ttl-honey-landing .ttl-cta-wrap { text-align: center; margin-top: 1.6rem; }
.ttl-honey-landing .ttl-cta {
	display: inline-block;
	cursor: pointer;
	background: var(--ttl-terra);
	color: var(--ttl-cream);
	padding: 1rem 2.6rem;
	font-family: var(--wp--preset--font-family--futura);
	font-weight: 500;
	font-size: 0.85rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background-color 200ms ease;
	-webkit-user-select: none;
	user-select: none;
}
.ttl-honey-landing .ttl-cta:hover { background: var(--ttl-terra-dark); }
.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 { 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;
	border: 0;
	border-radius: 0;
	background: var(--ttl-terra);
	color: var(--ttl-cream);
	font-family: var(--wp--preset--font-family--futura);
	font-weight: 500;
	font-size: 0.85rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 200ms ease;
}
.ttl-honey-landing .ttl-cart button.single_add_to_cart_button:hover { background: var(--ttl-terra-dark); color: var(--ttl-cream); }
.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); }

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

/* --- Mobile: stack; the button opens a slide-up bottom 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%; }
	.ttl-honey-landing .ttl-media-col { height: auto; }
	.ttl-honey-landing .ttl-media-col img,
	.ttl-honey-landing .ttl-media-col video { position: static; height: 44vh; }
	.ttl-honey-landing .ttl-panel-col { height: auto; overflow: visible; }

	/* Turn the flip off; the front is normal flow, the back is a bottom sheet. */
	.ttl-honey-landing .ttl-flip { height: auto; perspective: none; }
	.ttl-honey-landing .ttl-flip-inner { transform: none !important; transform-style: flat; height: auto; }
	.ttl-honey-landing .ttl-flip-front { position: static; height: auto; overflow: visible; justify-content: flex-start; padding: clamp(2rem, 8vw, 3rem) clamp(1.25rem, 6vw, 2rem); }
	.ttl-honey-landing .ttl-cta { width: 100%; }

	.ttl-honey-landing .ttl-flip-back {
		position: fixed;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		transform: translateY(100%);
		-webkit-backface-visibility: visible;
		backface-visibility: visible;
		max-height: 88vh;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -12px 40px rgba(38, 51, 46, 0.22);
		z-index: 1000;
		padding: 1.75rem 1.4rem calc(1.5rem + env(safe-area-inset-bottom));
		transition: transform 0.42s cubic-bezier(0.16, 0.84, 0.44, 1);
	}
	.ttl-honey-landing .ttl-drawer-toggle:checked ~ .ttl-flip .ttl-flip-back { transform: translateY(0); }
	.ttl-honey-landing .ttl-cart button.single_add_to_cart_button { flex-basis: 100%; width: 100%; }

	/* Dim scrim behind the sheet. */
	.ttl-honey-landing .ttl-drawer-scrim { display: block; position: fixed; inset: 0; background: rgba(38, 51, 46, 0.4); opacity: 0; visibility: hidden; transition: opacity 0.32s ease; z-index: 999; cursor: pointer; }
	.ttl-honey-landing .ttl-drawer-toggle:checked ~ .ttl-drawer-scrim { opacity: 1; visibility: visible; }
}