/**
 * Oak Office storefront.
 *
 * Palette and type are taken from 01_Brand_Kit/Colors_Fonts/brand_kit.json.
 * Keep them as custom properties — three separate regressions on the previous
 * project came from a hard-coded colour in one rule quietly disagreeing with
 * the token everywhere else.
 *
 * Selectors are prefixed .oo- and most are scoped under .oo-site, the class
 * the header template puts on <body>. A block theme's own styles still load
 * underneath, and an unscoped rule loses to them on specificity in ways that
 * show up as invisible text rather than as an obvious error.
 */

:root {
	--oo-cream: #f8f4eb;
	--oo-oat: #e6dccb;
	--oo-warm-beige: #d9c3a7;
	--oo-terracotta: #b35f4a;
	--oo-walnut: #5a3e2b;
	--oo-forest: #2f4f3e;
	--oo-forest-deep: #243d30;
	--oo-charcoal: #2b2b2b;
	--oo-muted: #6b625a;
	--oo-white: #fff;

	--oo-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--oo-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--oo-radius: 10px;
	--oo-radius-lg: 18px;
	--oo-gutter: 20px;
	--oo-measure: 1240px;
}

/* -------------------------------------------------------------------------
 * Foundations
 * ---------------------------------------------------------------------- */

body.oo-site {
	margin: 0;
	background: var(--oo-white);
	color: var(--oo-charcoal);
	font-family: var(--oo-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.oo-site *,
.oo-site *::before,
.oo-site *::after {
	box-sizing: border-box;
}

.oo-site img {
	max-width: 100%;
	height: auto;
}

/*
 * Zero specificity on purpose. As ".oo-site a" this outranked the theme rule
 * that colours WooCommerce block buttons white, and the Cart block's
 * "Proceed to Checkout" link rendered as dark text on a black button.
 */
:where(.oo-site) a {
	color: inherit;
}

.oo-shell {
	width: 100%;
	max-width: var(--oo-measure);
	margin: 0 auto;
	padding-left: var(--oo-gutter);
	padding-right: var(--oo-gutter);
}

.oo-skip {
	position: absolute;
	left: -9999px;
}

.oo-skip:focus {
	left: 16px;
	top: 16px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--oo-forest);
	color: var(--oo-white);
	border-radius: var(--oo-radius);
}

.oo-site h1,
.oo-site h2,
.oo-site h3 {
	font-family: var(--oo-serif);
	color: var(--oo-walnut);
	line-height: 1.15;
	font-weight: 600;
	margin: 0 0 16px;
}

.oo-eyebrow {
	margin: 0 0 10px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--oo-terracotta);
}

.oo-site .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.oo-site :focus-visible {
	outline: 2px solid var(--oo-forest);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Buttons
 *
 * Variants are written as .oo-button.oo-button--x so they outrank the base
 * rule. The base includes "button.oo-button", whose element selector made it
 * more specific than a single variant class, and it silently reset the
 * secondary button outline to transparent — the "Add to quote" button rendered
 * as bare text until this was caught in a real WordPress render.
 *
 * Specificity is deliberate here. A block theme's own button rules are often
 * more specific than a plain class, and a losing rule shows up as navy text on
 * a navy button rather than as an obvious error — check computed styles after
 * any change, do not eyeball it.
 * ---------------------------------------------------------------------- */

.oo-site .oo-button,
.oo-site button.oo-button,
.oo-site a.oo-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--oo-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	padding: 15px 28px;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.oo-site .oo-button.oo-button--primary {
	background: var(--oo-forest);
	color: var(--oo-white);
	border-color: var(--oo-forest);
}

.oo-site .oo-button.oo-button--primary:hover {
	background: var(--oo-walnut);
	border-color: var(--oo-walnut);
	color: var(--oo-white);
}

.oo-site .oo-button.oo-button--secondary {
	background: transparent;
	color: var(--oo-forest);
	border-color: var(--oo-forest);
}

.oo-site .oo-button.oo-button--secondary:hover {
	background: var(--oo-forest);
	color: var(--oo-white);
}

.oo-site .oo-button.oo-button--ghost {
	background: rgba(255, 255, 255, 0.85);
	color: var(--oo-walnut);
	border-color: transparent;
}

.oo-site .oo-button.oo-button--ghost:hover {
	background: var(--oo-white);
}

.oo-site .oo-button.oo-button--light {
	background: var(--oo-cream);
	color: var(--oo-forest);
	border-color: var(--oo-cream);
}

.oo-site .oo-button.oo-button--light:hover {
	background: var(--oo-white);
	border-color: var(--oo-white);
}

/*
 * WooCommerce block buttons (Cart, Checkout, mini-cart) in the brand style.
 * They carry .wp-element-button, which the active theme styles; the doubled
 * class keeps these rules ahead of it whatever the theme ships.
 */
.oo-site .wc-block-components-button.wp-element-button:not(.is-link),
.oo-site .wc-block-cart__submit-button.wp-element-button {
	background: var(--oo-forest);
	color: var(--oo-white);
	border-radius: 999px;
	font-family: var(--oo-sans);
	font-weight: 600;
}

.oo-site .wc-block-components-button.wp-element-button:not(.is-link):hover,
.oo-site .wc-block-cart__submit-button.wp-element-button:hover {
	background: var(--oo-walnut);
	color: var(--oo-white);
}

.oo-site .wc-block-components-button.wp-element-button:not(.is-link) .wc-block-components-button__text {
	color: var(--oo-white);
}

/* -------------------------------------------------------------------------
 * Announcement bar and header
 * ---------------------------------------------------------------------- */

.oo-announce {
	background: var(--oo-forest);
	color: var(--oo-cream);
	font-size: 0.875rem;
}

.oo-announce__inner {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-top: 9px;
	padding-bottom: 9px;
}

.oo-announce a {
	color: var(--oo-cream);
	font-weight: 600;
	text-decoration: none;
}

.oo-announce a:hover {
	text-decoration: underline;
}

.oo-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--oo-white);
	border-bottom: 1px solid var(--oo-oat);
}

.admin-bar .oo-header {
	top: 32px;
}

.oo-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 72px;
}

.oo-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	flex-shrink: 0;
}

.oo-logo img {
	border-radius: 9px;
}

.oo-logo__word {
	font-family: var(--oo-serif);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--oo-walnut);
	letter-spacing: -0.01em;
}

.oo-logo__word span {
	color: var(--oo-forest);
}

.oo-logo--light .oo-logo__word,
.oo-logo--light .oo-logo__word span {
	color: var(--oo-cream);
}

.oo-nav {
	flex: 1;
}

.oo-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oo-nav__item {
	position: relative;
}

.oo-nav__item > a {
	display: block;
	padding: 24px 12px;
	font-weight: 500;
	font-size: 0.9375rem;
	text-decoration: none;
	color: var(--oo-charcoal);
}

.oo-nav__item > a:hover {
	color: var(--oo-terracotta);
}

.oo-nav__item--quiet > a {
	color: var(--oo-muted);
}

.oo-nav__sub {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 10px;
	list-style: none;
	background: var(--oo-white);
	border: 1px solid var(--oo-oat);
	border-radius: var(--oo-radius);
	box-shadow: 0 18px 40px rgba(43, 43, 43, 0.08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.oo-nav__item:hover > .oo-nav__sub,
.oo-nav__item:focus-within > .oo-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.oo-nav__sub a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	text-decoration: none;
	font-size: 0.9375rem;
}

.oo-nav__sub a:hover {
	background: var(--oo-cream);
	color: var(--oo-forest);
}

.oo-header__actions {
	display: flex;
	gap: 6px;
	margin-left: auto;
}

.oo-header__action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--oo-walnut);
	text-decoration: none;
}

/* The search toggle is a <button>; strip the browser's default chrome. */
.oo-site button.oo-header__action {
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.oo-site .oo-header__action:hover,
.oo-site .oo-header__action[aria-expanded="true"] {
	background: var(--oo-cream);
}

.oo-quote-count,
.oo-cart-count {
	position: absolute;
	top: 4px;
	right: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--oo-terracotta);
	color: var(--oo-white);
	font-size: 0.6875rem;
	font-weight: 700;
}

.oo-quote-count[hidden],
.oo-cart-count[hidden] {
	display: none;
}

.oo-nav-toggle {
	display: none;
}

/* -------------------------------------------------------------------------
 * Homepage
 * ---------------------------------------------------------------------- */

.oo-hero {
	position: relative;
	min-height: min(78vh, 680px);
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--oo-cream);
}

.oo-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: 60% center;
}

.oo-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(248, 244, 235, 0.94) 0%, rgba(248, 244, 235, 0.78) 38%, rgba(248, 244, 235, 0) 66%);
}

.oo-hero__content {
	position: relative;
	z-index: 1;
	padding-top: 72px;
	padding-bottom: 72px;
}

.oo-site .oo-hero__title {
	max-width: 13ch;
	font-size: clamp(2.5rem, 5.6vw, 4.5rem);
	letter-spacing: -0.015em;
}

.oo-hero__lede {
	max-width: 34rem;
	margin: 0 0 32px;
	font-size: 1.1875rem;
	color: var(--oo-charcoal);
}

.oo-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.oo-section {
	padding-top: 72px;
	padding-bottom: 8px;
}

.oo-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.oo-site .oo-section__title {
	margin: 0;
	font-size: clamp(1.75rem, 3vw, 2.375rem);
}

.oo-section__link {
	font-weight: 600;
	text-decoration: none;
	color: var(--oo-forest) !important;
}

.oo-tiles {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oo-tile a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 14px 14px 18px;
	border-radius: var(--oo-radius-lg);
	background: var(--oo-cream);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.oo-tile a:hover {
	background: var(--oo-oat);
}

.oo-tile__media {
	display: block;
	aspect-ratio: 1;
	margin-bottom: 14px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--oo-white);
}

.oo-tile__media img {
	width: 100%;
	height: 100% !important;
	object-fit: contain;
	transition: transform 0.35s ease;
}

.oo-tile a:hover .oo-tile__media img {
	transform: scale(1.04);
}

.oo-tile__name {
	font-family: var(--oo-serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--oo-walnut);
}

.oo-tile__line {
	margin-top: 4px;
	font-size: 0.875rem;
	color: var(--oo-muted);
}

.oo-feature {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	align-items: center;
	gap: 56px;
	padding-top: 88px;
}

.oo-feature--flip {
	grid-template-columns: 1fr 1.25fr;
}

.oo-feature--flip .oo-feature__image {
	order: 2;
}

.oo-feature__image {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--oo-radius-lg);
}

.oo-site .oo-feature__text h2 {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.oo-feature__text p {
	margin: 0 0 24px;
	color: var(--oo-muted);
	font-size: 1.0625rem;
}

/*
 * The eyebrow is a <p>, so the feature block's paragraph rule outranked it
 * and turned it grey and body-sized. Restated at matching specificity.
 */
.oo-feature__text p.oo-eyebrow {
	margin: 0 0 10px;
	font-size: 0.8125rem;
	color: var(--oo-terracotta);
}

.oo-why {
	margin-top: 96px;
	padding: 72px 0;
	background: var(--oo-cream);
}

.oo-why__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.oo-why__list li {
	padding-top: 18px;
	border-top: 2px solid var(--oo-terracotta);
}

.oo-why__list strong {
	display: block;
	margin-bottom: 6px;
	font-family: var(--oo-serif);
	font-size: 1.1875rem;
	color: var(--oo-walnut);
}

.oo-why__list span {
	color: var(--oo-muted);
	font-size: 0.9375rem;
}

.oo-band {
	background: var(--oo-forest);
	color: var(--oo-cream);
}

.oo-band__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-top: 56px;
	padding-bottom: 56px;
}

.oo-site .oo-band h2 {
	margin-bottom: 8px;
	color: var(--oo-cream);
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
}

.oo-band p {
	margin: 0;
	max-width: 40rem;
	color: rgba(248, 244, 235, 0.82);
}

/* -------------------------------------------------------------------------
 * Product grid and cards
 * ---------------------------------------------------------------------- */

.oo-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oo-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
}

.oo-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	margin-bottom: 14px;
	border-radius: var(--oo-radius-lg);
	overflow: hidden;
	background: #fbfaf7;
	border: 1px solid #efe9df;
}

.oo-card__media img {
	width: 100%;
	height: 100% !important;
	object-fit: contain;
	transition: transform 0.35s ease;
}

.oo-card__link:hover .oo-card__media img {
	transform: scale(1.04);
}

.oo-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.oo-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--oo-terracotta);
	color: var(--oo-white);
	font-size: 0.75rem;
	font-weight: 600;
}

.oo-card__eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oo-muted);
}

.oo-card__name {
	margin: 2px 0 6px;
	font-family: var(--oo-serif);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--oo-walnut);
	line-height: 1.3;
}

.oo-card__price {
	font-weight: 600;
	color: var(--oo-charcoal);
}

.oo-card__price del,
.oo-site .summary .price del {
	margin-right: 8px;
	color: var(--oo-muted);
	font-weight: 400;
	opacity: 0.8;
}

.oo-card__price ins,
.oo-site .summary .price ins {
	text-decoration: none;
	color: var(--oo-terracotta);
}

/* -------------------------------------------------------------------------
 * Shop and category pages
 * ---------------------------------------------------------------------- */

.oo-archive-head {
	padding: 40px 0 28px;
	background: var(--oo-cream);
}

.oo-site .woocommerce-breadcrumb {
	margin: 0 0 14px;
	font-size: 0.875rem;
	color: var(--oo-muted);
}

.oo-site .woocommerce-breadcrumb a {
	text-decoration: none;
}

.oo-site .oo-archive-head__title {
	margin-bottom: 8px;
	font-size: clamp(2rem, 4vw, 3rem);
}

.oo-archive-head__intro {
	max-width: 44rem;
	color: var(--oo-muted);
}

.oo-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

.oo-chip {
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--oo-warm-beige);
	background: var(--oo-white);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

.oo-chip:hover {
	border-color: var(--oo-forest);
}

.oo-chip.is-active {
	background: var(--oo-forest);
	border-color: var(--oo-forest);
	color: var(--oo-white) !important;
}

.oo-archive {
	padding-top: 28px;
	padding-bottom: 72px;
}

.oo-archive__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
	color: var(--oo-muted);
	font-size: 0.9375rem;
}

.oo-site .woocommerce-result-count,
.oo-site .woocommerce-ordering {
	margin: 0;
	float: none;
}

.oo-site .woocommerce-ordering select {
	padding: 9px 12px;
	border: 1px solid var(--oo-warm-beige);
	border-radius: var(--oo-radius);
	background: var(--oo-white);
	font-family: var(--oo-sans);
}

.oo-site .woocommerce-pagination ul {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
	border: 0;
}

.oo-site .woocommerce-pagination ul li {
	border: 0;
}

.oo-site .woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border-radius: 999px;
	text-decoration: none;
}

.oo-site .woocommerce-pagination .current {
	background: var(--oo-forest);
	color: var(--oo-white);
}

.oo-empty {
	padding: 48px;
	text-align: center;
	background: var(--oo-cream);
	border-radius: var(--oo-radius-lg);
}

/* -------------------------------------------------------------------------
 * Product page
 * ---------------------------------------------------------------------- */

/*
 * WooCommerce prints the gallery at opacity: 0 inline and relies on
 * wc-single-product.js to fade it in. That script is not always enqueued on
 * WordPress.com, and a correctly loaded product photo then stays permanently
 * invisible. This is load-bearing — removing it blanks every product image.
 */
.woocommerce-product-gallery {
	opacity: 1 !important;
}

.oo-crumbs {
	padding-top: 24px;
}

.oo-product__top {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 56px;
	align-items: start;
	padding-top: 8px;
	padding-bottom: 40px;
}

/*
 * WooCommerce prints the sale badge before the gallery, as a sibling rather
 * than inside it, so the badge needs this wrapper as its positioning context.
 * Without it the badge anchored to the page and sat on top of the
 * "added to your cart" notice.
 */
.oo-product__media {
	position: relative;
}

.oo-site .woocommerce-message,
.oo-site .woocommerce-info,
.oo-site .woocommerce-error {
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 0;
	border-left: 4px solid var(--oo-forest);
	border-radius: var(--oo-radius);
	background: var(--oo-cream);
	color: var(--oo-charcoal);
	list-style: none;
}

.oo-site .woocommerce-error {
	border-left-color: var(--oo-terracotta);
	background: #fbeeea;
}

.oo-site .woocommerce-message::before,
.oo-site .woocommerce-info::before,
.oo-site .woocommerce-error::before {
	display: none;
}

.oo-site .woocommerce-message .button {
	float: right;
	font-weight: 600;
	color: var(--oo-forest);
}

.oo-site .oo-product__media .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0;
	position: relative;
}

.oo-site .oo-product__media .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.oo-site .oo-product__media .woocommerce-product-gallery__image img {
	width: 100%;
	border-radius: var(--oo-radius-lg);
	background: #fbfaf7;
	border: 1px solid #efe9df;
}

.oo-site .oo-product__media .onsale {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--oo-terracotta);
	color: var(--oo-white);
	font-size: 0.8125rem;
	font-weight: 600;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
}

.oo-site .oo-product__summary {
	position: sticky;
	top: 100px;
	width: 100% !important;
	float: none !important;
}

.oo-site .oo-product__summary .product_title {
	font-size: clamp(2rem, 3.4vw, 2.75rem);
	margin-bottom: 10px;
}

.oo-site .oo-product__summary .price {
	margin: 0 0 18px;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--oo-charcoal);
}

.oo-site .woocommerce-product-details__short-description {
	margin-bottom: 24px;
	color: var(--oo-muted);
	font-size: 1.0625rem;
}

.oo-site form.cart {
	display: flex;
	gap: 10px;
	margin: 0;
}

.oo-site form.cart .quantity .qty {
	width: 72px;
	height: 52px;
	padding: 0 10px;
	border: 1px solid var(--oo-warm-beige);
	border-radius: 999px;
	text-align: center;
	font-family: var(--oo-sans);
	font-size: 1rem;
}

.oo-site form.cart .single_add_to_cart_button,
.oo-site form.cart button.button {
	flex: 1;
	height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background: var(--oo-forest);
	color: var(--oo-white);
	font-family: var(--oo-sans);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.oo-site form.cart .single_add_to_cart_button:hover {
	background: var(--oo-walnut);
}

.oo-site .oo-quote-add {
	margin-top: 10px;
	width: 100%;
	height: 52px;
	padding: 0 28px;
}

.oo-quote-hint {
	margin: 8px 0 0;
	font-size: 0.875rem;
	color: var(--oo-muted);
}

.oo-lead-time {
	margin: 16px 0 0;
	padding: 10px 14px;
	background: var(--oo-cream);
	border-left: 3px solid var(--oo-terracotta);
	border-radius: 4px;
	font-size: 0.9375rem;
}

.oo-site .product_meta {
	margin-top: 20px;
	font-size: 0.8125rem;
	color: var(--oo-muted);
}

.oo-site .product_meta > span {
	display: block;
}

.oo-assure {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 24px 0 0;
	padding: 16px 0 0;
	list-style: none;
	border-top: 1px solid var(--oo-oat);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--oo-walnut);
}

.oo-assure li::before {
	content: "✓ ";
	color: var(--oo-forest);
	font-weight: 700;
}

.oo-product__more {
	padding-bottom: 72px;
}

/*
 * WooCommerce's own product-page rules are written as
 * ".woocommerce div.product ..." — more specific than a plain class — so these
 * restate them at that weight. The body carries .woocommerce on product pages.
 */
.oo-site.woocommerce div.product form.cart {
	margin-bottom: 0;
}

.oo-site.woocommerce div.product div.summary {
	margin-bottom: 0;
}

.oo-site .oo-product__summary ul.oo-assure {
	margin-bottom: 0;
}

.oo-site.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.oo-site.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.oo-site.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.oo-site.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}

.oo-site.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 20px;
}

/*
 * One tab is not a choice. With reviews removed, Description is usually the
 * only tab, and its bar sat directly above a "Description" heading saying the
 * same thing. The bar returns automatically when a second tab exists.
 */
.oo-site .woocommerce-tabs ul.tabs:has(> li:only-child) {
	display: none;
}

.oo-site .woocommerce-tabs {
	margin-top: 8px;
}

.oo-site .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 24px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--oo-oat);
}

.oo-site .woocommerce-tabs ul.tabs::before,
.oo-site .woocommerce-tabs ul.tabs li::before,
.oo-site .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.oo-site .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.oo-site .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 0;
	font-weight: 600;
	text-decoration: none;
	color: var(--oo-muted);
	border-bottom: 2px solid transparent;
}

.oo-site .woocommerce-tabs ul.tabs li.active a {
	color: var(--oo-walnut);
	border-bottom-color: var(--oo-terracotta);
}

.oo-site .woocommerce-Tabs-panel {
	max-width: 48rem;
}

.oo-site .woocommerce-Tabs-panel ul {
	padding-left: 20px;
}

.oo-site .related.products > h2,
.oo-site .upsells.products > h2 {
	margin-top: 56px;
	font-size: 1.75rem;
}

.oo-site .related.products ul.products,
.oo-site .upsells.products ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oo-site .related.products ul.products::before,
.oo-site .related.products ul.products::after,
.oo-site .upsells.products ul.products::before,
.oo-site .upsells.products ul.products::after {
	display: none;
}

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

.oo-site ul.products li.product a {
	text-decoration: none;
}

.oo-site ul.products li.product img {
	border-radius: var(--oo-radius-lg);
	background: #fbfaf7;
	border: 1px solid #efe9df;
	margin-bottom: 12px;
}

.oo-site ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--oo-serif);
	font-size: 1.0625rem;
	color: var(--oo-walnut);
	padding: 0;
}

.oo-site ul.products li.product .button {
	display: none;
}

.oo-related {
	margin-top: 64px;
}

.oo-site .oo-related h2 {
	font-size: 1.75rem;
	margin-bottom: 24px;
}

/* -------------------------------------------------------------------------
 * Specification table
 * ---------------------------------------------------------------------- */

.oo-specs {
	margin: 48px 0;
}

.oo-site .oo-specs__title {
	font-size: 1.75rem;
}

.oo-specs__table {
	width: 100%;
	max-width: 48rem;
	border-collapse: collapse;
}

.oo-specs__table th,
.oo-specs__table td {
	text-align: left;
	padding: 14px 16px;
	border-bottom: 1px solid var(--oo-oat);
	vertical-align: top;
}

.oo-specs__table th {
	width: 34%;
	font-weight: 600;
	color: var(--oo-forest);
}

/* -------------------------------------------------------------------------
 * Plugin pages: About, Support, Bulk Orders
 * ---------------------------------------------------------------------- */

.oo-about,
.oo-support,
.oo-quote-page {
	max-width: 880px;
	margin: 0 auto;
	padding: 56px var(--oo-gutter) 80px;
}

.oo-about h1,
.oo-support h1,
.oo-quote-page h1 {
	font-size: clamp(2.25rem, 5vw, 3.25rem);
}

.oo-site .oo-about h2,
.oo-site .oo-support h2 {
	color: var(--oo-forest);
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	margin: 40px 0 12px;
}

.oo-about__lede {
	font-size: 1.1875rem;
	max-width: 62ch;
}

.oo-about__values ul {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.oo-about__values li {
	background: var(--oo-cream);
	border-radius: var(--oo-radius);
	padding: 20px;
}

.oo-page__title {
	margin-top: 48px !important;
	font-size: clamp(2rem, 4vw, 2.75rem);
}

.oo-page__content {
	padding-bottom: 72px;
}

.oo-notfound {
	padding-top: 96px;
	padding-bottom: 120px;
	text-align: center;
}

.oo-site .oo-notfound h1 {
	font-size: clamp(2rem, 4vw, 3rem);
}

/* -------------------------------------------------------------------------
 * Quote page
 * ---------------------------------------------------------------------- */

.oo-quote-table {
	width: 100%;
	border-collapse: collapse;
	margin: 32px 0;
}

.oo-quote-table th,
.oo-quote-table td {
	text-align: left;
	padding: 14px 12px;
	border-bottom: 1px solid var(--oo-oat);
}

.oo-quote-table thead th {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--oo-walnut);
}

.oo-quote-remove {
	background: none;
	border: 0;
	padding: 0;
	color: var(--oo-terracotta);
	cursor: pointer;
	text-decoration: underline;
	font-size: 0.875rem;
}

.oo-quote-form__grid {
	display: grid;
	gap: 0 20px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.oo-quote-form label {
	display: block;
	font-weight: 600;
	font-size: 0.9375rem;
	margin-bottom: 6px;
}

.oo-quote-form input,
.oo-quote-form textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--oo-sans);
	font-size: 1rem;
	border: 1px solid var(--oo-warm-beige);
	border-radius: var(--oo-radius);
	background: var(--oo-white);
}

.oo-quote-form input:focus,
.oo-quote-form textarea:focus {
	outline: 2px solid var(--oo-forest);
	outline-offset: 1px;
	border-color: var(--oo-forest);
}

.oo-notice {
	padding: 14px 18px;
	border-radius: var(--oo-radius);
	margin: 0 0 24px;
}

.oo-notice--success {
	background: var(--oo-cream);
	border-left: 4px solid var(--oo-forest);
}

.oo-notice--error {
	background: #fbeeea;
	border-left: 4px solid var(--oo-terracotta);
}

.oo-quote-page__empty {
	background: var(--oo-cream);
	padding: 24px;
	border-radius: var(--oo-radius);
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

.oo-footer {
	background: var(--oo-forest-deep);
	color: rgba(248, 244, 235, 0.78);
	font-size: 0.9375rem;
}

.oo-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 40px;
	padding-top: 64px;
	padding-bottom: 48px;
}

.oo-footer__brand p {
	max-width: 22rem;
	margin: 16px 0 0;
}

.oo-footer__origin {
	color: var(--oo-warm-beige);
	font-weight: 600;
}

.oo-site .oo-footer__title {
	margin-bottom: 14px;
	font-family: var(--oo-sans);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--oo-cream);
}

.oo-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oo-footer li {
	margin-bottom: 8px;
}

.oo-footer a {
	text-decoration: none;
}

.oo-footer a:hover {
	color: var(--oo-cream);
	text-decoration: underline;
}

.oo-footer__base {
	padding-top: 20px;
	padding-bottom: 28px;
	border-top: 1px solid rgba(248, 244, 235, 0.14);
	font-size: 0.8125rem;
}

/* -------------------------------------------------------------------------
 * Shared: icons, small chips, visually hidden honeypot
 * ---------------------------------------------------------------------- */

.oo-icon {
	flex-shrink: 0;
	color: var(--oo-forest);
}

.oo-chip--small {
	padding: 6px 12px;
	font-size: 0.8125rem;
}

.oo-hp {
	position: absolute !important;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Announcement bar: one message at a time, plus contact
 * ---------------------------------------------------------------------- */

.oo-announce__rotator {
	position: relative;
	flex: 1;
	min-height: 1.4em;
}

.oo-announce__msg {
	display: none;
}

.oo-announce__msg.is-active {
	display: inline;
	animation: oo-fade 0.4s ease;
}

.oo-announce__contact {
	flex-shrink: 0;
	font-weight: 500 !important;
	opacity: 0.85;
}

@keyframes oo-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.oo-announce__msg.is-active {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
 * Navigation "All …" link and search panel
 * ---------------------------------------------------------------------- */

.oo-nav__all a {
	margin-top: 4px;
	border-top: 1px solid var(--oo-oat);
	border-radius: 0 0 8px 8px;
	font-weight: 600;
	color: var(--oo-forest);
}

.oo-search {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 20px 0 22px;
	background: var(--oo-white);
	border-bottom: 1px solid var(--oo-oat);
	box-shadow: 0 18px 40px rgba(43, 43, 43, 0.08);
}

.oo-search[hidden] {
	display: none;
}

.oo-search__form {
	display: flex;
	gap: 10px;
}

.oo-site .oo-search__input {
	flex: 1;
	min-width: 0;
	height: 50px;
	padding: 0 18px;
	border: 1px solid var(--oo-warm-beige);
	border-radius: 999px;
	background: var(--oo-white);
	font-family: var(--oo-sans);
	font-size: 1rem;
}

.oo-site .oo-search__input:focus {
	outline: 2px solid var(--oo-forest);
	outline-offset: 1px;
}

.oo-search__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 6px 16px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.oo-search__list a {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 6px;
	border-radius: var(--oo-radius);
	text-decoration: none;
}

.oo-search__list a:hover,
.oo-search__list a:focus-visible {
	background: var(--oo-cream);
}

.oo-search__list img,
.oo-search__ph {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background: #fbfaf7;
	object-fit: contain;
}

.oo-search__name {
	font-weight: 500;
}

.oo-search__price {
	font-size: 0.875rem;
	color: var(--oo-muted);
	white-space: nowrap;
}

.oo-search__none {
	margin: 16px 0 0;
	color: var(--oo-muted);
}

.oo-search__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 16px 0 0;
	font-size: 0.875rem;
	color: var(--oo-muted);
}

.oo-search__quick a {
	color: var(--oo-forest);
	font-weight: 500;
}

/* -------------------------------------------------------------------------
 * Homepage: trust strip and shop-by-need
 * ---------------------------------------------------------------------- */

.oo-trust {
	background: var(--oo-cream);
	border-bottom: 1px solid var(--oo-oat);
}

.oo-trust__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 36px;
	margin: 0 auto;
	padding-top: 16px;
	padding-bottom: 16px;
	list-style: none;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--oo-walnut);
}

.oo-trust__list li,
.oo-assure li,
.oo-cart-trust li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.oo-needs {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oo-needs a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	height: 100%;
	padding: 16px 16px 18px;
	border: 1px solid var(--oo-oat);
	border-radius: var(--oo-radius);
	text-decoration: none;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.oo-needs a:hover {
	border-color: var(--oo-forest);
	background: var(--oo-cream);
}

.oo-needs strong {
	font-family: var(--oo-serif);
	font-size: 1.0625rem;
	color: var(--oo-walnut);
}

.oo-needs span {
	font-size: 0.8125rem;
	color: var(--oo-muted);
}

/* -------------------------------------------------------------------------
 * Product page: eyebrow, savings, highlights, delivery, details, setup
 * ---------------------------------------------------------------------- */

.oo-product__eyebrow {
	margin-bottom: 8px;
}

.oo-product__eyebrow a {
	text-decoration: none;
}

.oo-savings {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: -6px 0 18px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--oo-terracotta);
}

.oo-savings__pill {
	padding: 3px 10px;
	border-radius: 999px;
	background: #f6e7e2;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.oo-highlights {
	display: grid;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.oo-highlights li {
	position: relative;
	padding-left: 26px;
	line-height: 1.45;
}

.oo-highlights li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--oo-forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.oo-delivery {
	margin-top: 22px;
	padding: 16px 18px;
	border-radius: var(--oo-radius);
	background: var(--oo-cream);
}

.oo-delivery__lead {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--oo-oat);
}

.oo-site .oo-product__summary .oo-delivery .oo-assure {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 16px;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0.875rem;
}

.oo-assure li::before {
	content: none;
}

.oo-delivery__pay {
	margin: 12px 0 0;
	font-size: 0.8125rem;
	color: var(--oo-muted);
}

.oo-details {
	max-width: 48rem;
	margin: 8px 0 40px;
	border-top: 1px solid var(--oo-oat);
}

.oo-details__item {
	border-bottom: 1px solid var(--oo-oat);
}

.oo-details__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	padding: 4px 0;
	cursor: pointer;
	font-weight: 600;
	color: var(--oo-walnut);
	list-style: none;
}

.oo-details__item summary::-webkit-details-marker {
	display: none;
}

.oo-details__item summary::after {
	content: "+";
	font-size: 1.375rem;
	font-weight: 400;
	color: var(--oo-forest);
	transition: transform 0.2s ease;
}

.oo-details__item[open] summary::after {
	transform: rotate(45deg);
}

.oo-details__body {
	padding: 0 0 18px;
	color: var(--oo-charcoal);
}

.oo-details__body p {
	margin: 0 0 8px;
}

.oo-details__body a {
	font-weight: 600;
	color: var(--oo-forest);
}

.oo-setup {
	margin-top: 48px;
	padding: 32px;
	border-radius: var(--oo-radius-lg);
	background: var(--oo-cream);
}

.oo-site .oo-setup h2 {
	margin-bottom: 20px;
	font-size: 1.75rem;
}

.oo-setup .oo-card__media {
	background: var(--oo-white);
}

/* Sticky add-to-cart */

.oo-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: var(--oo-white);
	border-top: 1px solid var(--oo-oat);
	box-shadow: 0 -10px 30px rgba(43, 43, 43, 0.08);
	animation: oo-rise 0.25s ease;
}

.oo-sticky[hidden] {
	display: none;
}

.oo-sticky__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.oo-site .oo-sticky__img {
	width: 52px;
	height: 52px;
	border-radius: 8px;
	background: #fbfaf7;
	object-fit: contain;
}

.oo-sticky__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.oo-sticky__name {
	overflow: hidden;
	font-family: var(--oo-serif);
	font-weight: 600;
	color: var(--oo-walnut);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.oo-sticky__price {
	font-size: 0.9375rem;
	font-weight: 600;
}

.oo-sticky__price del {
	margin-right: 6px;
	color: var(--oo-muted);
	font-weight: 400;
}

.oo-sticky__price ins {
	text-decoration: none;
	color: var(--oo-terracotta);
}

.oo-site .oo-button.oo-sticky__cta {
	flex-shrink: 0;
	padding: 13px 26px;
}

/* Keep the page end reachable when the bar is showing. */
body.has-sticky .oo-footer {
	padding-bottom: 76px;
}

@keyframes oo-rise {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.oo-sticky {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
 * Shop pages: price filter and empty states
 * ---------------------------------------------------------------------- */

.oo-price-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.oo-price-filter__label {
	margin-right: 4px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--oo-walnut);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.oo-archive__sort {
	display: flex;
	align-items: center;
	gap: 16px;
}

.oo-site .oo-empty h2 {
	font-size: 1.5rem;
}

.oo-empty__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

/* -------------------------------------------------------------------------
 * Bulk orders, support, cart reassurance, email signup
 * ---------------------------------------------------------------------- */

.oo-quote-page__lede {
	max-width: 44rem;
	font-size: 1.0625rem;
}

.oo-quote-page__points {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 24px 0 32px;
	padding: 0;
	list-style: none;
}

.oo-quote-page__points li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px;
	border-radius: var(--oo-radius);
	background: var(--oo-cream);
}

.oo-quote-page__points strong {
	font-family: var(--oo-serif);
	color: var(--oo-walnut);
}

.oo-quote-page__points span {
	font-size: 0.875rem;
	color: var(--oo-muted);
}

.oo-site .oo-quote-basket h2,
.oo-site .oo-quote-form h2 {
	margin-top: 8px;
	font-size: 1.375rem;
}

.oo-quote-table__product {
	display: flex;
	align-items: center;
	gap: 12px;
}

.oo-quote-table__product img {
	width: 48px;
	height: 48px;
	border-radius: 6px;
	background: #fbfaf7;
	object-fit: contain;
}

.oo-quote-form select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--oo-warm-beige);
	border-radius: var(--oo-radius);
	background: var(--oo-white);
	font-family: var(--oo-sans);
	font-size: 1rem;
}

.oo-quote-form__note {
	margin-top: 10px;
	font-size: 0.8125rem;
	color: var(--oo-muted);
}

.oo-support__jump {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
}

.oo-support__section,
#quote-status {
	scroll-margin-top: 100px;
}

.oo-cart-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 24px 0 0;
	padding: 16px 18px;
	border-radius: var(--oo-radius);
	background: var(--oo-cream);
	list-style: none;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--oo-walnut);
}

.oo-signup {
	background: var(--oo-cream);
	border-top: 1px solid var(--oo-oat);
}

.oo-signup__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	padding-top: 40px;
	padding-bottom: 40px;
}

.oo-site .oo-signup h2 {
	margin-bottom: 4px;
	font-size: 1.5rem;
}

.oo-signup p {
	margin: 0;
	color: var(--oo-muted);
}

.oo-signup__form {
	flex: 0 1 440px;
}

.oo-footer__muted {
	opacity: 0.7;
}

.oo-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
}

/* -------------------------------------------------------------------------
 * Tablet
 * ---------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.oo-needs {
		grid-template-columns: repeat(3, 1fr);
	}

	.oo-tiles {
		gap: 12px;
	}

	.oo-tile a {
		padding: 10px 10px 14px;
	}

	.oo-tile__line {
		display: none;
	}

	.oo-why__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.oo-nav__item > a {
		padding-left: 8px;
		padding-right: 8px;
	}
}

/* -------------------------------------------------------------------------
 * Phone and small tablet: collapsible navigation, stacked layouts.
 *
 * A phone rendering the whole site tiny means horizontal overflow somewhere,
 * not a broken component — tables are the usual culprit, so they scroll.
 * ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	.oo-announce__inner {
		justify-content: center;
		text-align: center;
	}

	.oo-announce__inner > span {
		display: none;
	}

	.oo-announce__inner {
		padding-top: 7px;
		padding-bottom: 7px;
		font-size: 0.8125rem;
	}

	.oo-header__inner {
		gap: 8px;
		min-height: 58px;
	}

	.oo-logo__word {
		font-size: 1.3125rem;
	}

	.oo-logo img {
		width: 34px;
		height: 34px;
	}

	.oo-nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		order: -1;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.oo-nav-toggle__bars,
	.oo-nav-toggle__bars::before,
	.oo-nav-toggle__bars::after {
		display: block;
		width: 22px;
		height: 2px;
		background: var(--oo-walnut);
		border-radius: 2px;
		position: relative;
	}

	.oo-nav-toggle__bars::before,
	.oo-nav-toggle__bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.oo-nav-toggle__bars::before {
		top: -7px;
	}

	.oo-nav-toggle__bars::after {
		top: 7px;
	}

	.oo-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		max-height: calc(100vh - 110px);
		overflow-y: auto;
		background: var(--oo-white);
		border-bottom: 1px solid var(--oo-oat);
		box-shadow: 0 18px 40px rgba(43, 43, 43, 0.08);
	}

	.oo-header.is-open .oo-nav {
		display: block;
	}

	.oo-nav__list {
		flex-direction: column;
		align-items: stretch;
		padding: 8px var(--oo-gutter) 16px;
	}

	.oo-nav__item > a {
		padding: 14px 0;
		border-bottom: 1px solid var(--oo-oat);
		font-size: 1.0625rem;
	}

	.oo-nav__sub {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		padding: 4px 0 8px 12px;
		border: 0;
		box-shadow: none;
	}

	/*
	 * Hero: the photograph stays behind the headline, as on desktop. On a
	 * narrow screen the text sits in the lower part of the frame, so the fade
	 * runs bottom-up — clear photograph at the top, cream behind the words.
	 */
	.oo-hero {
		min-height: min(74svh, 580px);
		align-items: flex-end;
	}

	.oo-hero__image {
		object-position: 72% center;
	}

	.oo-hero::after {
		background: linear-gradient(180deg, rgba(248, 244, 235, 0) 0%, rgba(248, 244, 235, 0.35) 32%, rgba(248, 244, 235, 0.9) 58%, rgba(248, 244, 235, 0.97) 100%);
	}

	.oo-hero__content {
		padding-top: 120px;
		padding-bottom: 24px;
	}

	.oo-site .oo-hero__title {
		max-width: none;
		margin-bottom: 10px;
		font-size: clamp(2.125rem, 9.4vw, 2.75rem);
	}

	.oo-hero__lede {
		margin-bottom: 20px;
		font-size: 1.0625rem;
		line-height: 1.5;
	}

	.oo-hero__actions {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.oo-site .oo-hero__actions .oo-button {
		flex: 1 1 0;
		padding: 14px 16px;
		white-space: nowrap;
	}

	.oo-eyebrow,
	.oo-feature__text p.oo-eyebrow {
		margin-bottom: 6px;
		font-size: 0.75rem;
	}

	/* Compact rhythm: roughly half the desktop spacing between sections. */
	.oo-section {
		padding-top: 36px;
	}

	.oo-section__head {
		margin-bottom: 14px;
	}

	.oo-site .oo-section__title {
		font-size: 1.5rem;
	}

	/*
	 * Five room tiles never divide evenly into a phone grid, so they become a
	 * swipeable row, with the next tile peeking in so it reads as scrollable.
	 */
	.oo-tiles {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 42%;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin: 0 calc(var(--oo-gutter) * -1);
		padding: 0 var(--oo-gutter) 4px;
		scroll-padding-left: var(--oo-gutter);
		scrollbar-width: none;
	}

	.oo-tiles::-webkit-scrollbar {
		display: none;
	}

	.oo-tile {
		scroll-snap-align: start;
	}

	.oo-tile a {
		padding: 8px 8px 12px;
		border-radius: 14px;
	}

	.oo-tile__media {
		margin-bottom: 8px;
		border-radius: 10px;
	}

	.oo-tile__name {
		font-size: 1rem;
	}

	.oo-grid,
	.oo-site .related.products ul.products,
	.oo-site .upsells.products ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px 12px;
	}

	.oo-card__media {
		margin-bottom: 8px;
		border-radius: 12px;
	}

	.oo-card__badge {
		top: 8px;
		left: 8px;
		padding: 3px 8px;
		font-size: 0.6875rem;
	}

	.oo-card__eyebrow {
		font-size: 0.6875rem;
	}

	.oo-card__name {
		margin: 0 0 2px;
		font-size: 1rem;
	}

	.oo-card__price {
		font-size: 0.9375rem;
	}

	/* Feature blocks: image and copy tight together, less air between blocks. */
	.oo-feature,
	.oo-feature--flip {
		grid-template-columns: 1fr;
		gap: 14px;
		padding-top: 36px;
	}

	.oo-feature--flip .oo-feature__image {
		order: 0;
	}

	.oo-feature__image {
		aspect-ratio: 16 / 9;
		border-radius: 14px;
	}

	.oo-site .oo-feature__text h2 {
		margin-bottom: 8px;
		font-size: 1.5rem;
	}

	.oo-feature__text p {
		margin-bottom: 16px;
		font-size: 1rem;
	}

	.oo-why {
		margin-top: 40px;
		padding: 32px 0;
	}

	.oo-why__list {
		grid-template-columns: 1fr 1fr;
		gap: 18px 16px;
		margin-top: 18px;
	}

	.oo-why__list li {
		padding-top: 10px;
	}

	.oo-why__list strong {
		font-size: 1rem;
		line-height: 1.3;
	}

	.oo-why__list span {
		font-size: 0.875rem;
		line-height: 1.45;
	}

	.oo-band__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.oo-site .oo-band h2 {
		font-size: 1.375rem;
	}

	.oo-band p {
		font-size: 0.9375rem;
	}

	/* Shop and category pages. */
	.oo-archive-head {
		padding: 20px 0 16px;
	}

	.oo-site .woocommerce-breadcrumb {
		margin-bottom: 8px;
		font-size: 0.8125rem;
	}

	.oo-site .oo-archive-head__title {
		margin-bottom: 4px;
		font-size: 1.75rem;
	}

	/*
	 * Filter chips in one swipeable line. Wrapped, a section with five
	 * sub-categories pushed the first product below the fold.
	 */
	.oo-chips {
		flex-wrap: nowrap;
		gap: 8px;
		margin: 14px calc(var(--oo-gutter) * -1) 0;
		padding: 0 var(--oo-gutter) 2px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.oo-chips::-webkit-scrollbar {
		display: none;
	}

	.oo-chip {
		flex: 0 0 auto;
		padding: 9px 14px;
	}

	.oo-archive {
		padding-top: 16px;
		padding-bottom: 40px;
	}

	.oo-archive__bar {
		flex-direction: row;
		align-items: center;
		margin-bottom: 16px;
		font-size: 0.8125rem;
	}

	.oo-site .woocommerce-ordering select {
		max-width: 52vw;
		padding: 8px 10px;
		font-size: 0.875rem;
	}

	.oo-site .woocommerce-pagination ul {
		margin-top: 28px;
	}

	/* Product page. */
	.oo-crumbs {
		padding-top: 14px;
	}

	.oo-product__top {
		grid-template-columns: 1fr;
		gap: 18px;
		padding-bottom: 8px;
	}

	.oo-site .oo-product__summary {
		position: static;
	}

	.oo-site .oo-product__summary .product_title {
		margin-bottom: 6px;
		font-size: 1.75rem;
	}

	.oo-site .oo-product__summary .price {
		margin-bottom: 12px;
		font-size: 1.3125rem;
	}

	.oo-site .woocommerce-product-details__short-description {
		margin-bottom: 16px;
		font-size: 1rem;
	}

	.oo-assure {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 6px;
		margin-top: 16px;
		padding-top: 12px;
		font-size: 0.75rem;
		line-height: 1.35;
	}

	.oo-product__more {
		padding-bottom: 40px;
	}

	.oo-site .woocommerce-tabs ul.tabs {
		margin-bottom: 14px;
	}

	.oo-site .woocommerce-Tabs-panel h2 {
		font-size: 1.375rem;
		margin-bottom: 8px;
	}

	.oo-specs {
		margin: 28px 0;
	}

	.oo-site .oo-specs__title,
	.oo-site .oo-related h2 {
		margin-bottom: 12px;
		font-size: 1.375rem;
	}

	.oo-related {
		margin-top: 32px;
	}

	/*
	 * Specs stack label over value. A two-column table on a phone either
	 * squeezes the value into a sliver or scrolls sideways.
	 */
	.oo-specs__table,
	.oo-specs__table tbody,
	.oo-specs__table tr,
	.oo-specs__table th,
	.oo-specs__table td {
		display: block;
		width: 100%;
	}

	.oo-specs__table tr {
		padding: 10px 0;
		border-bottom: 1px solid var(--oo-oat);
	}

	.oo-specs__table th,
	.oo-specs__table td {
		padding: 0;
		border: 0;
	}

	.oo-specs__table th {
		margin-bottom: 2px;
		font-size: 0.8125rem;
	}

	/* Plugin pages and standard pages. */
	.oo-about,
	.oo-support,
	.oo-quote-page {
		padding: 28px var(--oo-gutter) 48px;
	}

	.oo-site .oo-about h2,
	.oo-site .oo-support h2 {
		margin-top: 24px;
	}

	.oo-page__title {
		margin-top: 24px !important;
	}

	.oo-page__content {
		padding-bottom: 40px;
	}

	.oo-notfound {
		padding-top: 48px;
		padding-bottom: 64px;
	}

	.oo-quote-table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	/* Footer. */
	.oo-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 24px 16px;
		padding-top: 36px;
		padding-bottom: 24px;
	}

	.oo-footer__brand {
		grid-column: 1 / -1;
	}

	.oo-footer__brand p {
		margin-top: 10px;
	}

	.oo-footer__base {
		padding-top: 14px;
		padding-bottom: 20px;
	}
}

/*
 * Cart cross-sells are a WooCommerce block, styled by the block theme: black
 * buttons and a "Sale" tag that contradicts "Launch price" everywhere else.
 * Bring them into line with the site cards.
 */
.oo-site .wp-block-woocommerce-product-collection .wc-block-components-product-sale-badge {
	padding: 5px 10px;
	border: 0;
	border-radius: 999px;
	background: var(--oo-terracotta);
	color: var(--oo-white);
	font-size: 0;
	text-transform: none;
}

.oo-site .wp-block-woocommerce-product-collection .wc-block-components-product-sale-badge::after {
	content: "Launch price";
	font-size: 0.75rem;
	font-weight: 600;
}

.oo-site .wp-block-woocommerce-product-collection .wc-block-components-product-sale-badge__text,
.oo-site .wp-block-woocommerce-product-collection .wc-block-components-product-sale-badge .screen-reader-text {
	display: none;
}

.oo-site .wp-block-woocommerce-product-collection .wp-block-button__link {
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--oo-forest);
	color: var(--oo-white);
	font-weight: 600;
}

.oo-site .wp-block-woocommerce-product-collection .wp-block-button__link:hover {
	background: var(--oo-walnut);
}

.oo-site .wp-block-woocommerce-product-collection .wp-block-post-title,
.oo-site .wp-block-woocommerce-product-collection h3 {
	font-family: var(--oo-serif);
	color: var(--oo-walnut);
}

.oo-site .wp-block-woocommerce-product-collection ins {
	text-decoration: none;
	color: var(--oo-terracotta);
}

/* Phone additions for the v0.3 components. */
@media (max-width: 900px) {
	.oo-announce__inner {
		justify-content: center;
	}

	.oo-announce__contact {
		display: none;
	}

	.oo-trust__list {
		justify-content: flex-start;
		flex-wrap: nowrap;
		gap: 24px;
		overflow-x: auto;
		scrollbar-width: none;
		padding-top: 12px;
		padding-bottom: 12px;
		font-size: 0.8125rem;
		white-space: nowrap;
	}

	.oo-trust__list::-webkit-scrollbar {
		display: none;
	}

	.oo-needs {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.oo-needs a {
		padding: 12px 12px 14px;
	}

	.oo-needs strong {
		font-size: 1rem;
	}

	.oo-search {
		padding: 14px 0 16px;
	}

	.oo-site .oo-search__form .oo-button {
		padding-left: 18px;
		padding-right: 18px;
	}

	.oo-search__list {
		grid-template-columns: 1fr;
	}

	.oo-highlights {
		margin-bottom: 18px;
	}

	.oo-site .oo-product__summary .oo-delivery .oo-assure {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.oo-delivery {
		margin-top: 16px;
		padding: 14px 16px;
	}

	.oo-details {
		margin-bottom: 28px;
	}

	.oo-setup {
		margin-top: 32px;
		margin-left: calc(var(--oo-gutter) * -1);
		margin-right: calc(var(--oo-gutter) * -1);
		padding: 24px var(--oo-gutter);
		border-radius: 0;
	}

	.oo-site .oo-setup h2 {
		font-size: 1.375rem;
	}

	.oo-sticky__inner {
		gap: 10px;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.oo-site .oo-sticky__img {
		width: 44px;
		height: 44px;
	}

	.oo-sticky__name {
		font-size: 0.9375rem;
	}

	.oo-site .oo-button.oo-sticky__cta {
		padding: 12px 18px;
		font-size: 0.9375rem;
	}

	body.has-sticky .oo-footer {
		padding-bottom: 68px;
	}

	.oo-archive__bar {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.oo-price-filter {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin: 0 calc(var(--oo-gutter) * -1);
		padding: 0 var(--oo-gutter);
		scrollbar-width: none;
	}

	.oo-price-filter::-webkit-scrollbar {
		display: none;
	}

	.oo-price-filter .oo-chip {
		flex: 0 0 auto;
	}

	.oo-archive__sort {
		justify-content: space-between;
	}

	.oo-quote-page__points {
		grid-template-columns: 1fr;
		gap: 8px;
		margin: 16px 0 24px;
	}

	.oo-quote-page__points li {
		padding: 12px 14px;
	}

	.oo-signup__inner {
		flex-direction: column;
		align-items: stretch;
		padding-top: 28px;
		padding-bottom: 28px;
	}

	.oo-footer__base {
		flex-direction: column;
	}
}

/* Small phones: keep the two hero buttons side by side without crowding. */
@media (max-width: 380px) {
	/* Size to the label, not half each: "Shop standing desks" needs more room. */
	.oo-site .oo-hero__actions .oo-button {
		flex: 1 1 auto;
		font-size: 0.9375rem;
		padding-left: 14px;
		padding-right: 14px;
	}

	.oo-assure {
		grid-template-columns: 1fr;
	}

	/* Menu, logo and three icons have to share 320px. */
	.oo-header__actions {
		gap: 0;
	}

	.oo-header__action,
	.oo-nav-toggle {
		width: 38px;
		height: 40px;
	}

	.oo-logo__word {
		font-size: 1.125rem;
	}
}