/*
Theme Name: This Tiny Life
Theme URI: https://thistinylife.co.uk/
Author: This Tiny Life (built with Claude Code)
Author URI: https://thistinylife.co.uk/
Description: A standalone editorial block theme for This Tiny Life — seasonal food, practical skills, growing, making and life aboard a narrowboat, with a small WooCommerce shop woven in. Built on the Twenty Twenty-Five foundation using native theme.json, templates, template parts and patterns. Headings in Adobe Caslon Pro and body in Futura PT, loaded from the client's own Adobe Fonts Web Project with robust system fallbacks.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.2
Version: 1.6.0
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
--------------------------------------------------------------------------- */

/* ONE link treatment everywhere: a soft underline that gently fades in on
   hover / keyboard focus. Nothing underlined at rest. Applies to every menu
   (header, footer, Journal + Shop category navs), every card link, inline links
   and WooCommerce product-card titles. `text-decoration-color` transitions
   smoothly and survives line wraps. If you add a link anywhere, give it one of
   these hooks (or it will inherit via the containers below) and it just works. */
.tiny-nav a,
.tiny-journal-nav a,
.tiny-footer a,
.tiny-inline-link,
.tiny-link,
.tiny-card__link,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: transparent;
	text-underline-offset: 0.3em;
	transition: text-decoration-color 380ms ease;
}

.tiny-nav a:hover,
.tiny-nav a:focus-visible,
.tiny-journal-nav a:hover,
.tiny-journal-nav a:focus-visible,
.tiny-footer a:hover,
.tiny-footer a:focus-visible,
.tiny-inline-link:hover,
.tiny-inline-link:focus-visible,
.tiny-link:hover,
.tiny-link:focus-visible,
.tiny-card__link:hover,
.tiny-card__link:focus-visible,
.tiny-card:hover .tiny-card__link,
.tiny-card:focus-within .tiny-card__link,
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product:focus-within .woocommerce-loop-product__title {
	text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.tiny-nav a,
	.tiny-journal-nav a,
	.tiny-footer a,
	.tiny-inline-link,
	.tiny-link,
	.tiny-card__link,
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   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);
}

/* ---------------------------------------------------------------------------
   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 three panels stack full width (WordPress stacks columns below
   its breakpoint); keep them flush. */
@media (max-width: 781px) {
	.tiny-gillon .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ---------------------------------------------------------------------------
   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;
}

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

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. */
.tiny-desktop-nav {
	display: none !important;
}

.tiny-mobile-nav {
	display: flex !important;
	justify-self: end;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

/* Show the split desktop nav only when there's comfortably room for it; below
   this the header switches to the centred wordmark + hamburger so the four
   left-hand items never wrap on tablets. */
@media (min-width: 980px) {
	.tiny-desktop-nav {
		display: flex !important;
	}
	.tiny-mobile-nav {
		display: none !important;
	}
	.tiny-header-grid {
		grid-template-columns: 1fr auto 1fr;
	}
}

/* Below that the grid becomes: wordmark centred, menu/basket balanced. */
@media (max-width: 979px) {
	.tiny-header-grid {
		grid-template-columns: 1fr auto 1fr;
	}
	.tiny-header-grid .tiny-header-left {
		visibility: hidden; /* keeps the wordmark optically centred */
	}
}

/* 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).
--------------------------------------------------------------------------- */

.tiny-recipe-split {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

.tiny-recipe-photo {
	order: -1; /* mobile: photo sits right after the intro */
}

@media (min-width: 782px) {
	.tiny-recipe-split {
		flex-direction: row;
		align-items: flex-start;
	}
	.tiny-recipe-text {
		flex: 1 1 52%;
		min-width: 0;
	}
	.tiny-recipe-photo {
		order: 1; /* desktop: photo on the right */
		flex: 1 1 48%;
		position: sticky;
		top: 96px;
	}
}

/* ---------------------------------------------------------------------------
   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,
.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;
	font-family: var(--wp--preset--font-family--futura);
	font-weight: 500;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	text-transform: none;
	transition: background-size 400ms ease, color 400ms ease !important;
}

.wp-block-button__link:hover,
.wp-block-button__link: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;
}

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

/* ---------------------------------------------------------------------------
   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);
}

/* On a terracotta band (newsletter), buttons flip to a cream outline that fills
   cream on hover, so they stay legible. */
.tiny-newsletter .wp-block-button__link {
	border-color: var(--wp--preset--color--cream) !important;
	color: var(--wp--preset--color--cream) !important;
	background-image: linear-gradient(var(--wp--preset--color--cream), var(--wp--preset--color--cream)) !important;
}

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

/* Newsletter email field on the terracotta band. */
.tiny-newsletter input[type="email"] {
	font-family: var(--wp--preset--font-family--futura);
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	padding: 0.95rem 1.1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--cream) 60%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--cream) 12%, transparent);
	color: var(--wp--preset--color--cream);
	border-radius: 0;
	min-width: 0;
	flex: 1 1 auto;
}

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

.tiny-newsletter .tiny-newsletter-form {
	display: flex;
	gap: 0;
	max-width: 440px;
	margin-inline: auto;
}

@media (max-width: 560px) {
	.tiny-newsletter .tiny-newsletter-form {
		flex-direction: column;
		gap: 0.6rem;
	}
}

/* Product detail accordions (native details/summary) — quiet, editorial. */
.tiny-accordion {
	padding: 0.9rem 0;
}

.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 {
	overflow-x: hidden;
	max-width: 100%;
}

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