/*
 * OnlyCat product page treatment.
 *
 * Loaded only for products tagged `configurator` (inc/product-page.php), and
 * every rule is scoped under body.onlycat-product, so no other page can be
 * affected. It styles stock WooCommerce markup — it never depends on markup
 * of its own, so the page still works if this file fails to load.
 *
 * Tokens follow the brand blueprint: blue stays primary; warm, well-lit
 * neutrals ("inside"); cool night blue reserved for contrast ("outside").
 * System fonts only — the performance budget (CLAUDE.md §5) outranks type
 * flourish here.
 */

body.onlycat-product {
	--oc-ink: #101b24;
	--oc-ink-soft: #35464f;
	--oc-paper: #fcfaf6;
	--oc-oat: #f4efe6;
	--oc-blue: #1597ce;
	--oc-blue-deep: #0e7bab;
	--oc-blue-tint: #e3f3fa;
	--oc-night: #101b24;
	--oc-clay: #d97864;
	--oc-line: #d7d2c9;
	--oc-white: #ffffff;
	--oc-radius: 10px;
	/* Kumbh Sans is the site's existing brand face, already loaded by the
	   Elementor kit that still renders header/footer — inherit it, no new
	   font request. The system stack takes over at Stage 4/5. */
	--oc-sans: "Kumbh Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;

	background: var(--oc-paper);
	color: var(--oc-ink);
	font-family: var(--oc-sans);
}

/* ---- Layout frame -------------------------------------------------- */

body.onlycat-product .woocommerce {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

body.onlycat-product .woocommerce-breadcrumb {
	font-size: 0.82rem;
	color: var(--oc-ink-soft);
	margin: 1.2rem 0 1.6rem;
}

body.onlycat-product .woocommerce-breadcrumb a {
	color: var(--oc-ink-soft);
}

/* ---- Gallery -------------------------------------------------------- */

body.onlycat-product .woocommerce-product-gallery {
	margin-bottom: 2rem;
}

body.onlycat-product .woocommerce-product-gallery__wrapper,
body.onlycat-product .woocommerce-product-gallery img {
	border-radius: var(--oc-radius);
	overflow: hidden;
}

body.onlycat-product .flex-control-thumbs {
	display: flex;
	gap: 10px;
	margin-top: 10px;
	padding: 0;
}

body.onlycat-product .flex-control-thumbs li {
	flex: 1 1 0;
	list-style: none;
}

body.onlycat-product .flex-control-thumbs img {
	border-radius: 6px;
	border: 1px solid var(--oc-line);
	opacity: 0.75;
	transition: opacity 0.15s ease;
}

body.onlycat-product .flex-control-thumbs img.flex-active,
body.onlycat-product .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--oc-blue);
}

/* ---- Two-column grid: gallery + proof on the left, purchase panel right.
   Replaces Woo's 48% floats (woocommerce-layout.css). Floats are ignored on
   grid items, so only the widths need overriding. DOM order stays
   gallery → summary → proof → tabs, which is the right reading order on
   mobile: the buy panel is never pushed below the proof copy. ---------- */

body.onlycat-product div.product {
	display: grid;
	/* The purchase panel carries the configurator, so it gets the wider
	   track; the gallery shrinks a little and the proof block rises. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	/* Row 1 sizes to the gallery; the spanning purchase panel's extra height
	   goes to row 2, so the proof block starts right under the gallery
	   instead of sinking to the bottom of the (long) configurator column. */
	grid-template-rows: auto 1fr;
	column-gap: 2.5rem;
	align-items: start;
}

body.onlycat-product div.product .woocommerce-product-gallery,
body.onlycat-product div.product div.images {
	grid-column: 1;
	grid-row: 1;
	float: none;
	width: auto;
	margin-bottom: 0;
}

body.onlycat-product div.product .summary {
	grid-column: 2;
	grid-row: 1 / span 2;
	float: none;
	width: auto;
	margin-bottom: 0;
}

body.onlycat-product div.product .onlycat-proof {
	grid-column: 1;
	grid-row: 2;
	align-self: start;
	margin-top: 1.5rem;
}

body.onlycat-product div.product .woocommerce-tabs,
body.onlycat-product div.product .up-sells,
body.onlycat-product div.product .related.products,
body.onlycat-product div.product > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

/* In the 1024–1199 band the container is still shrinking, so the panel
   (which carries the configurator) takes the wider track; from 1200 up the
   container is at its maximum and 50/50 gives the panel room already. */
@media (min-width: 1024px) and (max-width: 1199px) {
	body.onlycat-product div.product {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

@media (max-width: 1023px) {
	body.onlycat-product div.product {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
	}

	body.onlycat-product div.product .woocommerce-product-gallery,
	body.onlycat-product div.product div.images,
	body.onlycat-product div.product .summary,
	body.onlycat-product div.product .onlycat-proof {
		grid-column: 1;
		grid-row: auto;
	}

	body.onlycat-product div.product .woocommerce-product-gallery {
		margin-bottom: 1.5rem;
	}
}

/* ---- Proof section ---------------------------------------------------- */

body.onlycat-product .onlycat-proof__eyebrow {
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--oc-blue-deep);
	margin: 0 0 0.5rem;
}

body.onlycat-product .onlycat-proof__title {
	font-size: clamp(1.3rem, 2.6vw, 1.7rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--oc-ink);
	text-wrap: balance;
	margin: 0 0 1.2rem;
}

body.onlycat-product .onlycat-proof__points {
	list-style: none;
	padding: 0;
	margin: 0 0 1.4rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0.9rem 1.4rem;
}

body.onlycat-product .onlycat-proof__points li {
	display: grid;
	gap: 0.2rem;
	padding-left: 1rem;
	border-left: 3px solid var(--oc-blue-tint);
}

body.onlycat-product .onlycat-proof__points strong {
	font-size: 0.98rem;
	color: var(--oc-ink);
}

body.onlycat-product .onlycat-proof__points span {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--oc-ink-soft);
}

body.onlycat-product .onlycat-proof__wall {
	margin: 0 0 1.2rem;
}

body.onlycat-product .onlycat-proof__wall-title {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--oc-ink);
	margin: 0 0 0.9rem;
}

body.onlycat-product .onlycat-proof__quotes {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0.7rem;
}

body.onlycat-product .onlycat-proof__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.8rem;
	padding: 1rem 1.05rem;
	border-radius: var(--oc-radius);
	color: var(--oc-ink);
}

body.onlycat-product .onlycat-proof__card p {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
	text-wrap: pretty;
}

body.onlycat-product .onlycat-proof__card cite {
	font-style: normal;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--oc-ink-soft);
}

/* Stacked under the configurator (below 1024px), the quote cards go full
   width for impact. Declared after the base rules so it wins the cascade. */
@media (max-width: 1023px) {
	body.onlycat-product .onlycat-proof__quotes {
		grid-template-columns: 1fr;
		gap: 0.8rem;
	}

	body.onlycat-product .onlycat-proof__card {
		padding: 1.2rem 1.25rem;
	}

	body.onlycat-product .onlycat-proof__card p {
		font-size: 1.1rem;
	}
}

/* Tints from the concept: clay, moss, sky — blue stays the brand primary. */
body.onlycat-product .onlycat-proof__card--1 { background: #f2c7ba; }
body.onlycat-product .onlycat-proof__card--2 { background: #c8d3ba; }
body.onlycat-product .onlycat-proof__card--3 { background: #b9e3f2; }

body.onlycat-product .onlycat-proof__rating {
	font-size: 0.9rem;
	color: var(--oc-ink-soft);
	margin: 0;
}

body.onlycat-product .onlycat-proof__rating a {
	color: var(--oc-blue-deep);
	font-weight: 600;
	margin-left: 0.3rem;
}

/* The zoom trigger (magnifier) is position:absolute with z-index 99 and was
   painting over the sticky header on scroll. Give the gallery its own
   stacking context so the trigger stays inside it. */
body.onlycat-product .woocommerce-product-gallery {
	position: relative;
	z-index: 0;
}

/* Woo lays qty + button out inline/flex; the line must take its own row. */
body.onlycat-product .woocommerce-variation-add-to-cart .onlycat-reassurance,
body.onlycat-product .onlycat-reassurance {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	clear: both;
	font-size: 0.82rem;
	color: var(--oc-ink-soft);
	margin: 0.7rem 0 0;
}

/* ---- Summary column as the purchase panel --------------------------- */

body.onlycat-product div.product .summary {
	background: var(--oc-white);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-radius);
	padding: 1.6rem 1.6rem 1.4rem;
}

body.onlycat-product .product_title {
	font-size: clamp(1.5rem, 4vw, 2rem);
	line-height: 1.15;
	font-weight: 700;
	text-wrap: balance;
	margin: 0 0 0.5rem;
}

body.onlycat-product .woocommerce-product-rating {
	margin-bottom: 0.8rem;
	font-size: 0.9rem;
}

body.onlycat-product .star-rating span::before,
body.onlycat-product .star-rating::before {
	color: var(--oc-clay);
}

body.onlycat-product div.product p.price {
	font-size: 1.45rem;
	color: var(--oc-ink);
	margin: 0 0 1rem;
}

body.onlycat-product div.product p.price del {
	color: var(--oc-ink-soft);
	font-size: 1.05rem;
	opacity: 1;
}

body.onlycat-product div.product p.price ins {
	text-decoration: none;
	font-weight: 700;
}

body.onlycat-product .woocommerce-product-details__short-description {
	color: var(--oc-ink-soft);
	font-size: 0.98rem;
	line-height: 1.6;
}

/* ---- Variations form (Phase 1: styled select; Phase 2 layers cards) - */

body.onlycat-product table.variations {
	width: 100%;
	margin-bottom: 0.6rem;
}

body.onlycat-product table.variations th.label {
	font-size: 0.85rem;
	font-weight: 600;
	padding-right: 0.8rem;
	text-align: left;
}

body.onlycat-product table.variations select {
	width: 100%;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--oc-line);
	border-radius: 8px;
	background-color: var(--oc-white);
	font-size: 1rem;
	color: var(--oc-ink);
}

body.onlycat-product .woocommerce-variation-price .price {
	font-size: 1.3rem;
	font-weight: 700;
}

body.onlycat-product form.cart {
	margin: 1rem 0 1.2rem;
}

/* The flap is configured, not counted: hide the quantity on its form only
   (scoped via the payment-version select, so accessory pages keep theirs).
   The input still posts value 1; quantity stays adjustable in the basket.
   !important because WooCommerce's variations script calls .show() on the
   wrapper whenever a variation is found, which writes an inline
   display:block that would otherwise win. */
body.onlycat-product form.variations_form:has(select[name="attribute_pa_payment-version"]) div.quantity {
	display: none !important;
}

body.onlycat-product form.cart div.quantity .qty {
	padding: 0.6rem 0.4rem;
	border: 1px solid var(--oc-line);
	border-radius: 8px;
	width: 4.2em;
	text-align: center;
}

/* The Elementor kit still styles global elements while it renders the
   header/footer: `label` is uppercased, `button` painted the kit purple,
   `ins` coloured gold. Counter each with enough specificity to win. */

body.onlycat-product .onlycat-payment-cards label.onlycat-payment-card,
body.onlycat-product .onlycat-payment-cards legend,
body.onlycat-product table.variations th.label,
body.onlycat-product table.variations th.label label {
	text-transform: none;
	letter-spacing: normal;
}

body.onlycat-product div.product p.price ins,
body.onlycat-product .woocommerce-variation-price ins {
	color: var(--oc-ink);
}

body.onlycat-product div.product p.price del,
body.onlycat-product .woocommerce-variation-price del {
	color: var(--oc-ink-soft);
}

body.onlycat-product form.cart button.single_add_to_cart_button {
	background: var(--oc-blue);
	color: var(--oc-white);
}

body.onlycat-product form.cart button.single_add_to_cart_button:hover,
body.onlycat-product form.cart button.single_add_to_cart_button:focus {
	background: var(--oc-blue-deep);
}

body.onlycat-product .single_add_to_cart_button {
	background: var(--oc-blue);
	color: var(--oc-white);
	border: 0;
	border-radius: 999px;
	padding: 0.85rem 2rem;
	font-size: 1.02rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}

body.onlycat-product .single_add_to_cart_button:hover,
body.onlycat-product .single_add_to_cart_button:focus {
	background: var(--oc-blue-deep);
	color: var(--oc-white);
}

body.onlycat-product .product_meta {
	font-size: 0.82rem;
	color: var(--oc-ink-soft);
	border-top: 1px solid var(--oc-line);
	padding-top: 0.9rem;
	margin-top: 1.2rem;
}

/* A true circle: Woo's min-width/min-height + padding yields an ellipse. */
body.onlycat-product .onsale {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.4em;
	height: 3.4em;
	min-width: 0;
	min-height: 0;
	padding: 0;
	line-height: 1;
	background: var(--oc-blue);
	color: var(--oc-white);
	border-radius: 50%;
	font-weight: 700;
}

/* Running total of the configured basket, above the buy button. */
body.onlycat-product .onlycat-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin: 1rem 0 0.6rem;
	padding-top: 0.8rem;
	border-top: 1px solid var(--oc-line);
	font-size: 0.95rem;
	color: var(--oc-ink-soft);
}

body.onlycat-product .onlycat-total strong {
	font-size: 1.25rem;
	color: var(--oc-ink);
	font-variant-numeric: tabular-nums;
}

/* ---- Volume-discount table (Discount Rules for WooCommerce) ---------
   The plugin renders Title | Range | Discount. The Title cell prints the
   *rule name*, which is one string for the whole site — "Tunnel Extender
   Bulk Discount", in English, on the German, Dutch and French pages. It is
   also redundant: Range already says "3 - 5" and Discount says "20%". Drop
   the column rather than translate a name that cannot be per-language.

   If the team would rather keep it, the plugin's own table customiser can
   hide the column instead and these two rules can go. Note there is no
   German translation of this plugin on wordpress.org, so its remaining
   headers stay English on /de/ whatever we do here. */

body.onlycat-product #customize-bulk-table-title,
body.onlycat-product .wdr_bulk_title {
	display: none;
}

body.onlycat-product .awdr-bulk-customizable-table {
	margin: 0 0 1.1rem;
}

body.onlycat-product table.wdr_bulk_table_msg {
	width: auto;
	min-width: min(100%, 260px);
	border-collapse: collapse;
	font-size: 0.9rem;
}

body.onlycat-product table.wdr_bulk_table_msg th,
body.onlycat-product table.wdr_bulk_table_msg td {
	padding: 0.35rem 0.9rem 0.35rem 0;
	text-align: left;
	border: 0;
	color: var(--oc-ink-soft);
}

body.onlycat-product table.wdr_bulk_table_msg thead th {
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--oc-ink-soft);
	border-bottom: 1px solid var(--oc-line);
}

body.onlycat-product table.wdr_bulk_table_msg .wdr_table_discounted_value {
	font-weight: 700;
	color: var(--oc-ink);
}

/* ---- Tabs (description, additional information, reviews) ------------ */

body.onlycat-product .woocommerce-tabs {
	margin-top: 2.5rem;
	clear: both;
}

body.onlycat-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 0.4rem;
	padding: 0;
	margin: 0 0 1.2rem;
	border-bottom: 1px solid var(--oc-line);
	overflow-x: auto;
}

body.onlycat-product .woocommerce-tabs ul.tabs::before,
body.onlycat-product .woocommerce-tabs ul.tabs li::before,
body.onlycat-product .woocommerce-tabs ul.tabs li::after {
	display: none; /* Woo's default chrome */
}

body.onlycat-product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

body.onlycat-product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.6rem 1rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--oc-ink-soft);
	border-bottom: 2px solid transparent;
}

body.onlycat-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--oc-ink);
	border-bottom-color: var(--oc-blue);
}

body.onlycat-product .woocommerce-Tabs-panel {
	max-width: 70ch;
	line-height: 1.65;
	color: var(--oc-ink-soft);
}

/* ---- Tabs: when Reviews is the only tab, show a heading, not a tab bar. */

body.onlycat-product .woocommerce-tabs ul.tabs:has(li:only-child) {
	display: none;
}

body.onlycat-product .woocommerce-Tabs-panel--reviews {
	max-width: none;
}

/* ---- Reviews --------------------------------------------------------- */

body.onlycat-product .woocommerce-Reviews-title {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--oc-ink);
	margin: 0 0 1.2rem;
}

body.onlycat-product .woocommerce-Reviews .commentlist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: 1rem;
	padding: 0;
	margin: 0 0 2rem;
	list-style: none;
}

body.onlycat-product #reviews #comments ol.commentlist li,
body.onlycat-product .woocommerce-Reviews .commentlist li.review {
	margin: 0;
	padding: 0;
}

body.onlycat-product #reviews #comments ol.commentlist li img.avatar {
	display: none;
}

body.onlycat-product #reviews #comments ol.commentlist li .comment_container,
body.onlycat-product .woocommerce-Reviews .comment_container {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	height: 100%;
	background: var(--oc-white);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-radius);
	padding: 1.1rem 1.2rem;
	margin: 0;
}

/* Woo's default inner box (border + 50px avatar offset) becomes plain text.
   Woo styles it via #reviews #comments, so match those ids to outrank it. */
body.onlycat-product #reviews #comments ol.commentlist li .comment-text,
body.onlycat-product .woocommerce-Reviews .comment-text {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
	flex: 1 1 auto;
}

body.onlycat-product .woocommerce-Reviews img.avatar {
	display: none;
}

body.onlycat-product .onlycat-review__avatar {
	flex: 0 0 2.4rem;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--oc-white);
}

body.onlycat-product .onlycat-review__avatar--1 { background: #1597ce; }
body.onlycat-product .onlycat-review__avatar--2 { background: #0e7bab; }
body.onlycat-product .onlycat-review__avatar--3 { background: #657b5b; }
body.onlycat-product .onlycat-review__avatar--4 { background: #d97864; }
body.onlycat-product .onlycat-review__avatar--5 { background: #35464f; }
body.onlycat-product .onlycat-review__avatar--6 { background: #8a6d3b; }

body.onlycat-product .woocommerce-Reviews .comment-text .star-rating {
	float: none;
	margin: 0 0 0.35rem;
	font-size: 0.9rem;
}

body.onlycat-product .woocommerce-Reviews .comment-text p.meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
	font-size: 0.85rem;
	color: var(--oc-ink-soft);
	margin: 0 0 0.5rem;
}

body.onlycat-product .woocommerce-review__author {
	color: var(--oc-ink);
	font-weight: 700;
}

body.onlycat-product .woocommerce-review__dash {
	display: none;
}

body.onlycat-product .woocommerce-review__verified {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--oc-blue-deep);
	background: var(--oc-blue-tint);
	border-radius: 999px;
	padding: 0.05rem 0.5rem;
	font-style: normal;
}

body.onlycat-product .woocommerce-Reviews .description {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--oc-ink-soft);
}

body.onlycat-product .woocommerce-Reviews .description p {
	margin: 0 0 0.6rem;
}

body.onlycat-product .woocommerce-Reviews .description p:last-child {
	margin-bottom: 0;
}

/* Many owners open with a one-line verdict: treat it as the review title. */
body.onlycat-product .woocommerce-Reviews .description p:first-child:not(:only-child) {
	font-weight: 700;
	color: var(--oc-ink);
}

/* ---- Review form ------------------------------------------------------ */

body.onlycat-product #review_form_wrapper {
	background: var(--oc-white);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-radius);
	padding: 1.4rem 1.5rem;
	max-width: 44rem;
}

body.onlycat-product #review_form .comment-reply-title {
	display: block;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--oc-ink);
	margin-bottom: 0.4rem;
}

body.onlycat-product #review_form .comment-notes {
	font-size: 0.85rem;
	color: var(--oc-ink-soft);
}

body.onlycat-product #review_form label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
	text-transform: none;
	letter-spacing: normal;
}

body.onlycat-product #review_form input[type="text"],
body.onlycat-product #review_form input[type="email"],
body.onlycat-product #review_form textarea {
	width: 100%;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--oc-line);
	border-radius: 8px;
	background: var(--oc-white);
	font: inherit;
	color: var(--oc-ink);
}

body.onlycat-product #review_form p.stars a {
	color: var(--oc-clay);
}

body.onlycat-product #review_form input#submit,
body.onlycat-product #review_form .form-submit input {
	background: var(--oc-blue);
	color: var(--oc-white);
	border: 0;
	border-radius: 999px;
	padding: 0.75rem 1.8rem;
	font-weight: 700;
	cursor: pointer;
}

body.onlycat-product #review_form input#submit:hover {
	background: var(--oc-blue-deep);
}

/* ---- Up-sells / related --------------------------------------------- */

body.onlycat-product .up-sells,
body.onlycat-product .related.products {
	margin-top: 3rem;
	clear: both;
}

body.onlycat-product .up-sells > h2,
body.onlycat-product .related.products > h2 {
	font-size: 1.3rem;
	margin-bottom: 1.2rem;
}

body.onlycat-product ul.products li.product {
	background: var(--oc-white);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-radius);
	padding: 1rem;
}

body.onlycat-product ul.products li.product .woocommerce-loop-product__title {
	font-size: 0.95rem;
	font-weight: 600;
}

/* ---- Configurator: payment cards (Phase 2) --------------------------
 * The cards are built client-side over the real <select>; when active the
 * form gains .onlycat-cards-active and the select row is visually retired
 * while remaining the form's source of truth and the no-JS fallback.
 */

body.onlycat-product form.cart.onlycat-cards-active table.variations tr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

body.onlycat-product .onlycat-payment-cards {
	border: 0;
	padding: 0;
	margin: 0 0 1rem;
	display: grid;
	gap: 0.6rem;
}

body.onlycat-product .onlycat-payment-cards legend {
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	padding: 0;
}

body.onlycat-product .onlycat-payment-card {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	background: var(--oc-white);
	border: 1.5px solid var(--oc-line);
	border-radius: var(--oc-radius);
	padding: 0.8rem 1rem;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}

body.onlycat-product .onlycat-payment-card:hover {
	border-color: var(--oc-blue);
}

body.onlycat-product .onlycat-payment-card:has(input:checked) {
	border-color: var(--oc-blue);
	background: var(--oc-blue-tint);
}

body.onlycat-product .onlycat-payment-card:has(input:focus-visible) {
	outline: 2px solid var(--oc-blue-deep);
	outline-offset: 2px;
}

body.onlycat-product .onlycat-payment-card input {
	margin-top: 0.25rem;
	accent-color: var(--oc-blue);
}

body.onlycat-product .onlycat-payment-card__body {
	display: block;
}

body.onlycat-product .onlycat-payment-card__topline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
}

body.onlycat-product .onlycat-payment-card__topline strong {
	font-size: 0.98rem;
}

body.onlycat-product .onlycat-payment-card__topline small {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--oc-blue-deep);
	background: var(--oc-blue-tint);
	border-radius: 999px;
	padding: 0.1rem 0.55rem;
}

body.onlycat-product .onlycat-payment-card:has(input:checked) .onlycat-payment-card__topline small {
	background: var(--oc-white);
}

body.onlycat-product .onlycat-payment-card__summary {
	display: block;
	font-size: 0.85rem;
	color: var(--oc-ink-soft);
	margin-top: 0.2rem;
}

body.onlycat-product .onlycat-payment-card__sub {
	display: block;
	font-size: 0.92rem;
	margin-top: 0.35rem;
}

body.onlycat-product .onlycat-payment-card__approx {
	display: block;
	font-size: 0.75rem;
	color: var(--oc-ink-soft);
	margin-top: 0.1rem;
}

body.onlycat-product .onlycat-accessory__note {
	display: block;
	flex-basis: 100%;
	font-size: 0.8rem;
	color: var(--oc-ink-soft);
	margin-top: 0.15rem;
}

/* ---- Accessory picker (Phase 3) --------------------------------------
 * Rendered from the product's cross-sells inside the add-to-cart form;
 * checkboxes ride the normal form POST, so this works without JavaScript.
 */

body.onlycat-product .onlycat-accessories {
	border: 0;
	padding: 0;
	margin: 1.2rem 0 0.4rem;
	display: grid;
	gap: 0.5rem;
}

body.onlycat-product .onlycat-accessories legend {
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	padding: 0;
	text-transform: none;
	letter-spacing: normal;
}

body.onlycat-product .onlycat-opening {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.8rem;
	margin-bottom: 0.3rem;
}

body.onlycat-product .onlycat-opening__label {
	font-size: 0.85rem;
	color: var(--oc-ink-soft);
}

body.onlycat-product .onlycat-opening__choices {
	display: inline-flex;
	gap: 0.4rem;
}

body.onlycat-product .onlycat-opening__choice {
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
}

body.onlycat-product .onlycat-opening__choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

body.onlycat-product .onlycat-opening__choice span {
	display: inline-block;
	padding: 0.3rem 0.85rem;
	border: 1.5px solid var(--oc-line);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	background: var(--oc-white);
	transition: border-color 0.12s ease, background 0.12s ease;
}

body.onlycat-product .onlycat-opening__choice:hover span {
	border-color: var(--oc-blue);
}

body.onlycat-product .onlycat-opening__choice input:checked + span {
	border-color: var(--oc-blue);
	background: var(--oc-blue-tint);
}

body.onlycat-product .onlycat-opening__choice input:focus-visible + span {
	outline: 2px solid var(--oc-blue-deep);
	outline-offset: 2px;
}

body.onlycat-product .onlycat-opening__note {
	background: var(--oc-oat);
	border-radius: 8px;
	padding: 0.6rem 0.9rem;
	font-size: 0.85rem;
	color: var(--oc-ink-soft);
	margin: 0 0 0.3rem;
}

/* The hidden attribute must beat our display:flex rows. */
body.onlycat-product form.cart [hidden] {
	display: none !important;
}

/* Numbered section chrome. */
body.onlycat-product .onlycat-section {
	margin: 1.4rem 0 0.4rem;
}

body.onlycat-product .onlycat-section > legend::before,
body.onlycat-product .onlycat-payment-cards > legend::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	margin-right: 0.45rem;
	border-radius: 50%;
	background: var(--oc-blue-tint);
	color: var(--oc-blue-deep);
	font-size: 0.75rem;
	font-weight: 700;
}

body.onlycat-product [data-step="1"] > legend::before { content: "1"; }
body.onlycat-product [data-step="2"] > legend::before { content: "2"; }
body.onlycat-product [data-step="3"] > legend::before { content: "3"; }
body.onlycat-product [data-step="4"] > legend::before { content: "4"; }

body.onlycat-product .onlycat-section__note {
	font-size: 0.85rem;
	color: var(--oc-ink-soft);
	margin: 0 0 0.3rem;
}

body.onlycat-product .onlycat-section__note--total {
	font-weight: 600;
	color: var(--oc-ink);
}

/* Quantity steppers. */
body.onlycat-product .onlycat-accessory--qty {
	cursor: default;
}

body.onlycat-product .onlycat-qty {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-left: auto;
	flex: 0 0 auto;
}

body.onlycat-product .onlycat-qty__btn {
	width: 1.9rem;
	height: 1.9rem;
	border: 1.5px solid var(--oc-line);
	border-radius: 50%;
	background: var(--oc-white);
	color: var(--oc-ink);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

body.onlycat-product .onlycat-qty__btn:hover {
	border-color: var(--oc-blue);
	color: var(--oc-blue-deep);
}

body.onlycat-product .onlycat-qty input[type="number"] {
	width: 2.6rem;
	text-align: center;
	padding: 0.3rem 0.1rem;
	border: 1.5px solid var(--oc-line);
	border-radius: 8px;
	font-size: 0.95rem;
	-moz-appearance: textfield;
}

body.onlycat-product .onlycat-qty input::-webkit-outer-spin-button,
body.onlycat-product .onlycat-qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.onlycat-product .onlycat-accessory__hint {
	display: block;
	flex-basis: 100%;
	font-size: 0.8rem;
	color: var(--oc-blue-deep);
	font-weight: 600;
}

body.onlycat-product .onlycat-accessory {
	position: relative;
	display: flex;
	gap: 0.7rem;
	align-items: center;
	background: var(--oc-white);
	border: 1.5px solid var(--oc-line);
	border-radius: var(--oc-radius);
	padding: 0.55rem 0.8rem;
	text-transform: none;
	letter-spacing: normal;
	transition: border-color 0.12s ease, background 0.12s ease;
	text-decoration: none;
	color: var(--oc-ink);
}

/* The clickable part of a row is the inner label; the Details link sits
   beside it so following it never toggles the checkbox. */
body.onlycat-product .onlycat-accessory__pick {
	display: flex;
	gap: 0.7rem;
	align-items: center;
	flex: 1 1 14rem;
	min-width: 0;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
}

body.onlycat-product .onlycat-accessory--link {
	cursor: pointer;
}

body.onlycat-product .onlycat-accessory__more {
	position: absolute;
	top: 0.35rem;
	right: 0.6rem;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--oc-blue-deep);
	text-decoration: none;
	white-space: nowrap;
	opacity: 0.75;
}

body.onlycat-product .onlycat-accessory__more:hover,
body.onlycat-product .onlycat-accessory__more:focus-visible {
	opacity: 1;
	text-decoration: underline;
}

/* Leave room for the corner link on the first line of the body. */
body.onlycat-product .onlycat-accessory__pick .onlycat-accessory__body {
	padding-right: 3.2rem;
}

/* Stepper rows: thumb | text | a narrow right column that stacks the
   Details link over the right-aligned stepper. The name keeps the full text
   width instead of sharing a line with the controls. */
body.onlycat-product .onlycat-accessory--qty {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb body more"
		"thumb body qty";
	column-gap: 0.7rem;
	row-gap: 0.35rem;
	align-items: center;
}

body.onlycat-product .onlycat-accessory--qty .onlycat-accessory__thumb {
	grid-area: thumb;
}

body.onlycat-product .onlycat-accessory--qty .onlycat-accessory__body {
	grid-area: body;
	padding-right: 0;
}

body.onlycat-product .onlycat-accessory--qty .onlycat-accessory__more {
	grid-area: more;
	position: static;
	justify-self: end;
	align-self: start;
}

body.onlycat-product .onlycat-accessory--qty .onlycat-qty {
	grid-area: qty;
	justify-self: end;
	align-self: end;
	margin: 0;
}

body.onlycat-product .onlycat-accessory:hover {
	border-color: var(--oc-blue);
}

body.onlycat-product .onlycat-accessory:has(input:checked) {
	border-color: var(--oc-blue);
	background: var(--oc-blue-tint);
}

body.onlycat-product .onlycat-accessory:has(input:focus-visible) {
	outline: 2px solid var(--oc-blue-deep);
	outline-offset: 2px;
}

body.onlycat-product .onlycat-accessory input {
	accent-color: var(--oc-blue);
	flex: 0 0 auto;
}

body.onlycat-product .onlycat-accessory__thumb {
	flex: 0 0 44px;
}

body.onlycat-product .onlycat-accessory__thumb img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

body.onlycat-product .onlycat-accessory__body {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.7rem;
	flex: 1 1 10rem;
	min-width: 0;
}

/* Rows wrap: when the name would be squeezed to a word a line, the qty
   stepper (or the row's tail) moves to its own line instead. */
body.onlycat-product .onlycat-accessory {
	flex-wrap: wrap;
}

body.onlycat-product .onlycat-accessory__name {
	font-size: 0.92rem;
	font-weight: 600;
}

body.onlycat-product .onlycat-accessory__price {
	font-size: 0.88rem;
	color: var(--oc-ink-soft);
}

body.onlycat-product .onlycat-accessory__price ins {
	text-decoration: none;
	color: var(--oc-ink);
}

body.onlycat-product .onlycat-accessory__cta {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--oc-blue-deep);
	flex-basis: 100%;
}

/* ---- Fit confidence line --------------------------------------------- */

body.onlycat-product .onlycat-fit {
	display: flex;
	gap: 0.55rem;
	align-items: baseline;
	background: var(--oc-oat);
	border-radius: 8px;
	padding: 0.65rem 0.9rem;
	font-size: 0.88rem;
	color: var(--oc-ink-soft);
	margin: 0.9rem 0;
}

body.onlycat-product .onlycat-fit__check {
	color: var(--oc-blue-deep);
	font-weight: 700;
}

body.onlycat-product .onlycat-fit a {
	color: var(--oc-blue-deep);
	font-weight: 600;
}

/* ---- Mobile first: stack below Woo's own 768px breakpoint ----------- */

@media (max-width: 768px) {
	body.onlycat-product div.product .summary {
		padding: 1.2rem 1.1rem 1.1rem;
	}

	body.onlycat-product .single_add_to_cart_button {
		width: 100%;
	}
}

/* ---- Imported reviews shown in translation (Stage 3) ---------------- */

body.onlycat-product .onlycat-review__translation-note {
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	color: var(--oc-ink-soft);
}

body.onlycat-product .onlycat-review__original {
	margin: 0.35rem 0 0;
	font-size: 0.85rem;
}

body.onlycat-product .onlycat-review__original summary {
	cursor: pointer;
	color: var(--oc-blue-deep);
	font-size: 0.8rem;
}

body.onlycat-product .onlycat-review__original p {
	margin: 0.5rem 0 0;
	color: var(--oc-ink-soft);
}

/* ---- WooCommerce clearfix vs. the review grid ----------------------- */

/* WooCommerce sets `content: " "; display: table` on ::before and ::after of
   ol.commentlist to clear its floated layout. The list is a grid here, so both
   pseudo-elements become grid items: the ::before took the first cell and left
   an empty gap at the top left, the ::after took a cell at the end. */

body.onlycat-product .woocommerce-Reviews .commentlist::before,
body.onlycat-product .woocommerce-Reviews .commentlist::after,
body.onlycat-product #reviews #comments ol.commentlist::before,
body.onlycat-product #reviews #comments ol.commentlist::after {
	content: none;
	display: none;
}

/* ---- Review source ---------------------------------------------------- */

body.onlycat-product .onlycat-review__source {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--oc-ink-soft);
	text-decoration: none;
	white-space: nowrap;
}

body.onlycat-product a.onlycat-review__source:hover,
body.onlycat-product a.onlycat-review__source:focus-visible {
	color: var(--oc-blue-deep);
	text-decoration: underline;
}

body.onlycat-product .onlycat-review__source-mark {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	background: var(--oc-ink-soft);
	color: var(--oc-white);
	font-size: 0.66rem;
	font-weight: 700;
	line-height: 1;
}

/* Platform logos, drawn as background images so a review costs no extra
   markup for its badge and the two SVGs are fetched once per page. Both are
   the platforms' own marks, supplied by the site owner. */

body.onlycat-product .onlycat-review__source-mark--logo {
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 0;
}

body.onlycat-product .onlycat-review__source-mark--google {
	background-image: url("icons/google-g.svg");
}

body.onlycat-product .onlycat-review__source-mark--trustpilot {
	background-image: url("icons/trustpilot-star.svg");
}

body.onlycat-product .onlycat-review__source-mark--indiegogo { background: #e41473; }

body.onlycat-product .onlycat-review__source-out {
	font-size: 0.7rem;
	opacity: 0.75;
}

/* ---- Review pagination ------------------------------------------------ */

/* WooCommerce draws pagination as bordered, floated cells. Reset that first,
   with enough specificity to outrank `.woocommerce nav.woocommerce-pagination
   ul li`, then restyle as separated pills. */

body.onlycat-product nav.woocommerce-pagination {
	margin: 0.5rem 0 2rem;
	text-align: center;
}

body.onlycat-product nav.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	border: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: normal;
}

body.onlycat-product nav.woocommerce-pagination ul.page-numbers li {
	border: 0;
	float: none;
	margin: 0;
	padding: 0;
	overflow: visible;
	list-style: none;
}

body.onlycat-product nav.woocommerce-pagination ul.page-numbers li a.page-numbers,
body.onlycat-product nav.woocommerce-pagination ul.page-numbers li span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.3rem;
	height: 2.3rem;
	padding: 0 0.55rem;
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-radius);
	background: var(--oc-white);
	color: var(--oc-blue-deep);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

body.onlycat-product nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
body.onlycat-product nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible {
	background: var(--oc-blue-deep);
	border-color: var(--oc-blue-deep);
	color: var(--oc-white);
}

body.onlycat-product nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current {
	background: var(--oc-blue-deep);
	border-color: var(--oc-blue-deep);
	color: var(--oc-white);
}

body.onlycat-product nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots {
	min-width: 1.4rem;
	padding: 0 0.2rem;
	border-color: transparent;
	background: none;
	color: var(--oc-ink-soft);
}

/* Comfortable touch targets for the pagination on small screens: the desktop
   pill is 2.3rem, under the 44px minimum. */

@media (max-width: 768px) {
	body.onlycat-product nav.woocommerce-pagination ul.page-numbers li a.page-numbers,
	body.onlycat-product nav.woocommerce-pagination ul.page-numbers li span.page-numbers {
		min-width: 2.75rem;
		height: 2.75rem;
	}

	body.onlycat-product nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots {
		min-width: 1.6rem;
		height: 2.75rem;
	}
}

/* ---- Review media ----------------------------------------------------- */

body.onlycat-product .onlycat-review__media {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
}

body.onlycat-product .onlycat-review__media-item {
	margin: 0;
	min-width: 0;
	flex: 1 1 100%;
}

body.onlycat-product .onlycat-review__video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--oc-radius);
	background: var(--oc-ink);
}

/* The clips play themselves while on screen, silent and looping, so they read
   as moving stills. A click pauses one, hence the pointer. */

body.onlycat-product .onlycat-review__video {
	cursor: pointer;
}

body.onlycat-product .onlycat-review__video:focus-visible {
	outline: 2px solid var(--oc-blue-deep);
	outline-offset: 2px;
}

/* Photos sit two or three to a row and crop to a square thumbnail; the full
   image opens in a new tab. */

body.onlycat-product .onlycat-review__media-item--image {
	flex: 0 0 auto;
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	overflow: hidden;
	border-radius: var(--oc-radius);
	border: 1px solid var(--oc-line);
}

body.onlycat-product .onlycat-review__media-item--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Rating as a number ---------------------------------------------- */

body.onlycat-product .onlycat-rating-value {
	font-weight: 700;
	color: var(--oc-ink);
	white-space: nowrap;
}

body.onlycat-product .woocommerce-product-rating .onlycat-rating-value {
	margin: 0 0.15rem 0 0.1rem;
}

body.onlycat-product .woocommerce-Reviews-title .onlycat-rating-value {
	margin-left: 0.5rem;
	font-size: 0.85em;
	color: var(--oc-ink-soft);
}

/* Review headline, where the source platform has one (Trustpilot does). */

body.onlycat-product .onlycat-review__title {
	margin: 0 0 0.35rem;
	font-weight: 700;
	color: var(--oc-ink);
}

body.onlycat-product .onlycat-review__original .onlycat-review__title {
	font-size: 0.9em;
}

/* ---- Long reviews: clamped with a control to expand ------------------- */

/* The clamp is applied by assets/review-media.js, and only to bodies that
   actually overflow. Without JavaScript every review shows in full, which is
   the right way round: the content is never the thing that depends on a
   script. */

body.onlycat-product .onlycat-review__body.is-clamped {
	display: -webkit-box;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.onlycat-product .onlycat-review__more {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0.4rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--oc-blue-deep);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

body.onlycat-product .onlycat-review__more:hover,
body.onlycat-product .onlycat-review__more:focus-visible {
	text-decoration: underline;
}

body.onlycat-product .onlycat-review__more::after {
	content: "▾";
	font-size: 0.75em;
}

body.onlycat-product .onlycat-review__more[aria-expanded="true"]::after {
	content: "▴";
}

/* ---- Reviews feed page ------------------------------------------------ */

body.onlycat-reviews-feed-page .onlycat-reviews-page {
	max-width: 1180px;
	margin: 0 auto;
	padding: 2rem 1.1rem 3rem;
}

body.onlycat-reviews-feed-page .onlycat-reviews-page__header h1 {
	margin: 0 0 0.6rem;
	color: var(--oc-ink);
}

body.onlycat-reviews-feed-page .onlycat-reviews-page__intro {
	max-width: 62ch;
	margin: 0 0 2rem;
	color: var(--oc-ink-soft);
}

/* WooCommerce scopes its entire star-rating box to `.woocommerce`, and this
   page has no product markup so it carries no such class — which is why the
   stars rendered as the raw sentence "Rated 4.88 out of 5". The two @font-face
   rules are declared unscoped in woocommerce.css, so only the box needs
   restating. Deliberately scoped to the feed page: the product pages already
   get this from WooCommerce and must not be second-guessed. */
body.onlycat-reviews-feed-page .star-rating {
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 5.4em;
	height: 1em;
	line-height: 1;
	font-family: WooCommerce, star;
	font-size: 1em;
	font-weight: 400;
	letter-spacing: 0;
}

body.onlycat-reviews-feed-page .star-rating::before {
	content: "sssss";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--oc-line);
}

body.onlycat-reviews-feed-page .star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	padding-top: 1.5em;
}

body.onlycat-reviews-feed-page .star-rating span::before {
	content: "SSSSS";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--oc-clay);
}

/* ---- The score card --------------------------------------------------- */

body.onlycat-reviews-feed-page .onlycat-reviews-feed__summary {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: 1.4rem 2.2rem;
	align-items: center;
	background: var(--oc-white);
	border: 1px solid var(--oc-line);
	border-radius: var(--oc-radius);
	padding: 1.5rem 1.6rem;
	margin: 0 0 2rem;
}

body.onlycat-reviews-feed-page .onlycat-reviews-feed__score {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding-right: 2.2rem;
	border-right: 1px solid var(--oc-line);
}

body.onlycat-reviews-feed-page .onlycat-reviews-feed__average {
	display: flex;
	align-items: baseline;
	gap: 0.15rem;
	margin: 0;
	color: var(--oc-ink);
	line-height: 1;
}

body.onlycat-reviews-feed-page .onlycat-reviews-feed__average-value {
	font-size: clamp(2.4rem, 7vw, 3.2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

body.onlycat-reviews-feed-page .onlycat-reviews-feed__average-max {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--oc-ink-soft);
}

body.onlycat-reviews-feed-page .onlycat-reviews-feed__score .star-rating {
	font-size: 1.15rem;
}

body.onlycat-reviews-feed-page .onlycat-reviews-feed__count {
	margin: 0.15rem 0 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--oc-ink-soft);
	white-space: nowrap;
}

/* Hello Elementor does not ship a .screen-reader-text rule, and the
   distribution's only accessible text lives in one. Define it here rather
   than assume the parent theme's stylesheet. */
body.onlycat-product .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- The distribution ------------------------------------------------- */

body.onlycat-reviews-feed-page .onlycat-reviews-feed__bars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.3rem;
	min-width: 0;
}

body.onlycat-reviews-feed-page .onlycat-reviews-feed__bar-row {
	display: grid;
	grid-template-columns: 2.6em minmax(0, 1fr) 3.4em;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.85rem;
	color: var(--oc-ink-soft);
	margin: 0;
}

body.onlycat-reviews-feed-page .onlycat-reviews-feed__bar-row::before,
body.onlycat-reviews-feed-page .onlycat-reviews-feed__bar-row::after {
	content: none;
}

body.onlycat-reviews-feed-page .onlycat-reviews-feed__bar-label {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	font-variant-numeric: tabular-nums;
	justify-content: flex-end;
}

body.onlycat-reviews-feed-page .onlycat-reviews-feed__bar-star {
	color: var(--oc-clay);
	font-size: 0.9em;
}

body.onlycat-reviews-feed-page .onlycat-reviews-feed__bar {
	position: relative;
	display: block;
	height: 0.55rem;
	border-radius: 999px;
	background: var(--oc-oat);
	overflow: hidden;
}

body.onlycat-reviews-feed-page .onlycat-reviews-feed__bar-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--oc-clay);
	min-width: 0;
}

body.onlycat-reviews-feed-page .onlycat-reviews-feed__bar-count {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* The rule spans the whole card, so it goes on the full-width grid cell and
   the text inside it carries the measure. Constraining the cell instead left
   the rule stopping two-thirds of the way across. */
body.onlycat-reviews-feed-page .onlycat-reviews-feed__provenance {
	grid-column: 1 / -1;
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--oc-line);
	font-size: 0.85rem;
	color: var(--oc-ink-soft);
}

body.onlycat-reviews-feed-page .onlycat-reviews-feed__provenance span {
	display: block;
	max-width: 88ch;
}

@media (max-width: 640px) {
	body.onlycat-reviews-feed-page .onlycat-reviews-feed__summary {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.1rem;
	}

	body.onlycat-reviews-feed-page .onlycat-reviews-feed__score {
		padding-right: 0;
		padding-bottom: 1.1rem;
		border-right: 0;
		border-bottom: 1px solid var(--oc-line);
	}
}

/* The feed has no product gallery, so WooCommerce does not print the
   PhotoSwipe container here; review photos fall back to opening the image,
   which assets/review-media.js checks for at click time. */

/* Section 5 · Before you order: three acknowledgements the form will not
   submit without (ADR 0009). One bordered card, rows divided by hairlines. */
body.onlycat-product [data-step="5"] > legend::before { content: "5"; }

body.onlycat-product .onlycat-acknowledge__item {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	padding: 0.6rem 0.8rem;
	background: var(--oc-white);
	border: 1.5px solid var(--oc-line);
	border-radius: var(--oc-radius);
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--oc-ink);
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}

body.onlycat-product .onlycat-acknowledge__item + .onlycat-acknowledge__item {
	margin-top: 0.4rem;
}

body.onlycat-product .onlycat-acknowledge__item:hover {
	border-color: var(--oc-blue);
}

body.onlycat-product .onlycat-acknowledge__item:has(input:checked) {
	border-color: var(--oc-blue);
	background: var(--oc-blue-tint);
}

body.onlycat-product .onlycat-acknowledge__item:has(input:focus-visible) {
	outline: 2px solid var(--oc-blue-deep);
	outline-offset: 2px;
}

body.onlycat-product .onlycat-acknowledge__item input {
	accent-color: var(--oc-blue);
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0.15rem 0 0;
}