/* ==========================================================================
   Single product page.
   Loaded only on is_product() — see inc/assets.php.
   ========================================================================== */

.om-single {
	padding-block: 36px 0;
}

/* Gallery left, buy panel right — 55/45 like the reference. */
.om-single__grid {
	display: grid;
	grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
	gap: 56px;
	align-items: start;
}

/* ==========================================================================
   Gallery
   ========================================================================== */
.om-gallery {
	display: grid;
	gap: 16px;
}
.om-gallery--multi {
	grid-template-columns: 88px minmax(0, 1fr);
}

.om-gallery__thumbs {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.om-gallery__thumb {
	padding: 0;
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius-sm);
	/* Tinted by the product's category tone, like the reference. */
	background: var(--om-pastel, var(--om-indigo-wash));
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 1 / 1;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.om-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.om-gallery__thumb:hover {
	border-color: var(--om-ink-40);
}
.om-gallery__thumb.is-active {
	border-color: var(--om-ink);
	box-shadow: 0 0 0 1px var(--om-ink);
}

/* Square frame with the artwork centred inside it — the reference's photo card.
   The covers carry their own pastel wash on a canvas ground, so the frame is
   canvas too and only the hairline draws the edge. */
.om-gallery__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 20px;
	background: var(--om-canvas);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius);
	overflow: hidden;
}
.om-gallery__slide {
	display: none;
	margin: 0;
	width: 100%;
}
.om-gallery__slide.is-active {
	display: block;
}
.om-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--om-radius-sm);
}

.om-gallery__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--om-line);
	background: var(--om-white);
	color: var(--om-ink);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.om-gallery__arrow--prev {
	left: 16px;
}
.om-gallery__arrow--prev:hover {
	border-color: var(--om-ink);
}
.om-gallery__arrow--next {
	right: 16px;
	background: var(--om-ink);
	border-color: var(--om-ink);
	color: var(--om-white);
}
.om-gallery__arrow--next:hover {
	background: var(--om-indigo);
	border-color: var(--om-indigo);
}

/* Magnifier in the stage corner. Hidden until main.js confirms it has a
   lightbox to open — the `hidden` attribute is removed there. */
.om-gallery__zoom {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--om-line);
	background: var(--om-white);
	color: var(--om-ink);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.om-gallery__zoom:hover {
	background: var(--om-ink);
	border-color: var(--om-ink);
	color: var(--om-white);
}
.om-gallery__img.is-zoomable {
	cursor: zoom-in;
}

/* ---------- Lightbox ----------
   Built by main.js on first open and appended to <body>. Near full-screen on
   purpose: the screenshots are UI, and a shopper opening one wants to read
   the labels, not admire a thumbnail with a shadow. */
.om-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	background: rgba(23, 22, 28, 0.94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	cursor: zoom-out;
}
.om-lightbox[hidden] {
	display: none;
}
.om-lightbox-open,
.om-lightbox-open body {
	overflow: hidden;
}
.om-lightbox__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
}
.om-lightbox__img {
	display: block;
	max-width: 96vw;
	max-height: 92vh;
	width: auto;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
	cursor: default;
	background: var(--om-white);
}
.om-lightbox__close,
.om-lightbox__arrow {
	position: absolute;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.1);
	color: var(--om-white);
	cursor: pointer;
	transition: background 0.15s ease;
}
.om-lightbox__close:hover,
.om-lightbox__arrow:hover {
	background: var(--om-indigo);
	border-color: var(--om-indigo);
}
.om-lightbox__close:focus-visible,
.om-lightbox__arrow:focus-visible {
	outline: 2px solid var(--om-white);
	outline-offset: 2px;
}
.om-lightbox__close {
	top: 18px;
	right: 18px;
}
.om-lightbox__arrow {
	top: 50%;
	transform: translateY(-50%);
}
.om-lightbox__arrow--prev {
	left: 18px;
}
.om-lightbox__arrow--next {
	right: 18px;
}
.om-lightbox__count {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	font-family: var(--om-mono);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   Buy panel
   ========================================================================== */
.om-single__panel {
	position: sticky;
	top: 96px;
}

.om-buy__eyebrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
}
.om-buy__cat {
	font-family: var(--om-mono);
	font-size: 0.78rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--om-ink-60);
	text-decoration: none;
}
.om-buy__cat:hover {
	color: var(--om-indigo-deep);
}

.om-buy__title {
	font-size: clamp(1.9rem, 3vw, 2.5rem);
	font-weight: 600;
	line-height: 1.12;
	margin: 0 0 14px;
}

.om-buy__rating {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.92rem;
	margin: 0 0 20px;
}
.om-buy__rating strong {
	font-weight: 600;
}
.om-buy__reviews-link {
	color: var(--om-ink-60);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--om-line);
}
.om-buy__reviews-link:hover {
	color: var(--om-ink);
	text-decoration-color: currentColor;
}

/* Price. WooCommerce prints <del>/<ins> around the amounts when on sale. */
.om-buy__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	font-family: var(--om-display);
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--om-ink);
	margin-bottom: 20px;
}
.om-buy__price del {
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--om-ink-40);
	text-decoration-thickness: 1px;
}
.om-buy__price ins {
	background: none;
	text-decoration: none;
	color: inherit;
}
.om-buy__save {
	align-self: center;
	background: var(--om-amber);
	color: var(--om-ink);
	font-family: var(--om-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	padding: 5px 10px;
	border-radius: 8px;
}

.om-buy .woocommerce-product-details__short-description {
	color: var(--om-ink-60);
	padding-bottom: 22px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--om-line);
}
.om-buy .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

.om-buy__row {
	margin-bottom: 22px;
}
.om-buy__label {
	font-family: var(--om-mono);
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--om-ink-40);
	margin: 0 0 10px;
}
.om-buy__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

/* ---------- Cart form ---------- */
.om-buy form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 16px;
}
/* WooCommerce's clearfix ::before/::after become flex items here and push
   the first control 12px in from the panel edge. */
.woocommerce div.product .om-buy form.cart::before,
.woocommerce div.product .om-buy form.cart::after {
	display: none;
}
/* Most products are sold_individually, so WooCommerce renders a hidden
   quantity input instead of a stepper — keep it out of the flex row. */
.om-buy form.cart .quantity.hidden {
	display: none;
}
.om-buy form.cart .quantity {
	flex: 0 0 auto;
}
.woocommerce div.product .om-buy form.cart div.quantity {
	margin: 0;
}
/* Licence products get the − n + stepper (main.css); here it matches the
   height of the two buttons beside it. */
.om-buy form.cart .quantity.om-qty {
	padding: 6px;
}
.om-buy .single_add_to_cart_button,
.om-buy .om-buy__now {
	flex: 1 1 170px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 15px 24px;
	border-radius: 14px;
	border: 1px solid transparent;
	font-family: var(--om-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
/* WooCommerce paints .button.alt its own purple from a three-class selector,
   so these carry the body's .woocommerce class to out-specify it. */
.woocommerce .om-buy .single_add_to_cart_button.button {
	border-radius: 14px;
	background: var(--om-indigo);
	color: var(--om-white);
	text-shadow: none;
}
.woocommerce .om-buy .single_add_to_cart_button.button:hover {
	background: var(--om-indigo-deep);
	color: var(--om-white);
}
.om-buy .single_add_to_cart_button::before {
	content: "";
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h2.2l2.3 11.2a2 2 0 0 0 2 1.6h8.2a2 2 0 0 0 2-1.55L20.5 7H5.2'/%3E%3Ccircle cx='9.5' cy='20' r='1.4'/%3E%3Ccircle cx='17.5' cy='20' r='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
}
.om-buy .om-buy__now {
	background: transparent;
	border-color: var(--om-line);
	color: var(--om-ink);
}
.om-buy .om-buy__now:hover {
	border-color: var(--om-ink);
}

/* Aside cards (content-single-product.php). On desktop the copy inside the
   gallery shows, right under the main image: the gallery is flattened into
   one grid so the thumbnail rail runs down the left of both the image and
   the card, filling the gap the rail leaves beside the image. The spare
   height goes to the second row (1fr), so the card always sits snug under
   the image. Once the page is one column the copy after the panel shows. */
.om-single__aside--after {
	display: none;
}
.om-single__aside--gallery {
	margin-top: 20px;
	container-type: inline-size;
}
.om-single__gallery:has(> .om-gallery--multi + .om-single__aside) {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	gap: 20px 16px;
}
.om-single__gallery:has(> .om-gallery--multi + .om-single__aside) > .om-gallery {
	display: contents;
}
.om-single__gallery:has(> .om-gallery--multi + .om-single__aside) .om-gallery__thumbs {
	grid-column: 1;
	grid-row: 1 / span 2;
}
.om-single__gallery:has(> .om-gallery--multi + .om-single__aside) .om-gallery__stage {
	grid-column: 2;
	grid-row: 1;
}
.om-gallery--multi + .om-single__aside--gallery {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	margin-top: 0;
}

/* Gumroad alternative (mu-plugins/ombelo-gumroad.php). A white card with a
   lift so it reads as a second way to buy, not page furniture; the button
   wears Gumroad's own pink so shoppers recognise the store at a glance. */
/* Stacked under the image (it is narrow there); text and button side by side
   when the card is wide, as on a tablet. */
.om-gumroad {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 18px;
	padding: 24px 26px;
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius);
	background: var(--om-white);
	box-shadow: var(--om-shadow);
}
.om-gumroad__text {
	flex: 1 1 auto;
	min-width: 0;
}
.om-gumroad__title {
	margin: 0 0 6px;
	font-family: var(--om-display);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--om-ink);
}
.om-gumroad__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 15px 26px;
	border-radius: 14px;
	border: 1px solid var(--om-ink);
	background: #ff90e8;
	box-shadow: 3px 3px 0 var(--om-ink);
	color: var(--om-ink);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.om-gumroad__btn:hover {
	color: var(--om-ink);
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--om-ink);
}
.om-gumroad__ext {
	font-family: var(--om-mono);
	font-size: 0.85rem;
}
.om-gumroad__note {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--om-ink-60);
}
@container (min-width: 620px) {
	.om-gumroad {
		flex-direction: row;
		align-items: center;
		gap: 24px;
	}
}

/* Live demo link (inc/woocommerce.php, ombelo_demo_button). */
.om-demo {
	margin-bottom: 22px;
}
.om-demo__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 22px;
	border-radius: 14px;
	border: 1px solid #bfe0d0;
	background: var(--om-mint);
	color: var(--om-ink);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.om-demo__btn:hover {
	border-color: #1b8558;
	background: #cfe9dc;
	color: var(--om-ink);
}
.om-demo__btn svg {
	flex: 0 0 auto;
	color: #1b8558;
}
.om-demo__ext {
	font-family: var(--om-mono);
	font-size: 0.85rem;
}
.om-demo__note {
	margin: 9px 0 0;
	text-align: center;
	font-size: 0.84rem;
	color: var(--om-ink-60);
}

/* ---------- Trust + meta ---------- */
.om-buy__trust {
	list-style: none;
	margin: 0 0 22px;
	padding: 20px 0 0;
	border-top: 1px solid var(--om-line);
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-size: 0.92rem;
	color: var(--om-ink-60);
}
.om-buy__trust li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.om-buy__trust svg {
	flex: 0 0 auto;
	margin-top: 4px;
	color: #3f9d78;
}
.om-buy__pay {
	margin: -8px 0 22px 26px;
}

.om-buy__meta {
	border-top: 1px solid var(--om-line);
	padding-top: 20px;
	font-size: 0.9rem;
	color: var(--om-ink-60);
}
.om-buy__metarow {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	margin: 0 0 8px;
}
.om-buy__metarow:last-child {
	margin-bottom: 0;
}
.om-buy__metarow > span:first-child {
	min-width: 76px;
	font-family: var(--om-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--om-ink-40);
}
.om-buy__metarow a {
	color: var(--om-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--om-line);
}
.om-buy__metarow a:hover {
	border-bottom-color: var(--om-ink);
}
.om-buy__copy {
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--om-line);
	background: none;
	font: inherit;
	color: var(--om-ink);
	cursor: pointer;
}
.om-buy__copy:hover {
	border-bottom-color: var(--om-ink);
}
.om-buy__copy.is-done {
	color: #3f9d78;
	border-bottom-color: transparent;
}

/* ==========================================================================
   Tabs
   ========================================================================== */
.om-single__detail {
	margin-top: 88px;
	padding-bottom: 88px;
}

.om-tabs__rail {
	border-bottom: 1px solid var(--om-line);
	margin-bottom: 40px;
	overflow-x: auto;
	scrollbar-width: none;
}
.om-tabs__rail::-webkit-scrollbar {
	display: none;
}
.om-tabs__list {
	display: flex;
	justify-content: center;
	gap: 36px;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}
.om-tabs__list li a {
	display: inline-block;
	padding: 0 2px 15px;
	font-family: var(--om-display);
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--om-ink-40);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.om-tabs__list li a:hover {
	color: var(--om-ink);
}
.om-tabs__list li.active a {
	color: var(--om-ink);
	border-bottom-color: var(--om-indigo);
}

.om-tabs__panel > h2,
.om-tabs__h {
	font-size: 1.35rem;
	font-weight: 600;
	margin: 0 0 16px;
}
/* Prose tabs read better narrow; the reviews tab stays full width. */
.woocommerce-Tabs-panel--description,
.woocommerce-Tabs-panel--whats_inside,
.woocommerce-Tabs-panel--additional_information {
	max-width: 74ch;
	margin-inline: auto;
	color: var(--om-ink-60);
}
.woocommerce-Tabs-panel--description h2,
.woocommerce-Tabs-panel--description h3,
.woocommerce-Tabs-panel--whats_inside h2 {
	color: var(--om-ink);
}

.om-inside {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 32px;
}
.om-inside li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.om-inside svg {
	flex: 0 0 auto;
	margin-top: 4px;
	color: var(--om-indigo);
}

/* ==========================================================================
   Reviews
   ========================================================================== */
.om-reviews {
	scroll-margin-top: 100px;
}

.om-reviews__summary {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	align-items: center;
	gap: 52px;
	padding-bottom: 34px;
	margin-bottom: 34px;
	border-bottom: 1px solid var(--om-line);
}
.om-reviews__score {
	text-align: center;
	border-right: 1px solid var(--om-line);
	padding-right: 28px;
}
.om-reviews__avg {
	margin: 0 0 10px;
	line-height: 1;
}
.om-reviews__avg strong {
	font-family: var(--om-display);
	font-size: 3rem;
	font-weight: 700;
}
.om-reviews__avg span {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--om-ink-40);
	margin-left: 6px;
}
.om-reviews__total {
	margin: 10px 0 0;
	font-family: var(--om-mono);
	font-size: 0.78rem;
	color: var(--om-ink-40);
}

.om-reviews__bars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.om-reviews__bars li {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) 34px;
	align-items: center;
	gap: 14px;
	font-size: 0.85rem;
	color: var(--om-ink-60);
}
.om-bar {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: var(--om-surface);
	overflow: hidden;
}
.om-bar__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--om-amber);
}
.om-reviews__n {
	text-align: right;
	font-family: var(--om-mono);
	font-size: 0.78rem;
	color: var(--om-ink-40);
}

.om-reviews__listhead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px 18px;
	margin-bottom: 4px;
}
.om-reviews__h {
	grid-column: 1 / -1;
	font-size: 1.2rem;
	font-weight: 600;
	margin: 0;
}
.om-reviews__showing {
	margin: 0;
	font-family: var(--om-mono);
	font-size: 0.76rem;
	color: var(--om-ink-40);
}
.om-reviews__sort {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	color: var(--om-ink-60);
}
.om-reviews__sort select {
	appearance: none;
	-webkit-appearance: none;
	padding: 9px 38px 9px 16px;
	border: 1px solid var(--om-line);
	border-radius: 999px;
	background-color: var(--om-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2317161c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	font-family: var(--om-body);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--om-ink);
	cursor: pointer;
}
.om-reviews__sort select:hover {
	border-color: var(--om-ink-40);
}
.om-reviews__go {
	padding: 9px 16px;
	border: 1px solid var(--om-line);
	border-radius: 999px;
	background: var(--om-white);
	font-family: var(--om-body);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--om-ink);
	cursor: pointer;
}
/* The select submits itself once JS is up, so the fallback button goes away. */
.om-reviews__sort.is-js .om-reviews__go {
	display: none;
}

.om-reviews__items {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Woo resets padding, margin and borders on the list items — put ours back. */
.woocommerce #reviews #comments ol.commentlist li.om-review {
	padding: 24px 0;
	margin: 0;
	border-top: 1px solid var(--om-line);
}
.om-review .children {
	list-style: none;
	margin: 20px 0 0 46px;
	padding: 0;
}
.om-review .children .om-review {
	padding-bottom: 0;
}
.om-review__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}
.om-review__who {
	margin-right: auto;
}
.om-review__name {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 5px;
	font-weight: 600;
}
.om-review__verified {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--om-mint);
	color: #1f6b52;
	font-size: 0.72rem;
	font-weight: 600;
}
.om-review__date {
	font-family: var(--om-mono);
	font-size: 0.76rem;
	color: var(--om-ink-40);
	white-space: nowrap;
}
/* WooCommerce boxes the comment text in a bordered card — we want plain prose. */
.woocommerce #reviews #comments ol.commentlist li .comment-text.om-review__text {
	margin: 0;
	padding: 0 0 0 52px;
	border: 0;
	border-radius: 0;
	color: var(--om-ink-60);
}
.om-review__text p:last-child {
	margin-bottom: 0;
}

.om-reviews__pages {
	margin-top: 32px;
}
.om-reviews__pages ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}
.om-reviews__pages ul.page-numbers li {
	float: none;
	margin: 0;
	border: 0;
	overflow: visible;
}
.om-reviews__pages ul.page-numbers li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 13px;
	border-radius: 999px;
	border: 1px solid var(--om-line);
	background: var(--om-white);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--om-ink);
	text-decoration: none;
}
.om-reviews__pages ul.page-numbers li .page-numbers.current {
	background: var(--om-indigo);
	border-color: var(--om-indigo);
	color: var(--om-white);
}

.om-reviews__none {
	max-width: 46ch;
	margin: 0 auto;
	padding: 48px 32px;
	text-align: center;
	background: var(--om-white);
	border-radius: var(--om-radius);
	box-shadow: var(--om-shadow);
}
.om-reviews__nonemark {
	margin: 0 0 6px;
	font-size: 2rem;
	line-height: 1;
	color: var(--om-line);
}
.om-reviews__none h3 {
	font-size: 1.25rem;
	margin: 0 0 8px;
}
.om-reviews__none p {
	margin: 0;
	color: var(--om-ink-60);
}

.om-reviews__gate {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 640px;
	margin: 32px auto 0;
	padding: 16px 22px;
	border-radius: var(--om-radius-sm);
	background: var(--om-surface);
	font-size: 0.92rem;
	color: var(--om-ink-60);
}
.om-reviews__gate svg {
	flex: 0 0 auto;
	color: var(--om-ink-40);
}

/* ---------- Review form ---------- */
.om-reviews__formwrap {
	max-width: 680px;
	margin: 40px auto 0;
	padding: 30px 36px 34px;
	background: var(--om-white);
	border-radius: var(--om-radius);
	box-shadow: var(--om-shadow);
}
.om-reviews__formwrap .comment-reply-title {
	display: block;
	font-family: var(--om-display);
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 6px;
}
.om-reviews__formwrap .comment-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
.om-reviews__formwrap .comment-form-rating,
.om-reviews__formwrap .comment-form-comment,
.om-reviews__formwrap .comment-form-cookies-consent,
.om-reviews__formwrap .comment-notes,
.om-reviews__formwrap .form-submit {
	grid-column: 1 / -1;
}
.om-reviews__formwrap .comment-form p {
	margin: 0;
}
.om-reviews__formwrap label {
	display: block;
	margin-bottom: 7px;
	font-size: 0.85rem;
	font-weight: 600;
}
.om-reviews__formwrap .required {
	color: var(--om-indigo);
}
.om-reviews__formwrap input[type="text"],
.om-reviews__formwrap input[type="email"],
.om-reviews__formwrap textarea,
.om-reviews__formwrap select {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius-sm);
	background: var(--om-canvas);
	font-family: var(--om-body);
	font-size: 0.95rem;
	color: var(--om-ink);
}
.om-reviews__formwrap textarea {
	min-height: 130px;
	resize: vertical;
}
.om-reviews__formwrap input:focus,
.om-reviews__formwrap textarea:focus,
.om-reviews__formwrap select:focus {
	outline: 2px solid var(--om-indigo);
	outline-offset: 1px;
	border-color: transparent;
}
/* WooCommerce swaps the rating select for these star links. */
.om-reviews__formwrap p.stars a {
	color: var(--om-amber);
}
/* The consent checkbox is the one label that stays on the same line as its box. */
.om-reviews__formwrap .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 10px;
}
.om-reviews__formwrap .comment-form-cookies-consent input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--om-indigo);
	flex: none;
}
.om-reviews__formwrap .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
	color: var(--om-ink-60);
}
/* Woo paints #respond input#submit with three ids — meet it there. */
.woocommerce #reviews #respond .form-submit input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 14px 30px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: var(--om-indigo);
	color: var(--om-white);
	font-family: var(--om-body);
	font-size: 1rem;
	font-weight: 600;
	text-shadow: none;
	cursor: pointer;
	transition: background 0.15s ease;
}
.woocommerce #reviews #respond .form-submit input#submit:hover {
	background: var(--om-indigo-deep);
}
.om-reviews__formwrap .must-log-in {
	margin: 0;
	color: var(--om-ink-60);
}

/* ==========================================================================
   Upsells + related
   ========================================================================== */
.om-related,
.om-single__detail .up-sells {
	margin-top: 80px;
	padding-top: 56px;
	border-top: 1px solid var(--om-line);
}
.om-related__head {
	margin-bottom: 28px;
}
.om-related__title {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 600;
	margin: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
	.om-single__grid {
		gap: 40px;
	}
}

@media (max-width: 960px) {
	.om-single__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.om-single__panel {
		position: static;
	}
	.om-single__aside--gallery {
		display: none;
	}
	.om-single__aside--after {
		display: block;
		margin: 0 0 16px;
		container-type: inline-size;
	}
	.om-single__gallery:has(> .om-gallery--multi + .om-single__aside) {
		display: block;
	}
	.om-single__gallery:has(> .om-gallery--multi + .om-single__aside) > .om-gallery {
		display: grid;
	}
	.om-single__gallery:has(> .om-gallery--multi + .om-single__aside) .om-gallery__thumbs,
	.om-single__gallery:has(> .om-gallery--multi + .om-single__aside) .om-gallery__stage {
		grid-column: auto;
		grid-row: auto;
	}
	.om-single__detail {
		margin-top: 64px;
		padding-bottom: 64px;
	}
	.om-reviews__summary {
		grid-template-columns: 1fr;
		gap: 28px;
		padding-bottom: 28px;
	}
	.om-reviews__score {
		border-right: 0;
		border-bottom: 1px solid var(--om-line);
		padding: 0 0 22px;
	}
	.om-inside {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	.om-single {
		padding-block: 24px 0;
	}
	/* Thumbnails move under the stage and scroll sideways. */
	.om-gallery--multi {
		grid-template-columns: 1fr;
	}
	.om-gallery__thumbs {
		order: 2;
		flex-direction: row;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	.om-gallery__thumbs::-webkit-scrollbar {
		display: none;
	}
	.om-gallery__thumb {
		flex: 0 0 68px;
		width: 68px;
	}
	.om-gallery__stage {
		order: 1;
		padding: 18px;
	}
	.om-gallery__arrow {
		opacity: 1;
	}
	.om-gallery__zoom {
		top: 10px;
		right: 10px;
		width: 34px;
		height: 34px;
	}
	.om-lightbox {
		padding: 2vh 2vw;
	}
	.om-lightbox__img {
		max-width: 96vw;
		max-height: 86vh;
		border-radius: 6px;
	}
	.om-lightbox__close,
	.om-lightbox__arrow {
		width: 40px;
		height: 40px;
	}
	.om-lightbox__close {
		top: 10px;
		right: 10px;
	}
	.om-lightbox__arrow--prev {
		left: 8px;
	}
	.om-lightbox__arrow--next {
		right: 8px;
	}
	.om-buy .single_add_to_cart_button,
	.om-buy .om-buy__now {
		flex: 1 1 100%;
	}
	.om-gumroad {
		padding: 20px;
	}
	/* With a stepper, Add to cart shares its row; Buy now still wraps. */
	.om-buy form.cart .om-qty + .single_add_to_cart_button {
		flex: 1 1 0;
	}
	.om-tabs__list {
		justify-content: flex-start;
		gap: 26px;
	}
	.om-tabs__rail {
		margin-inline: calc(clamp(24px, 3vw, 48px) * -1);
		padding-inline: clamp(24px, 3vw, 48px);
	}
	.woocommerce #reviews #comments ol.commentlist li .comment-text.om-review__text {
		padding-left: 0;
	}
	.om-reviews__formwrap {
		padding: 24px 20px 28px;
	}
	.om-reviews__formwrap .comment-form {
		grid-template-columns: 1fr;
	}
	.om-related,
	.om-single__detail .up-sells {
		margin-top: 56px;
		padding-top: 40px;
	}
}

/* ---------- Phone buy bar ----------
   inc/woocommerce.php ombelo_buy_bar + main.js. One column only: on desktop
   the buy panel is sticky beside the gallery, so it never leaves the screen.
   It slides up whenever the real form is off screen; the body keeps room for
   it at the bottom so it never sits on the footer's last line. */
.om-buybar {
	display: none;
}
@media (max-width: 960px) {
	body:has(.om-buybar) {
		padding-bottom: calc(104px + env(safe-area-inset-bottom));
	}
	.om-buybar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		display: block;
		background: var(--om-white);
		border-top: 1px solid var(--om-line);
		box-shadow: 0 -8px 24px -14px rgba(23, 22, 28, 0.3);
		padding-bottom: env(safe-area-inset-bottom);
		transform: translateY(110%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}
	.om-buybar.is-on {
		transform: none;
		visibility: visible;
		transition: transform 0.25s ease;
	}
	.om-buybar__strip {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		margin: 0;
		padding: 5px 16px;
		background: var(--om-mint);
		color: var(--om-ink);
		font-family: var(--om-mono);
		font-size: 0.72rem;
		letter-spacing: 0.04em;
	}
	.om-buybar__row {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 16px 12px;
	}
	.om-buybar__price {
		display: flex;
		flex-direction: column;
		flex: 0 0 auto;
		font-family: var(--om-display);
		font-size: 1.25rem;
		font-weight: 700;
		line-height: 1.1;
		color: var(--om-ink);
	}
	.om-buybar__price del {
		order: -1;
		font-size: 0.8rem;
		font-weight: 500;
		color: var(--om-ink-40);
		text-decoration-thickness: 1px;
	}
	.om-buybar__price ins {
		background: none;
		text-decoration: none;
	}
	.om-buybar__price .screen-reader-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.om-buybar__qty {
		display: inline-flex;
		align-items: center;
		flex: 0 0 auto;
		border: 1px solid var(--om-line);
		border-radius: 12px;
	}
	.om-buybar__qty[hidden] {
		display: none;
	}
	.om-buybar__step {
		width: 36px;
		height: 44px;
		border: 0;
		background: none;
		color: var(--om-ink);
		font-size: 1.2rem;
		cursor: pointer;
	}
	.om-buybar__step:disabled {
		color: var(--om-ink-40);
		opacity: 0.5;
		cursor: default;
	}
	.om-buybar__num {
		min-width: 20px;
		text-align: center;
		font-weight: 600;
	}
	.om-buybar__go {
		flex: 1 1 auto;
		min-height: 48px;
		padding: 12px 16px;
		border-radius: 12px;
		font-size: 1rem;
		font-weight: 600;
	}
}