/* =============================================================================
   OVO — Ink & Signal
   Design system for the premium smart-home e-commerce.
   Colors: ink black, paper white, one electric-blue accent.
   Fonts: Space Grotesk (display), Archivo (body), JetBrains Mono (micro).
   ============================================================================= */

:root {
	/* --- Ink (black family) --- */
	--ovo-ink-900: #0a0a0c;
	--ovo-ink-800: #141419;
	--ovo-ink-700: #1e1e24;
	--ovo-ink-line: #2a2a31;
	/* --- Paper (white family) --- */
	--ovo-paper: #f5f5f6;
	--ovo-paper-100: #ffffff;
	--ovo-line: #e4e4e8;
	/* --- Text --- */
	--ovo-slate: #6e6e78;
	--ovo-ash: #9a9aa3;
	/* Text that sits ON the hero photo. The image is far brighter than the old
	   flat #0A0A0C side panel, so --ovo-ash (#9a9aa3) only reached 4.87 median /
	   3.45 p10 against it — below WCAG AA 4.5 for the worst-lit glyphs. */
	--ovo-ash-on-media: #b9b9c2;
	/* --- Signal (blue accent) --- */
	--ovo-signal: #1e4fff;
	--ovo-signal-700: #153cd3;
	--ovo-signal-100: #e9efff;
	/* --- Shape --- */
	--ovo-radius: 10px;
	/* --- Type --- */
	--ovo-display: 'Space Grotesk', 'Archivo', system-ui, sans-serif;
	--ovo-body: 'Archivo', system-ui, sans-serif;
	--ovo-mono: 'JetBrains Mono', ui-monospace, monospace;

	/* Map WoodMart's tokens onto the OVO system */
	--wd-text-font: var(--ovo-body);
	--wd-text-font-weight: 400;
	--wd-text-color: var(--ovo-slate);
	--wd-text-font-size: 15px;

	--wd-title-font: var(--ovo-display);
	--wd-title-font-weight: 600;
	--wd-title-color: #111114;

	--wd-entities-title-font: var(--ovo-display);
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #111114;
	--wd-entities-title-color-hover: var(--ovo-signal);

	--wd-alternative-font: var(--ovo-mono);
	--wd-widget-title-font: var(--ovo-display);
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: none;
	--wd-widget-title-color: #111114;
	--wd-widget-title-font-size: 15px;

	--wd-header-el-font: var(--ovo-display);
	--wd-header-el-font-weight: 500;
	--wd-header-el-transform: none;
	--wd-header-el-font-size: 13px;

	/* Accents */
	--wd-primary-color: var(--ovo-signal);
	--wd-alternative-color: var(--ovo-signal-700);

	/* Buttons */
	--btn-default-bgcolor: var(--ovo-paper-100);
	--btn-default-bgcolor-hover: #f0f0f3;
	--btn-accented-bgcolor: var(--ovo-signal);
	--btn-accented-bgcolor-hover: var(--ovo-signal-700);

	/* Links */
	--wd-link-color: #111114;
	--wd-link-color-hover: var(--ovo-signal);

	/* Forms */
	--wd-form-brd-width: 1px;
	--wd-form-brd-radius: var(--ovo-radius);
}

/* =============================================================================
   1. Base
   ============================================================================= */
body {
	background-color: var(--ovo-paper);
	color: var(--ovo-slate);
	font-family: var(--ovo-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .wd-entities-title {
	font-family: var(--ovo-display);
	color: var(--ovo-title-color, #111114);
	letter-spacing: -0.02em;
}

a {
	transition: color 0.2s ease;
}

::selection {
	background: var(--ovo-signal);
	color: #fff;
}

/* Focus visibility — accessible signal-blue ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--ovo-signal);
	outline-offset: 2px;
}

/* =============================================================================
   2. Header — Ink
   ============================================================================= */
.whb-header,
.whb-main-header,
.whb-row,
.whb-general-header,
.whb-top-bar,
.whb-header-bottom {
	background-color: var(--ovo-ink-900);
}

/* Header row containers — no default hover borders/shadows */
.whb-row .whb-flex-row {
	border-bottom-color: var(--ovo-ink-line);
}

.whb-header .whb-row.whb-color-dark,
.whb-header .whb-row.whb-color-light {
	background-color: var(--ovo-ink-900);
}

/* Header text */
.whb-header,
.whb-header a,
.whb-header .wd-header-text,
.whb-header .wd-header-text p,
.whb-header .wd-header-text * {
	color: #f2f2f4;
}

.whb-header .wd-header-text a:hover {
	color: #fff;
}

/* Main nav */
.whb-header .wd-nav > li > a {
	color: #f2f2f4;
	font-family: var(--ovo-display);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.02em;
}

.whb-header .wd-nav > li > a:hover,
.whb-header .wd-nav > li.current-menu-item > a,
.whb-header .wd-nav > li.current_page_item > a {
	color: #fff;
}

.whb-header .wd-nav > li.current-menu-item > a,
.whb-header .wd-nav > li.current_page_item > a {
	box-shadow: inset 0 -2px 0 var(--ovo-signal);
}

/* Dropdown menus (dark) */
.whb-header .wd-dropdown,
.whb-header .wd-dropdown-menu .wd-dropdown,
.whb-header .menu-simple-dropdown .wd-dropdown {
	background-color: var(--ovo-ink-800);
	border-color: var(--ovo-ink-line);
}

.whb-header .wd-dropdown a,
.whb-header .menu-simple-dropdown .wd-dropdown a {
	color: var(--ovo-ash);
}

.whb-header .wd-dropdown a:hover {
	color: #fff;
}

/* Header icon tools (search, account, wishlist, cart) */
.whb-header .wd-tools-element > a,
.whb-header .wd-tools-text,
.whb-header .wd-tools-icon {
	color: #f2f2f4;
}

.whb-header .wd-tools-element:hover > a,
.whb-header .wd-tools-element:hover .wd-tools-icon,
.whb-header .wd-tools-element:hover .wd-tools-text {
	color: #fff;
}

/* Cart count badge — Signal */
.whb-header .wd-cart-count,
.whb-header .wd-cart-number,
.whb-header .wd-tools-count,
.whb-header .wd-header-cart .wd-cart-count {
	background-color: var(--ovo-signal) !important;
	color: #fff !important;
}

/* Mobile burger */
.whb-header .wd-burger,
.whb-header .wd-burger span {
	background-color: #f2f2f4;
}

/* Sticky header elevation */
.whb-sticky-real .whb-main-header,
.whb-clone.whb-sticked .whb-main-header {
	box-shadow: 0 1px 0 var(--ovo-ink-line), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Search form inside header / full-screen */
.wd-search-full-screen,
.wd-search-dropdown {
	background-color: var(--ovo-ink-900);
	color: #f2f2f4;
}
.wd-search-full-screen .wd-search-form input[type='text'],
.wd-search-dropdown input[type='text'] {
	color: #fff;
	border-bottom-color: var(--ovo-ink-line);
}

/* Mobile menu panel */
.wd-mobile-nav,
.wd-mobile-nav .wd-nav-opener,
.wd-mobile-nav .wd-sub-menu,
.wd-mobile-nav .wd-nav > li > a {
	background-color: var(--ovo-ink-900);
	color: #f2f2f4;
}
.wd-mobile-nav .wd-nav > li > a {
	border-bottom-color: var(--ovo-ink-line);
}
.wd-mobile-nav .wd-nav > li > a:hover {
	color: var(--ovo-signal);
}

/* =============================================================================
   3. Buttons
   ============================================================================= */
.wd-btn,
.wd-button,
.button,
button,
.wd-add-to-cart a,
a.button,
.wc-block-components-button,
.elementor-button,
.wd-quick-buy a {
	border-radius: var(--ovo-radius);
	font-family: var(--ovo-display);
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	transition: background-color 0.2s ease, color 0.2s ease,
		transform 0.16s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

/* Primary (accented) */
.wd-btn-accented,
.button.alt,
.wc-block-components-button,
button.single_add_to_cart_button,
.wd-add-to-cart a,
.wd-single-add-cart .button,
.wd-sticky-btn .wd-btn {
	background-color: var(--ovo-signal) !important;
	color: #fff !important;
	border-color: var(--ovo-signal) !important;
}

.wd-btn-accented:hover,
.button.alt:hover,
.wc-block-components-button:hover,
button.single_add_to_cart_button:hover,
.wd-add-to-cart a:hover,
.wd-single-add-cart .button:hover,
.wd-sticky-btn .wd-btn:hover {
	background-color: var(--ovo-signal-700) !important;
	border-color: var(--ovo-signal-700) !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(12, 12, 16, 0.18);
}

.wd-btn:active,
.button:active,
button:active,
.elementor-button:active {
	transform: translateY(0) scale(0.98);
}

/* Secondary (dark) */
.wd-btn-dark {
	background-color: var(--ovo-ink-900) !important;
	color: #fff !important;
}
.wd-btn-dark:hover {
	background-color: #000 !important;
	color: #fff !important;
}

/* =============================================================================
   4. Forms
   ============================================================================= */
input[type='text'], input[type='email'], input[type='url'], input[type='password'],
input[type='search'], input[type='number'], input[type='tel'], input[type='date'],
select, textarea, .select2-container--default .select2-selection--single {
	border-radius: var(--ovo-radius) !important;
	border-color: var(--ovo-line);
	font-family: var(--ovo-body);
}

input:focus, select:focus, textarea:focus,
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--ovo-signal) !important;
	box-shadow: 0 0 0 3px rgba(30, 79, 255, 0.12);
}

/* =============================================================================
   5. Page title block
   ============================================================================= */
.wd-page-title,
.page-title {
	background-color: var(--ovo-ink-900);
	color: #f2f2f4;
}
.wd-page-title .entry-title,
.wd-page-title h1,
.page-title h1,
.page-title .entry-title {
	color: #fff;
}
.wd-page-title .wd-breadcrumbs,
.wd-page-title .breadcrumbs,
.breadcrumbs a,
.woocommerce-breadcrumb a {
	color: var(--ovo-ash);
}
.wd-page-title .wd-breadcrumbs a:hover {
	color: #fff;
}

/* =============================================================================
   6. Product cards
   ============================================================================= */
.wd-product,
.product-grid-item,
.products .product {
	background-color: var(--ovo-paper-100);
	border: 1px solid var(--ovo-line);
	border-radius: var(--ovo-radius);
	overflow: hidden;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.wd-product:hover,
.product-grid-item:hover {
	border-color: var(--ovo-signal);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(10, 10, 12, 0.1);
}

/* Image area — clean white canvas */
.wd-product .product-image-link,
.product-grid-item .product-element-top,
.products .product .product-element-top {
	background-color: var(--ovo-paper-100);
}

.wd-product .wd-entities-title a,
.product-grid-item .wd-entities-title a,
.products .product .wd-entities-title a,
.product-title a {
	color: #111114;
	font-family: var(--ovo-display);
	font-weight: 500;
}

.wd-product .wd-entities-title a:hover,
.product-title a:hover {
	color: var(--ovo-signal);
}

/* Price */
.wd-product .price,
.product-grid-item .price,
.products .product .price {
	font-family: var(--ovo-display);
	font-weight: 600;
	color: var(--ovo-ink-900);
}

.wd-product .price del .amount,
.price del .amount {
	color: var(--ovo-ash) !important;
}

/* Sale / new badges — Signal */
.wd-product .onsale,
.product-grid-item .onsale,
.products .product .onsale,
.woocommerce span.onsale,
.wd-label-sale {
	background-color: var(--ovo-signal) !important;
	color: #fff !important;
	border-radius: var(--ovo-radius);
	font-family: var(--ovo-display);
	font-weight: 600;
}

.wd-product .wd-label-new,
.product-label-new,
.wd-label-new {
	background-color: var(--ovo-ink-900) !important;
	color: #fff !important;
	border-radius: var(--ovo-radius);
}

/* Rating stars — keep blue */
.star-rating span:before,
.wd-star-rating {
	color: var(--ovo-signal) !important;
}

/* =============================================================================
   7. Single product page
   ============================================================================= */
.summary-inner .price .amount,
.wd-product-summary .price {
	font-family: var(--ovo-display);
	font-size: 28px;
	font-weight: 700;
	color: var(--ovo-ink-900);
}

/* Variation select + quantities */
.woocommerce-variation-add-to-cart .button,
.wd-product-info .button {
	border-radius: var(--ovo-radius);
}

/* Tabs */
.woocommerce-tabs .tabs li a,
.wd-nav-product-tabs a {
	font-family: var(--ovo-display);
	font-weight: 600;
}

.woocommerce-tabs .tabs li.active a,
.wd-nav-product-tabs li.active a {
	color: var(--ovo-signal);
	box-shadow: inset 0 -2px 0 var(--ovo-signal);
}

/* =============================================================================
   8. WooCommerce — cart, checkout, account
   ============================================================================= */
.woocommerce-cart .shop_table,
.woocommerce-checkout .shop_table,
.woocommerce table.shop_table {
	border-radius: var(--ovo-radius);
	border-color: var(--ovo-line);
}

.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button,
.wd-checkout-steps .step.active,
.checkout-button,
.wd-action-btn a {
	border-radius: var(--ovo-radius);
}

.wd-coupon-form .button,
.woocommerce-form-login .button,
.apply_coupon {
	border-radius: var(--ovo-radius);
}

/* Payment methods */
.wc_payment_method label {
	font-family: var(--ovo-body);
}
.wc_payment_method .payment_box {
	border-radius: var(--ovo-radius);
}

/* Notices */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--ovo-signal) !important;
	border-radius: var(--ovo-radius);
}

.woocommerce-error {
	border-top-color: #d13438 !important;
	border-radius: var(--ovo-radius);
}

/* =============================================================================
   9. Footer — Ink
   ============================================================================= */
.wd-footer,
.site-footer {
	background-color: var(--ovo-ink-900) !important;
	color: var(--ovo-ash);
	border-top: 1px solid var(--ovo-signal);
}

.wd-footer a,
.site-footer a,
.footer-column a {
	color: var(--ovo-ash);
}
.wd-footer a:hover,
.site-footer a:hover {
	color: #fff;
}

.wd-footer .widget-title,
.wd-footer .footer-widget .widget-title {
	color: #fff;
	font-family: var(--ovo-display);
}

.wd-footer .copyrights-wrapper,
.copyrights-wrapper {
	background-color: var(--ovo-ink-900);
	border-top: 1px solid var(--ovo-ink-line);
}

/* Newsletter */
.wd-footer .mc4wp-form input,
.wd-footer .widget_mc4wp_form_widget input {
	border-radius: var(--ovo-radius);
	border-color: var(--ovo-ink-line);
	background-color: var(--ovo-ink-800);
	color: #fff;
}
.wd-footer .mc4wp-form button,
.wd-footer .widget_mc4wp_form_widget button {
	background-color: var(--ovo-signal) !important;
	border-radius: var(--ovo-radius);
	color: #fff !important;
}

/* =============================================================================
   10. Elementor alignment
   ============================================================================= */
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--ovo-display);
	letter-spacing: -0.02em;
}

.elementor-button {
	border-radius: var(--ovo-radius) !important;
	font-family: var(--ovo-display);
	font-weight: 600 !important;
}

/* Product grids built with Elementor + WooCommerce widgets */
.elementor-widget-wc-products .products {
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* =============================================================================
   11. Blog
   ============================================================================= */
.wd-post .wd-post-title a {
	font-family: var(--ovo-display);
	color: #111114;
}
.wd-post .wd-post-title a:hover {
	color: var(--ovo-signal);
}
.wd-post .wd-post-meta,
.wd-post .wp-post-meta,
.entry-meta {
	font-family: var(--ovo-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ovo-ash);
}

/* =============================================================================
   12. Micro-typography helpers (used by Elementor content too)
   ============================================================================= */
.ovo-eyebrow {
	font-family: var(--ovo-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ovo-signal);
}

.ovo-display {
	font-family: var(--ovo-display);
	letter-spacing: -0.03em;
}

.ovo-mono {
	font-family: var(--ovo-mono);
}

/* =============================================================================
   13. Reduced motion + print
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.wd-header,
	.wd-footer,
	.wd-burger,
	.wd-header-cart {
		display: none !important;
	}
}
/* =============================================================================
   14. OVO custom widgets
   ============================================================================= */

/* --- Buttons (widget + theme generic) --- */
.ovo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 28px;
	border-radius: var(--ovo-radius);
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.16s ease, box-shadow 0.2s ease;
	cursor: pointer;
}
.ovo-btn:hover { transform: translateY(-1px); }
.ovo-btn:active { transform: translateY(0) scale(0.98); }

.ovo-btn--signal {
	background-color: var(--ovo-signal);
	color: #fff;
}
.ovo-btn--signal:hover {
	background-color: var(--ovo-signal-700);
	color: #fff;
	box-shadow: 0 10px 26px rgba(30, 79, 255, 0.35);
}

.ovo-btn--ghost {
	background-color: transparent;
	color: #f2f2f4;
	border: 1px solid var(--ovo-ink-line);
}
.ovo-btn--ghost:hover {
	border-color: #f2f2f4;
	color: #fff;
}

/* --- Hero --- */
.ovo-hero {
	background-color: var(--ovo-ink-900);
	color: #f2f2f4;
	padding: 72px 0 0;
}

.ovo-hero__grid {
	/* Must stay `static`: it is NOT the containing block for the absolutely
	   positioned photo below — `.ovo-hero` is, so the image bleeds the whole
	   section including its 72px top padding. A later rule used to force this
	   back to `relative`; that override now only targets the trust bar. */
	position: static;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 40px;
}

.ovo-hero__copy {
	position: relative;
	z-index: 2; /* copy sits above the photo */
	max-width: 760px; /* keeps the editorial left-column composition */
	padding: 40px 0 88px;
}

.ovo-hero .ovo-eyebrow {
	display: block;
	margin-bottom: 28px;
}

.ovo-hero__title {
	font-family: var(--ovo-display);
	font-weight: 700;
	font-size: clamp(46px, 6.4vw, 92px);
	line-height: 0.98;
	letter-spacing: -0.03em;
	color: #fff;
	margin: 0 0 28px;
}

.ovo-hero .ovo-hl {
	position: relative;
	white-space: nowrap;
}
.ovo-hero .ovo-hl::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.04em;
	height: 0.09em;
	background-color: var(--ovo-signal);
}

.ovo-hero__sub {
	max-width: 46ch;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ovo-ash-on-media);
	margin: 0 0 40px;
}

.ovo-hero__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.ovo-hero__media {
	/* Full-bleed backdrop behind the copy, at every viewport width. */
	position: absolute;
	inset: 0;
	z-index: 1; /* above the section scrim, below .ovo-hero__copy */
	pointer-events: none;
}

.ovo-hero__figure {
	margin: 0;
	height: 100%;
	position: relative;
}

.ovo-hero__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0; /* full-bleed, no longer a rounded side panel */
}

.ovo-hero__caption {
	display: none; /* hidden at every width: full-bleed photo puts it on the trust bar */
	position: absolute;
	bottom: 16px;
	left: 16px;
	background: rgba(10, 10, 12, 0.72);
	backdrop-filter: blur(6px);
	padding: 8px 14px;
	border-radius: 999px;
	font-family: var(--ovo-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #f2f2f4;
	border: 1px solid var(--ovo-ink-line);
}

.ovo-hero__bar {
	border-top: 1px solid var(--ovo-ink-line);
	margin-top: 0;
}

.ovo-hero__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	background-color: var(--ovo-ink-900);
}

.ovo-hero__bar-item {
	flex: 1 1 0;
	min-width: 200px;
	padding: 18px 40px;
	font-family: var(--ovo-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ovo-ash);
	border-right: 1px solid var(--ovo-ink-line);
}
.ovo-hero__bar-item:last-child { border-right: 0; }

/* --- Categories --- */
.ovo-cats {
	max-width: 1440px;
	margin: 0 auto;
	padding: 96px 40px;
	background-color: var(--ovo-paper);
}

.ovo-cats__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 56px;
	flex-wrap: wrap;
}

.ovo-cats__head-copy {
	max-width: 640px;
}

/* Stage: track + overlay arrows. */
.ovo-cats__stage {
	position: relative;
}

/* Arrows float over the slides, one at each edge. */
.ovo-cats__nav {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 14px;
	pointer-events: none;
	z-index: 3;
}

/* Scroll progress bar under the track. */
.ovo-cats__progress {
	margin-top: 22px;
	height: 2px;
	background-color: var(--ovo-line);
	border-radius: 2px;
	overflow: hidden;
}
.ovo-cats__progress span {
	display: block;
	height: 100%;
	width: 0;
	background-color: var(--ovo-signal);
	border-radius: 2px;
	transition: width 0.15s linear;
}

.ovo-cats .ovo-cats__nav-btn {
	pointer-events: auto;
	translate: 0 var(--ovo-nav-shift, 0px);
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background-color: var(--ovo-signal);
	color: #fff;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(10, 10, 12, 0.22);
	transition: background-color 0.2s ease, transform 0.16s ease, opacity 0.2s ease;
}
.ovo-cats .ovo-cats__nav-btn:hover:not(:disabled) {
	background-color: var(--ovo-signal-700);
	color: #fff;
	transform: scale(1.05);
}
.ovo-cats .ovo-cats__nav-btn:disabled {
	opacity: 0.3;
	/* WoodMart ships `button[disabled]{opacity:.6!important}` and grey hover
	   fills for disabled buttons - keep ours a dimmed blue circle so the white
	   glyph never disappears on hover. */
	background-color: var(--ovo-signal) !important;
	color: #fff !important;
	cursor: default;
	box-shadow: none;
}
.ovo-cats .ovo-cats__nav-btn:focus-visible {
	outline: 2px solid var(--ovo-signal);
	outline-offset: 2px;
	color: #fff;
}

.ovo-cats__title {
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: clamp(30px, 3.6vw, 48px);
	letter-spacing: -0.02em;
	color: #111114;
	margin: 0;
}

.ovo-cats__sub {
	color: var(--ovo-slate);
	font-size: 16px;
	line-height: 1.65;
	margin-top: 12px;
}

.ovo-cats__grid {
	display: flex;
	gap: var(--ovo-cats-gap, 20px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
}
.ovo-cats__grid::-webkit-scrollbar {
	display: none;
}

.ovo-cats__tile {
	/* Slides per view comes from the Elementor responsive control; 0.3 = the
	   peeking next slide. Formula: (width - gaps) / (per-view + peek). */
	flex: 0 0 calc((100% - (var(--ovo-cats-per-view, 3) - 1) * var(--ovo-cats-gap, 20px)) / (var(--ovo-cats-per-view, 3) + 0.3));
	scroll-snap-align: start;
	position: relative;
	display: block;
	border-radius: var(--ovo-radius);
	overflow: hidden;
	background-color: var(--ovo-paper-100);
	border: 1px solid var(--ovo-line);
	text-decoration: none;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ovo-cats__tile:hover {
	transform: translateY(-2px);
	border-color: var(--ovo-signal);
	box-shadow: 0 14px 34px rgba(10, 10, 12, 0.1);
}

.ovo-cats__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	/* Letterbox bars blend into the white card so contain never looks boxed-in. */
	background-color: var(--ovo-paper-100);
}
.ovo-cats__media img {
	width: 100%;
	height: 100%;
	/* Contain: category photos are full product shots - never crop them. */
	object-fit: contain;
	display: block;
	transition: transform 0.4s ease;
}
.ovo-cats__tile:hover .ovo-cats__media img {
	transform: scale(1.03);
}

.ovo-cats__meta {
	padding: 18px 20px 20px;
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.ovo-cats__index {
	font-family: var(--ovo-mono);
	font-size: 11px;
	color: var(--ovo-signal);
}

.ovo-cats__name {
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: 18px;
	color: #111114;
}

.ovo-cats__count {
	margin-left: auto;
	font-family: var(--ovo-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ovo-ash);
}

/* --- Product showcase --- */
.ovo-picks {
	max-width: 1440px;
	margin: 0 auto;
	padding: 96px 40px;
	background-color: var(--ovo-paper);
}

.ovo-picks__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 44px;
}

.ovo-picks__title {
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: clamp(28px, 3.2vw, 44px);
	letter-spacing: -0.02em;
	color: #111114;
	margin: 10px 0 0;
}

.ovo-picks__link {
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: 14px;
	color: #111114;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	transition: color 0.2s ease;
}
.ovo-picks__link span { transition: transform 0.2s ease; }
.ovo-picks__link:hover { color: var(--ovo-signal); }
.ovo-picks__link:hover span { transform: translateX(4px); }

.ovo-picks__grid {
	display: grid;
	grid-template-columns: repeat(var(--ovo-cols, 4), 1fr);
	gap: 20px;
}

.ovo-card {
	display: flex;
	flex-direction: column;
	background-color: var(--ovo-paper-100);
	border: 1px solid var(--ovo-line);
	border-radius: var(--ovo-radius);
	overflow: hidden;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ovo-card:hover {
	transform: translateY(-2px);
	border-color: var(--ovo-signal);
	box-shadow: 0 12px 32px rgba(10, 10, 12, 0.1);
}

.ovo-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	display: block;
	background-color: var(--ovo-paper-100);
	overflow: hidden;
}
.ovo-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.ovo-card:hover .ovo-card__media img {
	transform: scale(1.04);
}

.ovo-card__sale {
	position: absolute;
	top: 12px;
	left: 12px;
	background-color: var(--ovo-signal);
	color: #fff;
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: var(--ovo-radius);
}

.ovo-card__body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ovo-card__title {
	margin: 0 0 8px;
	font-family: var(--ovo-display);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: -0.01em;
}
.ovo-card__title a {
	color: #111114;
	text-decoration: none;
}
.ovo-card__title a:hover { color: var(--ovo-signal); }

.ovo-card__spec {
	font-family: var(--ovo-mono);
	font-size: 11.5px;
	color: var(--ovo-ash);
	border-top: 1px solid var(--ovo-line);
	padding-top: 12px;
	margin: 0 0 14px;
	letter-spacing: 0.02em;
}

.ovo-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}

.ovo-card__price {
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: 16px;
	color: var(--ovo-ink-900);
}
.ovo-card__price del .amount { color: var(--ovo-ash); font-weight: 400; font-size: 13px; }

.ovo-card__atc {
	background-color: var(--ovo-ink-900);
	color: #fff;
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.02em;
	text-decoration: none;
	padding: 9px 16px;
	border-radius: var(--ovo-radius);
	transition: background-color 0.2s ease, transform 0.16s ease;
}
.ovo-card__atc:hover {
	background-color: var(--ovo-signal);
	color: #fff;
	transform: translateY(-1px);
}

/* Footer links */
.ovo-footer-links a {
	color: var(--ovo-ash);
	text-decoration: none;
	transition: color 0.2s ease;
}
.ovo-footer-links a:hover {
	color: #fff;
}

/* =============================================================================
   15. Responsive
   ============================================================================= */
@media (max-width: 1024px) {
	/* Hero: the desktop side panel becomes a full-bleed background that sits
	   BEHIND the copy (and behind the section's own 72px top padding).

	   - `.ovo-hero .ovo-hero__grid` outranks the global `position: relative`
	     rule further down, so the grid stops being the containing block and the
	     absolute `.ovo-hero__media` resolves against `.ovo-hero` instead.
	   - z-index 1 restates what the grid itself used to contribute on desktop.
	     `.ovo-hero__grid` is `position: static` here, so its own z-index no
	     longer applies, and without this the photo would fall to z-index 0 —
	     the same level as the section-level ::after scrim — and tree order
	     would put that scrim ON TOP of the photo, stacking with the figure's
	     own scrim and rendering ~59% instead of the 36% set in Elementor.
	     Keeping the photo at 1 above the section scrim means only the figure's
	     ::after tints it, exactly as on desktop. */
	.ovo-hero .ovo-hero__grid {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 0 24px;
		position: static;
	}
	.ovo-hero__copy {
		position: relative;
		z-index: 2;
		padding: 40px 0 56px;
	}
	.ovo-hero__media {
		position: absolute;
		inset: 0;
		min-height: 0;
		z-index: 1;
		pointer-events: none;
	}
	.ovo-hero__figure { height: 100%; }
	.ovo-hero__media img {
		width: 100%;
		height: 100%;
		max-height: none;
		object-fit: cover;
		border-radius: 0;
	}
	.ovo-hero__caption { display: none; }
	.ovo-hero__bar-item { min-width: 160px; }
	.ovo-cats__tile { flex: 0 0 calc((100% - (var(--ovo-cats-per-view-tablet, 2) - 1) * var(--ovo-cats-gap, 20px)) / (var(--ovo-cats-per-view-tablet, 2) + 0.3)); }
	.ovo-picks__grid { --ovo-cols: var(--ovo-cols-tablet, 3) !important; }
	.ovo-cats, .ovo-picks { padding: 64px 24px; }
}

@media (max-width: 640px) {
	.ovo-cats__tile { flex: 0 0 calc((100% - (var(--ovo-cats-per-view-mobile, 1) - 1) * var(--ovo-cats-gap, 20px)) / (var(--ovo-cats-per-view-mobile, 1) + 0.3)); }
	.ovo-cats__nav-btn { width: 40px; height: 40px; font-size: 15px; }
	.ovo-cats__nav { padding: 0 8px; }
	.ovo-picks__grid { --ovo-cols: var(--ovo-cols-mobile, 2) !important; }
	.ovo-picks__head { flex-direction: column; align-items: flex-start; }
	.ovo-hero__actions { flex-direction: column; align-items: stretch; }
	.ovo-btn { justify-content: center; }
	.ovo-hero__bar-item { min-width: 100%; border-right: 0; border-bottom: 1px solid var(--ovo-ink-line); }

	/* Phone: WooCommerce emits <del> (original) then <ins> (sale) inline, and
	   .ovo-card__price carries `white-space: nowrap`, so both prices fought for
	   one line. Making each an own-line block puts the struck-through original
	   above the sale price. The .screen-reader-text spans between them are
	   position:absolute (WP core), so they drop out of the flow. */
	.ovo-card__price del,
	.ovo-card__price ins { display: block; }
	.ovo-card__price del { margin-bottom: 3px; }
}

/* =============================================================================
   16. Content pages
   ============================================================================= */
.wd-entry-content,
.wd-page-content,
.entry-content {
	line-height: 1.75;
}

.wd-entry-content h2,
.entry-content h2 {
	font-family: var(--ovo-display);
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 2.2em 0 0.7em;
}

.wd-entry-content p,
.entry-content p {
	margin: 0 0 1.2em;
}

/* FAQ */
details {
	border: 1px solid var(--ovo-line);
	border-radius: var(--ovo-radius);
	background: var(--ovo-paper-100);
	padding: 18px 22px;
	margin-bottom: 12px;
}
details[open] {
	border-color: var(--ovo-signal);
}
summary {
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: 16px;
	color: #111114;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
summary::-webkit-details-marker { display: none; }
summary::after {
	content: "+";
	font-family: var(--ovo-display);
	font-size: 20px;
	color: var(--ovo-signal);
	transition: transform 0.2s ease;
}
details[open] summary::after {
	content: "−";
}
details p {
	margin: 14px 0 0;
	color: var(--ovo-slate);
}

/* --- Contact form --- */
.ovo-contact-form {
	max-width: 720px;
}
.ovo-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 640px) {
	.ovo-form-row { grid-template-columns: 1fr; }
}
.ovo-contact-form .ovo-form-field {
	margin: 0 0 16px;
}
.ovo-contact-form label {
	display: block;
	font-family: var(--ovo-display);
	font-weight: 500;
	font-size: 13px;
	color: #111114;
	margin-bottom: 6px;
}
.ovo-contact-form input[type="text"],
.ovo-contact-form input[type="email"],
.ovo-contact-form select,
.ovo-contact-form textarea {
	width: 100%;
	border: 1px solid var(--ovo-line);
	border-radius: var(--ovo-radius);
	padding: 12px 14px;
	font-size: 15px;
	background: var(--ovo-paper-100);
	color: #111114;
}
.ovo-contact-form input:focus,
.ovo-contact-form select:focus,
.ovo-contact-form textarea:focus {
	outline: none;
	border-color: var(--ovo-signal);
	box-shadow: 0 0 0 3px rgba(30, 79, 255, 0.12);
}
.ovo-form-hp {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0;
	height: 0;
	overflow: hidden;
}
.ovo-form-ok {
	background: var(--ovo-signal-100);
	color: var(--ovo-signal-700);
	border: 1px solid var(--ovo-signal);
	border-radius: var(--ovo-radius);
	padding: 14px 18px;
	font-weight: 500;
}
.ovo-form-err {
	background: #fdecec;
	color: #b3261e;
	border: 1px solid #d13438;
	border-radius: var(--ovo-radius);
	padding: 14px 18px;
	font-weight: 500;
}
.ovo-contact-form .ovo-form-submit {
	margin: 8px 0 0;
}

/* =============================================================================
   OVO — feature cards band ("Everything works together.")
   ============================================================================= */
.ovo-features-row {
	align-items: stretch;
}
.ovo-features-row > .e-con {
	min-height: 100%;
}
@media (max-width: 767px) {
	.ovo-features-row {
		flex-direction: column !important;
	}
	.ovo-features {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	.ovo-features-row {
		flex-wrap: wrap;
	}
	.ovo-features-row > .e-con {
		flex: 1 1 calc(50% - 20px);
	}
}

/* =============================================================================
   SHELL & PAGE SYSTEM — one design system across every page (2026-09-25)
   ============================================================================= */

/* 1. The shell is paper, never pure white — any remaining gutter is a token,
      not an empty blank. Matches the homepage rhythm on every route. */
html,
body {
	background-color: var(--ovo-paper) !important;
}

/* 2. Elementor full-width pages are truly full-bleed: home sections reach the
      viewport edges (kills the L/R white gutters at wide screens). */
body.elementor-template-full-width .wd-page-content,
body.elementor-page .wd-page-content {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin: 0 !important;
}
body.elementor-template-full-width main.wd-content-layout,
body.elementor-page main.wd-content-layout {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin: 0 !important;
}
body.elementor-template-full-width .wd-content-area,
body.elementor-page .wd-content-area {
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
body.elementor-page .elementor,
body.elementor-template-full-width .elementor {
	max-width: none !important;
	width: 100% !important;
}

/* 3. One reading measure for every editorial page
      (About, Contact, FAQ, Legal, single posts — never WC pages). */
body.page:not(.woocommerce-page) .wd-entry-content,
body.single:not(.woocommerce-page) .wd-entry-content {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* 4. Content wrappers never paint white — the paper shell shows through,
      so every gutter on every page is the design token, never blank white. */
.wd-page-wrapper,
.website-wrapper,
.wd-page-content,
.main-page-wrapper,
.content-layout-wrapper {
	background-color: transparent !important;
}

/* 5. Corrected: editorial measure targets the real wrapper on classic pages.
      Elementor pages (home) and WooCommerce pages are excluded by class. */
body.page:not(.woocommerce-page):not(.elementor-page) .wd-content-area,
body.single:not(.woocommerce-page) .wd-content-area {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* =============================================================================
   Hero image overlay (driven by the widget Style tab: overlay color + opacity)
   ============================================================================= */
.ovo-hero__figure {
	position: relative;
}
.ovo-hero__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 1;
	opacity: 0; /* driven entirely by Style → Background overlay */
}
.ovo-hero__caption {
	z-index: 2; /* always above the overlay */
}

/* =============================================================================
   Testimonials slider (ovo_testimonials custom widget)
   ============================================================================= */
.ovo-testimonials__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 44px;
}
.ovo-testimonials__title {
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: clamp(28px, 3.2vw, 44px);
	letter-spacing: -0.02em;
	color: #111114;
	margin: 10px 0 0;
}
.ovo-testimonials__nav {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}
.ovo-testimonials__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--ovo-signal);
	border-radius: 50%;
	background: var(--ovo-signal);
	color: #FFFFFF;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.16s ease;
}
.ovo-testimonials__btn:hover {
	background: var(--ovo-signal-700);
	border-color: var(--ovo-signal-700);
	color: #FFFFFF;
	transform: translateY(-1px);
}
.ovo-testimonials__btn:active {
	transform: translateY(0) scale(0.98);
}
.ovo-testimonials__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;
}
.ovo-testimonials__track::-webkit-scrollbar {
	display: none;
}
.ovo-t-card {
	flex: 0 0 calc((100% - 40px) / 3);
	scroll-snap-align: start;
	scroll-snap-stop: normal;
	display: flex;
	flex-direction: column;
	gap: 20px;
	background: var(--ovo-paper-100);
	border: 1px solid var(--ovo-line);
	border-radius: var(--ovo-radius);
	padding: 28px;
}
.ovo-t-card__quote {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ovo-slate);
	flex: 1;
}
.ovo-t-card__name {
	margin: 0;
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: 14px;
	color: #111114;
}
.ovo-t-card__meta {
	margin: 2px 0 0;
	font-family: var(--ovo-mono);
	font-size: 11px;
	color: var(--ovo-ash);
}
@media (max-width: 1024px) {
	.ovo-t-card {
		flex-basis: calc((100% - 20px) / 2);
	}
}
@media (max-width: 767px) {
	.ovo-t-card {
		flex-basis: 86%;
	}
	.ovo-testimonials__head {
		flex-direction: column;
		align-items: flex-start;
	}
	.ovo-testimonials {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
	}
}

/* =============================================================================
   Hero BACKGROUND overlay (Style tab → "Background overlay": bg image + tint)
   ============================================================================= */
.ovo-hero {
	position: relative;
}
.ovo-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0; /* Elementor overlay-opacity overrides this */
}
.ovo-hero__grid {
	/* Deliberately kept out of the rule below. `.ovo-hero__grid` must stay
	   `position: static` so it is neither a containing block nor a stacking
	   context: that lets the absolutely positioned `.ovo-hero__media` resolve
	   against `.ovo-hero` (full-bleed, covering the 72px top padding) and keeps
	   its z-index 1 ABOVE the section-level ::after scrim, so only the figure's
	   own scrim tints the photo. This is the same job the grid's old
	   `position: relative; z-index: 1` did on the side-panel layout. */
	position: static;
	z-index: auto;
}
.ovo-hero__bar {
	position: relative;
	z-index: 1; /* trust bar paints above the full-bleed photo */
}

/* =============================================================================
   Card foot rules: sale-price rows never squeeze the button, and WooCommerce's
   injected .added_to_cart ("View cart") always lands on its own full-width line
   at the bottom of the card — never beside the add-to-cart button.
   ============================================================================= */
.ovo-card__foot {
	flex-wrap: wrap;
}
.ovo-card__price {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
}
.ovo-card__atc {
	flex: 0 0 auto;
	white-space: nowrap;
}
.ovo-card__foot a.added_to_cart {
	order: 3;
	flex: 1 1 100%;
	margin-top: 12px;
	display: block;
	text-align: center;
	padding: 10px 14px;
	border: 1px solid var(--ovo-signal);
	border-radius: var(--ovo-radius);
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--ovo-signal);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.ovo-card__foot a.added_to_cart::after {
	content: none;
}
.ovo-card__foot a.added_to_cart:hover {
	background-color: var(--ovo-signal);
	color: #FFFFFF;
}

/* =============================================================================
   Shop archive uses the SAME OVO card (child woocommerce/content-product.php).
   Compound selectors so the OVO card always beats WoodMart's generic
   `div.product` / `.product-grid-item` rules on the archive.
   ============================================================================= */
div.ovo-card.product-grid-item {
	background-color: var(--ovo-paper-100);
	border: 1px solid var(--ovo-line);
	border-radius: var(--ovo-radius);
	overflow: hidden;
	box-shadow: none;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
div.ovo-card.product-grid-item:hover {
	transform: translateY(-2px);
	border-color: var(--ovo-signal);
	box-shadow: 0 12px 32px rgba(10, 10, 12, 0.1);
}
.products div.ovo-card .ovo-card__media,
div.ovo-card.product-grid-item .ovo-card__media {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--ovo-paper-100);
}
.products div.ovo-card .ovo-card__media img,
div.ovo-card.product-grid-item .ovo-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
div.ovo-card.product-grid-item:hover .ovo-card__media img {
	transform: scale(1.04);
}
div.ovo-card.product-grid-item .ovo-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 20px 20px;
}
div.ovo-card.product-grid-item .ovo-card__title {
	margin: 0 0 8px;
	font-family: var(--ovo-display);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: -0.01em;
}
div.ovo-card.product-grid-item .ovo-card__title a {
	color: #111114;
	text-decoration: none;
}
div.ovo-card.product-grid-item .ovo-card__title a:hover {
	color: var(--ovo-signal);
}
div.ovo-card.product-grid-item .ovo-card__spec {
	font-family: var(--ovo-mono);
	font-size: 11.5px;
	letter-spacing: 0.02em;
	color: var(--ovo-ash);
	border-top: 1px solid var(--ovo-line);
	padding-top: 12px;
	margin: 0 0 14px;
}
div.ovo-card.product-grid-item .ovo-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}
/* the archive grid itself keeps WoodMart's responsive columns */
.products.wd-products {
	--wd-col-lg: 4;
}

/* =============================================================================
   Checkout steps (Shopping cart → Checkout → Order complete)
   They live inside the DARK title bar, but WoodMart colors them with
   --wd-title-color (near-black) => invisible. Force the light system instead.
   Two-class selector beats the theme's inline .wd-checkout-steps rule.
   ============================================================================= */
.wd-page-title .wd-checkout-steps {
	color: var(--ovo-ash);
}
.wd-page-title .wd-checkout-steps li > a,
.wd-page-title .wd-checkout-steps li > span,
.wd-page-title .wd-checkout-steps li > a > span {
	color: var(--ovo-ash);
	opacity: 1;
}
.wd-page-title .wd-checkout-steps li > a:hover,
.wd-page-title .wd-checkout-steps li > a:hover > span {
	color: #FFFFFF;
}
/* current step: full white */
.wd-page-title .wd-checkout-steps li.step-active > a,
.wd-page-title .wd-checkout-steps li.step-active > a > span {
	color: #FFFFFF;
	opacity: 1;
}
/* the font-arrow separators between steps */
.wd-page-title .wd-checkout-steps li:not(:last-child):after {
	color: var(--ovo-ash);
	opacity: 0.8;
}


/* =============================================================================
   17. Single product
   ============================================================================= */

/* --- Breadcrumb --- */
.woocommerce-breadcrumb {
	font-family: var(--ovo-mono);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ovo-ash);
}
.woocommerce-breadcrumb a { color: var(--ovo-ash); }
.woocommerce-breadcrumb a:hover { color: var(--ovo-signal); }

/* --- Title --- */
.summary .product_title,
.single-product .product_title {
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: #111114;
	margin: 6px 0 14px;
}

/* --- Price --- */
.summary .price {
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: 24px;
	letter-spacing: -0.01em;
	color: var(--ovo-ink-900);
}
.summary .price del {
	color: var(--ovo-ash);
	font-size: 15px;
	font-weight: 400;
	margin-inline-end: 10px;
}
.summary .price ins {
	text-decoration: none;
	color: var(--ovo-ink-900);
}
.summary .price ins .amount { color: inherit; }

/* --- Short description --- */
.woocommerce-product-details__short-description {
	font-family: var(--ovo-body);
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--ovo-slate);
	margin: 16px 0 26px;
}

/* --- Variation picker --- */
.summary form.cart .variations {
	margin: 0 0 18px;
	border-collapse: separate;
	border-spacing: 0;
}
.summary form.cart .variations td,
.summary form.cart .variations th {
	display: block;
	padding: 0 0 12px;
}
.summary form.cart .variations th.label label {
	font-family: var(--ovo-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #111114;
	display: block;
	margin-bottom: 8px;
}
.summary form.cart .variations select {
	font-family: var(--ovo-display);
	font-size: 14px;
	font-weight: 500;
	color: #111114;
	background-color: var(--ovo-paper-100);
	border: 1px solid var(--ovo-line);
	border-radius: var(--ovo-radius);
	padding: 12px 40px 12px 14px;
	min-width: 240px;
	height: 46px;
	transition: border-color 0.2s ease;
}
.summary form.cart .variations select:focus {
	outline: none;
	border-color: var(--ovo-signal);
}
.summary form.cart .variations a.reset_variations {
	font-family: var(--ovo-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ovo-ash);
}

/* --- Quantity + add to cart --- */
.summary form.cart {
	align-items: center;
	gap: 12px;
}
.summary form.cart .quantity {
	display: inline-flex;
	border: 1px solid var(--ovo-line);
	border-radius: var(--ovo-radius);
	overflow: hidden;
	background: var(--ovo-paper-100);
}
.summary form.cart .quantity input {
	height: 48px;
	width: 54px;
	border: 0;
	background: transparent;
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: 15px;
	color: #111114;
	text-align: center;
}
.summary form.cart .quantity .btn {
	height: 48px;
	width: 40px;
	border: 0;
	background: transparent;
	color: var(--ovo-ash);
	transition: color 0.2s ease;
}
.summary form.cart .quantity .btn:hover {
	color: var(--ovo-signal);
}
.summary .single_add_to_cart_button {
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.04em;
	padding: 15px 40px;
	height: 50px;
	border-radius: var(--ovo-radius);
	background-color: var(--ovo-ink-900);
	color: #fff;
	border: 0;
	transition: background-color 0.2s ease;
}
.summary .single_add_to_cart_button:hover {
	background-color: var(--ovo-signal);
	color: #fff;
}

/* --- Trust bar (under add to cart) --- */
.ovo-pd-trust-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 26px;
	list-style: none;
	margin: 26px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--ovo-line);
}
.ovo-pd-trust-bar li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--ovo-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ovo-slate);
}
.ovo-pd-trust-bar svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	color: var(--ovo-signal);
}

/* --- Gallery --- */
.woocommerce-product-gallery {
	border: 1px solid var(--ovo-line);
	border-radius: var(--ovo-radius);
	overflow: hidden;
	background-color: var(--ovo-paper-100);
}
.woocommerce-product-gallery .flex-viewport {
	border-radius: 0;
}
.single-product .product .woocommerce-product-gallery ol.flex-control-thumbs li {
	border: 1px solid var(--ovo-line);
	border-radius: 6px;
	overflow: hidden;
}
.single-product .product .woocommerce-product-gallery ol.flex-control-thumbs li img {
	border: 0;
}
.single-product .product .woocommerce-product-gallery ol.flex-control-thumbs li.flex-active {
	border-color: var(--ovo-signal);
}

/* --- Tabs --- */
.woocommerce-tabs {
	margin-top: 56px;
}
.woocommerce-tabs ul.tabs {
	display: flex;
	gap: 34px;
	padding: 0;
	margin: 0;
	border-bottom: 1px solid var(--ovo-line);
	background: transparent;
	overflow-x: auto;
	scrollbar-width: none;
}
.woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
.woocommerce-tabs ul.tabs li {
	position: relative;
	border: 0;
	background: transparent;
	border-radius: 0;
	padding: 0 0 16px;
	margin: 0;
	white-space: nowrap;
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: 14.5px;
	letter-spacing: 0.02em;
	color: var(--ovo-ash);
}
.woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce-tabs ul.tabs li a {
	color: inherit;
	display: block;
	transition: color 0.2s ease;
}
.woocommerce-tabs ul.tabs li:hover a { color: var(--ovo-slate); }
.woocommerce-tabs ul.tabs li.active {
	color: #111114;
}
.woocommerce-tabs ul.tabs li.active::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background-color: var(--ovo-signal);
}
.woocommerce-tabs .panel {
	padding: 34px 0 0;
	margin: 0;
}
.woocommerce-tabs .panel p {
	line-height: 1.75;
	color: #3a3a42;
	font-size: 15.5px;
}

/* --- Long description editorial blocks --- */
.ovo-pd-lead {
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: clamp(19px, 1.7vw, 23px);
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: #111114;
	margin: 0 0 14px;
}
.ovo-pd-features {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 10px;
}
.ovo-pd-features li {
	position: relative;
	padding-left: 24px;
	font-size: 15.5px;
	line-height: 1.65;
	color: #3a3a42;
}
.ovo-pd-features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--ovo-signal);
}
.ovo-pd-specs {
	width: 100%;
	border-collapse: collapse;
	margin: 4px 0 24px;
	font-size: 15px;
}
.ovo-pd-specs th {
	text-align: left;
	font-family: var(--ovo-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ovo-ash);
	padding: 12px 0;
	border-bottom: 1px solid var(--ovo-line);
	width: 42%;
}
.ovo-pd-specs td {
	padding: 12px 0;
	border-bottom: 1px solid var(--ovo-line);
	color: #111114;
}
.ovo-pd-trust {
	margin: 6px 0 0;
	padding: 16px 18px;
	background-color: var(--ovo-paper);
	border-left: 2px solid var(--ovo-signal);
	border-radius: 0 var(--ovo-radius) var(--ovo-radius) 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--ovo-slate);
}

/* --- Stock line --- */
.single-product p.stock {
	font-family: var(--ovo-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ovo-slate);
}

/* --- Related products --- */
.related.products > h2,
.up-sells.products > h2 {
	font-family: var(--ovo-display);
	font-weight: 600;
	font-size: clamp(24px, 2.4vw, 32px);
	letter-spacing: -0.02em;
	color: #111114;
	margin: 0 0 32px;
}

@media (max-width: 640px) {
	.summary .price { font-size: 21px; }
	.summary form.cart .variations select { min-width: 100%; width: 100%; }
	.summary .single_add_to_cart_button { flex: 1 1 auto; }
	.ovo-pd-trust-bar { gap: 12px 18px; }
	.woocommerce-tabs { margin-top: 40px; }
	.woocommerce-tabs ul.tabs { gap: 24px; }
}