/* ==========================================================================
   Okay Now Studio — theme styles
   Colours come from theme.json:  --wp--preset--color--{sky|blue|cream|pink|orange|yellow}
   ========================================================================== */

:root {
	--ons-sky: var(--wp--preset--color--sky, #69A8FF);
	--ons-blue: var(--wp--preset--color--blue, #0058FF);
	--ons-cream: var(--wp--preset--color--cream, #E1DBCB);
	--ons-pink: var(--wp--preset--color--pink, #FFC1BE);
	--ons-red: var(--wp--preset--color--orange, #F43800);
	--ons-yellow: var(--wp--preset--color--yellow, #FFDE0D);
	--ons-radius: 22px;
	--ons-stroke: 3px;
	--ons-offset: clamp(6px, 0.63vw, 12px);
	--ons-offset-y: clamp(6px, 0.63vw, 12px);
	--ons-soft: 0 10px 22px rgb(0 0 0 / 0.14);
}

html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	position: relative;
	min-height: 100vh;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

.wp-site-blocks { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Page backgrounds
   -------------------------------------------------------------------------- */
body.ons-bg-pink {
	background-color: #FFD9D9;
	background-image:
		radial-gradient(60vw 40vw at 10% 20%, rgb(255 193 190 / 0.9), transparent 60%),
		radial-gradient(50vw 50vw at 90% 60%, rgb(255 170 170 / 0.55), transparent 60%),
		radial-gradient(40vw 30vw at 30% 90%, rgb(255 232 232 / 0.9), transparent 60%);
	background-attachment: fixed;
	color: var(--ons-red);
}
/* Drop a real texture in assets/img/bg-pink.jpg and uncomment:
body.ons-bg-pink { background: #FFD9D9 url(../img/bg-pink.jpg) center / cover fixed; } */

/* --------------------------------------------------------------------------
   Cloud parallax
   -------------------------------------------------------------------------- */
.ons-sky {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
.ons-cloud {
	position: absolute;
	height: auto;
	max-width: none;
	will-change: transform;
	user-select: none;
}
@media (max-width: 781px) {
	.ons-cloud { width: min(calc(var(--w, 40vw) * 1.6), 80vw) !important; }
}

/* --------------------------------------------------------------------------
   Stacked "sticker" boxes
   Usage: block style "Stack — …" on headings, paragraphs, groups, buttons.
   -------------------------------------------------------------------------- */
[class*="is-style-stack-"] {
	--fill: var(--ons-cream);
	--line: var(--ons-blue);
	--ink: var(--ons-blue);
}
.is-style-stack-cream  { --fill: var(--ons-cream);  --line: var(--ons-blue);  --ink: var(--ons-blue); }
.is-style-stack-blue   { --fill: var(--ons-blue);   --line: var(--ons-cream); --ink: var(--ons-cream); }
.is-style-stack-pink   { --fill: var(--ons-pink);   --line: var(--ons-red);   --ink: var(--ons-red); }
.is-style-stack-orange { --fill: var(--ons-red);    --line: var(--ons-cream); --ink: var(--ons-cream); }
.is-style-stack-yellow { --fill: var(--ons-yellow); --line: var(--ons-red);   --ink: var(--ons-red); }
.is-style-stack-cream-red { --fill: var(--ons-cream); --line: var(--ons-red); --ink: var(--ons-red); }

:where(h1, h2, h3, h4, h5, h6, p, ul, ol, .wp-block-group, figure)[class*="is-style-stack-"],
.wp-block-button[class*="is-style-stack-"] .wp-block-button__link,
.ons-stack {
	background: var(--fill) !important;
	color: var(--ink) !important;
	border: var(--ons-stroke) solid var(--line) !important;
	border-radius: var(--ons-radius);
	box-shadow:
		var(--ons-offset) var(--ons-offset-y) 0 calc(var(--ons-stroke) * -1) var(--fill),
		var(--ons-offset) var(--ons-offset-y) 0 0 var(--line),
		var(--ons-soft);
	margin-right: var(--ons-offset);
	margin-bottom: calc(var(--ons-offset) * 1.35 + 0.25rem);
}

/* Headings in a stack hug their text */
:where(h1, h2, h3, h4, h5, h6)[class*="is-style-stack-"] {
	width: fit-content;
	max-width: 100%;
	padding: 0.12em 0.3em 0.02em;
	border-radius: calc(var(--ons-radius) * 1.1);
}
:where(p, ul, ol, .wp-block-group)[class*="is-style-stack-"] {
	padding: clamp(0.9rem, 2vw, 1.4rem) clamp(1rem, 2.2vw, 1.6rem);
}
ul[class*="is-style-stack-"], ol[class*="is-style-stack-"] { list-style: none; }
ul[class*="is-style-stack-"] li::before { content: "- "; }
figure[class*="is-style-stack-"] { overflow: hidden; padding: 0; }
figure[class*="is-style-stack-"] img { border-radius: calc(var(--ons-radius) - var(--ons-stroke)); display: block; }

/* Buttons */
.wp-block-button__link,
.wp-element-button {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wp-block-button[class*="is-style-stack-"] .wp-block-button__link { border-radius: 14px; }
.wp-block-button[class*="is-style-stack-"] .wp-block-button__link:hover,
.ons-stack:is(a, button):hover { transform: translate(2px, 3px); }
.wp-block-button[class*="is-style-stack-"] .wp-block-button__link:active { transform: translate(var(--ons-offset), var(--ons-offset-y)); box-shadow: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.ons-header {
	padding-top: clamp(1rem, 2vw, 1.75rem);
	padding-bottom: 1rem;
	gap: clamp(1rem, 3vw, 3rem);
}
.ons-logo {
	margin: 0;
	flex-shrink: 0;
	width: clamp(84px, 9vw, 140px);
	aspect-ratio: 230.539 / 142.709;
	background: url(../img/logo-ons.svg) center / contain no-repeat;
	filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.14));
}
.ons-logo a {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	text-indent: 110%;
	white-space: nowrap;
	color: transparent;
}

.ons-nav .wp-block-navigation-item__content { color: var(--ons-cream); text-decoration: none; }
.ons-nav .wp-block-navigation-item__content:hover { color: var(--ons-blue); }
.ons-bg-pink .ons-nav .wp-block-navigation-item__content { color: var(--ons-red); }
.ons-bg-pink .ons-nav .wp-block-navigation-item__content:hover { color: var(--ons-blue); }
.ons-nav .wp-block-navigation__responsive-container-open,
.ons-nav .wp-block-navigation__responsive-container-close { color: var(--ons-cream); }
.ons-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--ons-sky) !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: 3rem;
}

.ons-header-cta { gap: 1rem; }
.ons-header-cta .wp-block-button__link { font-size: clamp(1.1rem, 1.8vw, 1.6rem); padding: 0.3em 0.5em 0.2em; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.ons-footer { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--40); }
.ons-footer p { text-transform: uppercase; font-size: var(--wp--preset--font-size--large); margin: 0; }
.ons-bg-pink .ons-footer p:not(.ons-logo) { color: var(--ons-red); }

/* --------------------------------------------------------------------------
   Section backgrounds (home page)
   -------------------------------------------------------------------------- */
.ons-section { position: relative; padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.ons-section--grass {
	background: #A3CC5C url(../img/bg-grass.webp) center / cover;
}
.ons-section--tiles {
	background: url(../img/bg-tiles.webp) center bottom / cover no-repeat;
	padding-bottom: calc(var(--wp--preset--spacing--60) + 4vw);
}

/* Stickers (decorative PNGs placed over sections) */
.ons-sticker { position: absolute; z-index: 3; pointer-events: none; margin: 0 !important; }
.ons-sticker img { width: 100%; height: auto; }

/* Image placeholder while final assets are pending */
.ons-ph {
	display: grid;
	place-items: center;
	min-height: 220px;
	border: 3px dashed currentColor;
	border-radius: var(--ons-radius);
	opacity: 0.8;
	text-align: center;
	font-size: 1rem !important;
	padding: 1rem;
}

/* Numbered captions under images ("1. Pinch Pot") */
.ons-caption {
	display: inline-block;
	font-size: 1.05rem !important;
	padding: 0.2em 0.6em !important;
	border-radius: 10px !important;
	margin-top: 0.6rem !important;
}

/* --------------------------------------------------------------------------
   WooCommerce — product grid
   -------------------------------------------------------------------------- */
.ons-grid .wc-block-product-template,
.ons-grid ul.wc-block-product-template {
	row-gap: clamp(2rem, 5vw, 4.5rem);
	column-gap: clamp(1rem, 4vw, 4rem);
}
.ons-grid .wc-block-components-product-image,
.ons-grid .wc-block-components-product-image img {
	background: transparent !important;
	border-radius: 0;
}
.ons-grid .wc-block-components-product-image img {
	aspect-ratio: 1;
	object-fit: contain;
	transition: transform 0.35s cubic-bezier(.2, .9, .3, 1.3);
}
.ons-grid li:hover .wc-block-components-product-image img { transform: rotate(-6deg) scale(1.05); }
.ons-grid .wp-block-post-title {
	font-family: var(--wp--preset--font-family--body);
	text-transform: none;
	font-size: clamp(1rem, 1.4vw, 1.3rem);
	color: var(--ons-cream);
	margin-top: 0.75rem;
	margin-bottom: 0.1rem;
}
.ons-grid .wp-block-post-title a { text-decoration: none; }
.ons-grid .wc-block-components-product-price { color: var(--ons-cream); font-size: clamp(1rem, 1.4vw, 1.3rem); }
.ons-grid--images-only .wp-block-post-title,
.ons-grid--images-only .wc-block-components-product-price { display: none; }

/* --------------------------------------------------------------------------
   WooCommerce — single product
   -------------------------------------------------------------------------- */
.ons-product-media .woocommerce-product-gallery,
.ons-product-media .woocommerce-product-gallery__image img,
.ons-product-media .wc-block-components-product-image img {
	border-radius: 36px;
	overflow: hidden;
}
.ons-product-media .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; }
.ons-product-media .flex-control-thumbs { display: flex; gap: 0.75rem; margin-top: 0.75rem !important; }
.ons-product-media .flex-control-thumbs li { width: 80px !important; }
.ons-product-media .flex-control-thumbs img { border-radius: 12px; }

.ons-product-title { width: 100% !important; font-size: var(--wp--preset--font-size--xx-large) !important; }
.ons-product-meta, .ons-product-meta p { color: var(--ons-cream); font-size: var(--wp--preset--font-size--large); line-height: 1.1; margin: 0; }
.ons-product-price .wc-block-components-product-price,
.ons-product-price .amount {
	font-family: var(--wp--preset--font-family--display);
	color: var(--ons-pink);
	font-size: var(--wp--preset--font-size--giant);
	line-height: 1;
}
.ons-product-cart form.cart { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin: 0; }
.ons-product-cart .quantity input { border-radius: 12px; border: 3px solid var(--ons-blue); padding: 0.4em; font: inherit; width: 4em; }
.ons-product-cart .stock { color: var(--ons-cream); }
.ons-product-cart .out-of-stock { color: var(--ons-red); }

/* All WooCommerce buttons get the cream stack look */
.single_add_to_cart_button,
.wc-block-components-button:not(.is-link),
.woocommerce a.button,
.woocommerce button.button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	--fill: var(--ons-cream); --line: var(--ons-blue); --ink: var(--ons-blue);
	background: var(--fill) !important;
	color: var(--ink) !important;
	border: var(--ons-stroke) solid var(--line) !important;
	border-radius: 14px !important;
	box-shadow:
		var(--ons-offset) var(--ons-offset-y) 0 calc(var(--ons-stroke) * -1) var(--fill),
		var(--ons-offset) var(--ons-offset-y) 0 0 var(--line),
		var(--ons-soft) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 900 !important;
	text-transform: uppercase;
	font-size: clamp(1.1rem, 1.8vw, 1.6rem) !important;
	padding: 0.35em 0.6em 0.25em !important;
	transition: transform 0.15s ease;
}
.single_add_to_cart_button:hover,
.wc-block-components-button:not(.is-link):hover { transform: translate(2px, 3px); }

/* --------------------------------------------------------------------------
   WooCommerce — cart, checkout, notices (sit in a cream panel)
   -------------------------------------------------------------------------- */
.ons-panel {
	background: var(--ons-cream);
	color: var(--ons-blue);
	border: var(--ons-stroke) solid var(--ons-blue);
	border-radius: 28px;
	padding: clamp(1rem, 3vw, 2.5rem);
	box-shadow: var(--ons-soft);
}
.ons-panel a { color: var(--ons-blue); }
.ons-panel input, .ons-panel select, .ons-panel textarea,
.ons-panel .wc-block-components-text-input input,
.ons-panel .wc-block-components-combobox .components-combobox-control__input {
	border-radius: 12px !important;
	border: 2px solid var(--ons-blue) !important;
	background: #fff !important;
	font-family: var(--wp--preset--font-family--body);
}
.ons-panel .wc-block-components-totals-item__value,
.ons-panel .wc-block-components-product-price { color: var(--ons-blue); }

.wc-block-components-notice-banner { border-radius: 16px; font-family: var(--wp--preset--font-family--body); }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.ons-right { margin-left: auto !important; }
.has-text-align-right.ons-right { display: block; }
@media (max-width: 781px) {
	.ons-hide-mobile { display: none !important; }
	.ons-product-cart form.cart { justify-content: flex-start; }
	.ons-product-price { text-align: left !important; }
}

/* Headings/text inside a stacked group inherit the group's ink colour */
[class*="is-style-stack-"] :where(h1, h2, h3, h4, h5, h6, p, li, a) { color: inherit; }
[class*="is-style-stack-"] :where(h1, h2, h3, h4, h5, h6) { margin-top: 0; }
[class*="is-style-stack-"] > :last-child { margin-bottom: 0; }

/* "Get your hands dirty" sticker */
.ons-burst {
	width: clamp(180px, 20vw, 300px);
	aspect-ratio: 1349 / 1188;
	background: url(../img/stickers/hands-dirty.webp) center / contain no-repeat;
	margin-left: auto !important;
	rotate: -4deg;
	filter: drop-shadow(0 8px 14px rgb(0 0 0 / 0.18));
	animation: ons-wobble 6s ease-in-out infinite;
}
.ons-burst > * { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
@keyframes ons-wobble { 50% { rotate: 3deg; scale: 1.04; } }
@media (prefers-reduced-motion: reduce) { .ons-burst { animation: none; } }

/* Testimonial */
.ons-quote p:first-child { font-size: var(--wp--preset--font-size--large); }
.ons-quote p:last-child { text-align: right; font-size: 1rem; }

/* Stacked headings hug their text but stay left-aligned inside constrained layouts */
.is-layout-constrained > :is(h1, h2, h3, h4, h5, h6)[class*="is-style-stack-"] {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}
.is-layout-constrained > :is(h1, h2, h3, h4, h5, h6)[class*="is-style-stack-"].alignwide {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
}
.wp-block-heading small { font-size: 0.55em; vertical-align: middle; }

/* Header / footer sit edge-to-edge but keep the page gutter */
.ons-header, .ons-footer {
	padding-left: var(--wp--style--root--padding-left, 1.5rem) !important;
	padding-right: calc(var(--wp--style--root--padding-right, 1.5rem) + var(--ons-offset)) !important;
}

/* Product grids: 4 across on desktop, 2 on phones */
.ons-grid .wc-block-product-template.is-flex-container,
.ons-grid .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.ons-grid .wc-block-product-template > li { width: auto !important; margin: 0 !important; }
.ons-grid .wc-block-components-product-image { max-width: 78%; margin-inline: auto; }
@media (max-width: 781px) {
	.ons-grid .wc-block-product-template,
	.ons-grid .wc-block-product-template.is-flex-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.ons-grid .wc-block-components-product-image { max-width: 92%; }
}

/* Product gallery fills its column like the wireframe */
.ons-product-media > *,
.ons-product-media .woocommerce-product-gallery,
.ons-product-media .woocommerce-product-gallery .flex-viewport {
	width: 100% !important;
	max-width: none !important;
}
.ons-product-media .woocommerce-product-gallery__image img { width: 100%; height: auto; }
.ons-product-media .woocommerce-product-gallery__trigger { top: 1rem !important; right: 1rem !important; }
/* One-off pieces: "1 in stock" is noise; still show "Out of stock" */
.ons-product-cart .stock.in-stock { display: none; }

/* Left-justified constrained groups: stacked headings hug the left edge */
.is-layout-constrained.is-content-justification-left > :is(h1, h2, h3, h4, h5, h6)[class*="is-style-stack-"] { margin-left: 0 !important; }

/* --------------------------------------------------------------------------
   Photos
   -------------------------------------------------------------------------- */
.ons-photo { margin: 0; }
.ons-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 24px;
	box-shadow: var(--ons-soft);
}
.ons-photo--hero img { aspect-ratio: 5 / 4; border-radius: 32px; }
.ons-photo--wide img { aspect-ratio: 4 / 3; }
.ons-rel { position: relative; }

/* --------------------------------------------------------------------------
   Stickers — cut-out ceramics placed over sections
   -------------------------------------------------------------------------- */
.ons-section { isolation: auto; }
.ons-sticker {
	position: absolute !important;
	z-index: 4;
	pointer-events: none;
	margin: 0 !important;
	max-width: none !important;
	filter: drop-shadow(0 12px 18px rgb(0 0 0 / 0.2));
}
.ons-sticker img { display: block; width: 100%; height: auto; }

.ons-sticker--candles { width: clamp(70px, 9vw, 150px); top: -18%; left: 6%; rotate: -8deg; }
.ons-sticker--poodle  { width: clamp(70px, 8vw, 130px); bottom: 3%; right: 8%; }
.ons-sticker--flame   { width: clamp(70px, 7vw, 120px); top: -120px; left: 40%; rotate: 8deg; }
.ons-sticker--bowl    { width: clamp(150px, 20vw, 320px); bottom: -8%; right: 0; }
.ons-sticker--crying  { width: clamp(150px, 18vw, 280px); top: 42%; right: 12%; rotate: -10deg; }
.ons-sticker--whale   { width: clamp(150px, 17vw, 280px); bottom: -13rem; right: 5vw; z-index: 6; }

.ons-section--last { padding-bottom: var(--wp--preset--spacing--70); }
.ons-section:has(.ons-sticker--flame) .wp-block-group:has(> .ons-sticker--flame) { position: relative; margin-top: 150px; }

@media (max-width: 781px) {
	.ons-sticker--candles { top: -16%; left: 3%; right: auto; width: 64px; }
	.ons-photo:not(.ons-photo--hero) img { aspect-ratio: 1; }
	.ons-sticker--flame   { top: -90px; left: auto; right: 10%; }
	.ons-sticker--bowl    { bottom: -4%; }
	.ons-sticker--crying  { top: auto; bottom: 34%; right: 2%; width: 120px; }
	.ons-sticker--whale   { width: 110px; }
}


/* ==========================================================================
   Wireframe calibration (measured from the 1920px artboards)
   ========================================================================== */

/* Header: logo 147px at 45/36; nav 32px text from x=268, 53px apart;
   Book/Shop 40px text in 138x58 boxes, right edge 37px from the viewport. */
.ons-header {
	padding-top: clamp(1rem, 1.875vw, 36px) !important;
	padding-left: clamp(1rem, 2.35vw, 45px) !important;
	padding-right: clamp(1rem, 1.93vw, 37px) !important;
}
.ons-header > .wp-block-group { gap: clamp(1.25rem, 3.96vw, 76px) !important; }
.ons-logo { width: clamp(84px, 7.66vw, 147px); }
.ons-nav { font-size: clamp(1.05rem, 1.56vw, 30px) !important; padding-top: clamp(0.25rem, 0.3vw, 6px) !important; }
.ons-nav .wp-block-navigation__container { gap: clamp(1.25rem, 2.76vw, 53px) !important; }
.ons-header-cta { gap: clamp(0.75rem, 1.7vw, 33px) !important; }
.ons-header-cta .wp-block-button__link {
	font-size: clamp(1.1rem, 2.08vw, 40px) !important;
	padding: 0.2em 0.5em 0.12em !important;
	border-radius: 14px !important;
}

/* Footer: logo like the header; copyright 36px */
.ons-footer { padding-left: clamp(1rem, 2.35vw, 45px) !important; padding-bottom: clamp(1.5rem, 2.4vw, 46px) !important; gap: clamp(1rem, 2.3vw, 44px) !important; }
.ons-footer p:not(.ons-logo) { font-size: clamp(1.25rem, 1.875vw, 36px) !important; line-height: 1; }

/* Page titles (SHOP / BOOK NOW / product name): 112px in a box with 12px offset */
main h1[class*="is-style-stack-"],
main .wp-block-post-title[class*="is-style-stack-"],
main .wp-block-query-title[class*="is-style-stack-"] {
	font-size: clamp(3.2rem, 5.83vw, 112px) !important;
	padding: 0.1em 0.18em 0 !important;
	border-radius: clamp(18px, 1.5vw, 28px);
}

/* Per-template top spacing (title/image top: shop 326, product 305, book 264) */
.ons-main--shop { padding-top: clamp(2.5rem, 6.6vw, 127px) !important; }
.ons-main--product { padding-top: clamp(2rem, 4.6vw, 88px) !important; }
.ons-main--page { padding-top: clamp(2rem, 5.3vw, 101px) !important; }

/* Shop grid: 4 columns across ~1864px; images in a 290x340 box, centred;
   title + price 27px, 36px apart */
.ons-main--shop h1 { margin-left: clamp(0px, 3.3vw, 63px) !important; margin-bottom: clamp(2rem, 8.9vw, 171px) !important; }
.ons-grid .wc-block-components-product-image { max-width: 62%; }
.ons-grid .wc-block-components-product-image img { aspect-ratio: 290 / 340 !important; object-fit: contain; }
.ons-grid .wp-block-post-title,
.ons-grid .wc-block-components-product-price { font-size: clamp(1rem, 1.4vw, 27px) !important; line-height: 1.33; }
.ons-grid .wp-block-post-title { margin-top: clamp(0.75rem, 1.8vw, 34px) !important; margin-bottom: 0 !important; }
.ons-grid .wc-block-product-template { row-gap: clamp(2rem, 2.4vw, 45px) !important; column-gap: 0 !important; }

/* Product page: image 934px (4:5, 40px radius); right column starts 69px after */
.ons-product-cols { gap: clamp(1.5rem, 3.6vw, 69px) !important; }
.ons-product-media .woocommerce-product-gallery__image img,
.ons-product-media .woocommerce-product-gallery { border-radius: clamp(20px, 2.1vw, 40px) !important; }
.ons-product-media .woocommerce-product-gallery__image img { aspect-ratio: 4 / 5; object-fit: cover; }
.ons-product-title { margin-top: clamp(0px, 0.85vw, 16px) !important; margin-bottom: 0 !important; }
.ons-product-meta, .ons-product-meta p {
	font-size: clamp(1.1rem, 2.35vw, 45px) !important;
	line-height: 1.05 !important;
	padding-left: clamp(0.5rem, 1.46vw, 28px);
	margin-top: clamp(1rem, 2.45vw, 47px) !important;
}
.ons-product-price { margin-top: clamp(1.5rem, 4.2vw, 81px) !important; }
.ons-product-price .wc-block-components-product-price,
.ons-product-price .amount { font-size: clamp(3.5rem, 7.1vw, 136px) !important; }
.ons-product-price, .ons-product-cart { padding-right: var(--ons-offset); }
.ons-product-cart { margin-top: clamp(0.75rem, 0.9vw, 17px) !important; }
.woocommerce .ons-product-cart button.single_add_to_cart_button.button,
.ons-product-cart .single_add_to_cart_button { font-size: clamp(1.1rem, 2.08vw, 40px) !important; padding: 0.2em 0.5em 0.12em !important; }
.ons-related { margin-top: clamp(3rem, 7.1vw, 137px) !important; }
.ons-related .wc-block-components-product-image { max-width: 63%; }
.ons-related .wc-block-components-product-image img { aspect-ratio: 1 !important; }

/* Book page: T&Cs box hugs its text, 34px text */
.ons-bg-pink main ul[class*="is-style-stack-"] {
	width: fit-content;
	font-size: clamp(1.1rem, 1.77vw, 34px);
	line-height: 1.18;
	margin-top: clamp(1rem, 1.7vw, 32px) !important;
	padding: 0.5em 0.6em !important;
	color: var(--ons-cream) !important;
}
.ons-bg-pink main .wp-block-post-content > * + * { margin-top: clamp(2rem, 4.2vw, 80px); }

/* Book page: content left-aligned under the title (x=305) */
.ons-bg-pink main .wp-block-post-content.is-layout-constrained > * {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
}

/* Gallery thumbnails float inside the bottom-left of the main image (wireframe has no strip) */
.ons-product-media .woocommerce-product-gallery { position: relative; }
.ons-product-media .flex-control-thumbs {
	position: absolute;
	left: clamp(0.75rem, 1.2vw, 24px);
	bottom: clamp(0.75rem, 1.2vw, 24px);
	margin: 0 !important;
	z-index: 2;
}
.ons-product-media .flex-control-thumbs li { width: clamp(44px, 3.4vw, 64px) !important; }
.ons-product-media .flex-control-thumbs img { border: 2px solid var(--ons-cream); opacity: 0.8; }
.ons-product-media .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--ons-blue); }

/* Fine-tuning against the artboards */
main .ons-product-title.wp-block-post-title[class*="is-style-stack-"] { font-size: clamp(2.8rem, 5.1vw, 98px) !important; }
.ons-product-price .wc-block-components-product-price,
.ons-product-price .amount { font-size: clamp(3.5rem, 7.4vw, 142px) !important; }
.ons-header-cta .wp-block-button__link { font-size: clamp(1.1rem, 1.98vw, 38px) !important; }
.is-layout-constrained > h1.alignwide[class*="is-style-stack-"].wp-block-heading,
.ons-main--shop.is-layout-constrained > h1[class*="is-style-stack-"] {
	margin-left: max(clamp(0px, 3.3vw, 63px), calc((100% - var(--wp--style--global--wide-size)) / 2 + clamp(0px, 3.3vw, 63px))) !important;
}
/* Shop grid rhythm: 290x340 image box, plate ~270 wide inside it, rows 440px apart */
.ons-grid .wc-block-components-product-image { max-width: 63% !important; }
.ons-grid .wc-block-components-product-image img { padding: 3.5%; box-sizing: border-box; }
.ons-grid .wp-block-post-title { margin-top: clamp(0.6rem, 1.2vw, 23px) !important; }
.ons-grid .wp-block-post-title, .ons-grid .wc-block-components-product-price { line-height: 1.37 !important; }
.ons-grid .wc-block-product-template { row-gap: clamp(1.5rem, 1.25vw, 24px) !important; }
.ons-bg-pink .ons-nav .wp-block-navigation__responsive-container-open,
.ons-bg-pink .ons-nav .wp-block-navigation__responsive-container-close { color: var(--ons-red); }

/* Footer always sits at the bottom of the screen, even on short/empty pages */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group:has(> main) { flex: 1 0 auto; }
.wp-site-blocks > footer { margin-top: auto !important; }

/* ==========================================================================
   Shop category filter
   ========================================================================== */
.ons-main--shop h1 { margin-bottom: clamp(1.25rem, 2.1vw, 40px) !important; }
.ons-filter { margin-left: clamp(0px, 3.3vw, 63px); margin-bottom: clamp(2rem, 6.5vw, 125px) !important; }
.ons-filter ul {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.6rem, 1.2vw, 22px);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ons-filter__link {
	--fill: var(--ons-cream); --line: var(--ons-blue); --ink: var(--ons-blue);
	display: inline-block;
	padding: 0.25em 0.6em 0.15em;
	font-size: clamp(1rem, 1.45vw, 28px);
	text-transform: uppercase;
	text-decoration: none;
	background: var(--fill);
	color: var(--ink) !important;
	border: var(--ons-stroke) solid var(--line);
	border-radius: 12px;
	box-shadow:
		5px 6px 0 calc(var(--ons-stroke) * -1) var(--fill),
		5px 6px 0 0 var(--line);
	transition: transform 0.15s ease;
}
.ons-filter__link:hover { transform: translate(2px, 3px); }
.ons-filter__link.is-active { --fill: var(--ons-blue); --line: var(--ons-cream); --ink: var(--ons-cream); }
.ons-filter__link:focus-visible { outline: 3px solid var(--ons-cream); outline-offset: 4px; }

/* ==========================================================================
   Cart, checkout, account — cream panel with blue ink
   ========================================================================== */
.ons-panel {
	--ons-soft: 0 14px 30px rgb(0 0 0 / 0.16);
	font-size: clamp(1rem, 1.25vw, 22px);
	line-height: 1.3;
	box-shadow:
		var(--ons-offset) var(--ons-offset-y) 0 calc(var(--ons-stroke) * -1) var(--ons-cream),
		var(--ons-offset) var(--ons-offset-y) 0 0 var(--ons-blue),
		var(--ons-soft);
}
.ons-panel :is(h1, h2, h3, h4, .wc-block-components-title, .wc-block-cart__totals-title) {
	font-family: var(--wp--preset--font-family--display) !important;
	color: var(--ons-blue) !important;
	text-transform: uppercase;
	font-size: clamp(1.5rem, 2.3vw, 44px) !important;
	line-height: 1;
	letter-spacing: 0 !important;
}
.ons-panel, .ons-panel :is(p, span, td, th, label, li, .wc-block-components-product-name) { color: var(--ons-blue); }
.ons-panel .wc-block-components-product-name { font-size: 1.15em; text-decoration: none; }
.ons-panel .wc-block-cart-item__image img,
.ons-panel .wc-block-components-order-summary-item__image img { background: transparent; border-radius: 0; }
.ons-panel table, .ons-panel tr, .ons-panel td, .ons-panel th,
.ons-panel .wc-block-components-totals-wrapper,
.ons-panel .wc-block-components-panel,
.ons-panel .wc-block-cart-items__header,
.ons-panel .wc-block-components-order-summary-item { border-color: rgb(0 88 255 / 0.25) !important; }
.ons-panel .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.ons-panel .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.4rem, 2vw, 38px);
	text-transform: uppercase;
}
/* Form fields */
.ons-panel .wc-block-components-text-input input,
.ons-panel .wc-block-components-text-input textarea,
.ons-panel .wc-blocks-components-select__select,
.ons-panel .wc-block-components-combobox .components-combobox-control__input,
.ons-panel input.input-text, .ons-panel select, .ons-panel textarea {
	border: 2px solid var(--ons-blue) !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: var(--ons-blue) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 900;
}
.ons-panel .wc-block-components-text-input label,
.ons-panel .wc-blocks-components-select__label { color: rgb(0 88 255 / 0.7) !important; }
.ons-panel :is(input, select, textarea):focus { outline: 3px solid var(--ons-red) !important; outline-offset: 1px; box-shadow: none !important; }
.ons-panel .wc-block-components-radio-control__option,
.ons-panel .wc-block-components-radio-control-accordion-option { border-color: var(--ons-blue) !important; border-radius: 12px !important; }
.ons-panel input[type="radio"], .ons-panel input[type="checkbox"] { accent-color: var(--ons-blue); }
/* Quantity stepper */
.ons-panel .wc-block-components-quantity-selector { border: 2px solid var(--ons-blue); border-radius: 12px; }
.ons-panel .wc-block-components-quantity-selector::after { display: none; }
.ons-panel .wc-block-components-quantity-selector input,
.ons-panel .wc-block-components-quantity-selector button { color: var(--ons-blue); font-weight: 900; }
/* Links / small print */
.ons-panel a:not(.wc-block-components-button):not(.button) { color: var(--ons-blue); text-underline-offset: 3px; }
.ons-panel .wc-block-cart-item__remove-link { color: var(--ons-red) !important; font-size: 0.85em; }
.ons-panel .wc-block-components-checkout-return-to-cart-button { color: var(--ons-blue) !important; }
/* Notices */
.wc-block-components-notice-banner, .woocommerce-message, .woocommerce-info, .woocommerce-error {
	border: var(--ons-stroke) solid var(--ons-blue) !important;
	background: var(--ons-cream) !important;
	color: var(--ons-blue) !important;
	border-radius: 16px !important;
	font-weight: 900;
}
.wc-block-components-notice-banner.is-error, .woocommerce-error { border-color: var(--ons-red) !important; color: var(--ons-red) !important; }
.wc-block-components-notice-banner > svg { fill: currentColor; background: transparent !important; }
/* Empty cart */
.ons-panel .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title { font-size: clamp(1.5rem, 2.6vw, 50px) !important; }
.ons-panel .wp-block-woocommerce-empty-cart-block .wp-block-separator { display: none; }

/* My Account (classic markup) */
.ons-panel .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ons-panel .woocommerce-MyAccount-navigation a {
	display: inline-block; padding: 0.3em 0.7em 0.2em; border: 2px solid var(--ons-blue); border-radius: 12px;
	text-decoration: none; text-transform: uppercase;
}
.ons-panel .woocommerce-MyAccount-navigation .is-active a { background: var(--ons-blue); color: var(--ons-cream) !important; }
.ons-panel .woocommerce-MyAccount-navigation,
.ons-panel .woocommerce-MyAccount-content { float: none !important; width: 100% !important; }
.ons-panel .woocommerce form.login, .ons-panel .woocommerce form.register,
.ons-panel form.woocommerce-form-login, .ons-panel form.woocommerce-form-register {
	border: 2px solid rgb(0 88 255 / 0.3) !important; border-radius: 16px !important;
}

@media (max-width: 781px) {
	.ons-filter { margin-left: 0; }
	.ons-panel { padding: 1rem !important; border-radius: 20px; }
}
.ons-panel .wc-block-components-order-summary-item .wc-block-components-product-name,
.ons-panel h3.wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 1.1em !important;
	text-transform: none;
	line-height: 1.2;
}

/* ==========================================================================
   Book page — booking frame (blue outline stacked box, like the wireframe)
   ========================================================================== */
.ons-booking {
	--fill: #F2F0EC; --line: var(--ons-blue); --ink: #1A1A1A;
	background: var(--fill);
	color: var(--ink);
	border: var(--ons-stroke) solid var(--line);
	border-radius: clamp(18px, 1.6vw, 30px);
	box-shadow:
		var(--ons-offset) var(--ons-offset-y) 0 calc(var(--ons-stroke) * -1) var(--fill),
		var(--ons-offset) var(--ons-offset-y) 0 0 var(--line),
		var(--ons-soft);
	min-height: clamp(360px, 32vw, 620px);
	max-width: 1326px;
	overflow: hidden;
	padding: 0 !important;
}
.ons-booking iframe { display: block; width: 100%; min-height: inherit; border: 0; }
.ons-booking__placeholder {
	display: grid;
	place-items: center;
	min-height: inherit;
	padding: 2rem;
	text-align: center;
	color: var(--ons-blue);
	font-size: clamp(1.1rem, 1.6vw, 30px);
}
.ons-bg-pink main .wp-block-post-content > .ons-booking { margin-top: clamp(2rem, 4.2vw, 80px); }

/* ==========================================================================
   Coming soon page — one stacked cream/blue title centred on the sky
   ========================================================================== */
.ons-coming-soon {
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	place-items: center;
	padding: 2rem 1rem !important;
	margin: 0 !important;
}
.ons-coming-soon h1[class*="is-style-stack-"] {
	margin: 0 auto !important;
	font-size: clamp(2.6rem, 6.25vw, 120px) !important;
	line-height: 0.95;
	padding: 0.14em 0.3em 0.04em !important;
	border-radius: clamp(18px, 1.6vw, 30px);
}