/*
Theme Name: I-Mebli Modern
Theme URI: https://i-mebli.com
Author: I-Mebli
Description: Custom minimalist theme for I-Mebli furniture store.
Version: 0.1
Requires PHP: 7.4
Text Domain: imebli-modern
*/

/*
 * Design tokens — single source of truth for the whole theme.
 *
 * Mapping to the UI-restyling brief's suggested names (TZ_UI_restyling),
 * so future edits reuse these instead of inventing a parallel set:
 *   --color-primary        → --color-accent
 *   --color-primary-hover  → --color-accent-dark
 *   --color-primary-light  → --color-accent-light
 *   --color-text-secondary → --color-muted
 *   --color-background     → --color-bg
 *   --color-background-secondary → --color-bg-soft
 * (--color-accent-secondary is our own addition — the coral/red used for
 * "needs attention" states like an unselected product variation.)
 */
:root{
	--color-text: #1a1a1a;
	--color-muted: #6b6b6b;
	--color-border: #e6e6e6;
	--color-bg: #ffffff;
	--color-bg-soft: #f7f7f7;
	--color-accent: #076fac;
	--color-accent-dark: #05578a;
	--color-accent-light: #0990db;
	--color-accent-secondary: #cc3d3d;
	--color-badge-new: #2f9e44;
	--color-footer-bg: #1c2126;
	--color-footer-text: #c6cad0;

	/* Radius scale. --radius (6px) is the default for buttons, inputs,
	   cards, filter chips — most things. Use a larger/pill value only
	   when a component is deliberately more rounded (pagination buttons,
	   badges) rather than picking an arbitrary number. */
	--radius-sm: 4px;
	--radius: 6px;
	--radius-lg: 10px;
	--radius-pill: 999px;

	/* Spacing scale — pick from this instead of an arbitrary px value
	   when writing new margin/padding/gap rules. */
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 40px;
	--space-6: 48px;
	--space-7: 64px;
	--space-8: 80px;

	--container: 1580px;
}

*{ box-sizing: border-box; }

input, select, textarea, button, optgroup{ font-family: inherit; }

body{
	margin: 0;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-weight: 400;
	color: var(--color-text);
	background: var(--color-bg);
	font-size: 15px;
	line-height: 1.5;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
ul{ margin: 0; padding: 0; list-style: none; }

/* ---------- Typography scale ----------
   No sitewide heading rules existed before this — the PDP product name, the
   category archive H1, and any heading a client types into a page's content
   (Про нас, Доставка і оплата) all fell back to the browser's own default H1
   size, unrelated to everything else's weight/spacing. This gives every
   heading everywhere a base size/weight; component-scoped rules already in
   this file (.hero h1, .home-categories h2, etc.) keep winning on
   specificity, so none of those need to change. */
h1, h2, h3, h4, h5, h6{
	margin: 0 0 var(--space-2);
	line-height: 1.25;
	font-weight: 700;
	color: var(--color-text);
}

h1{ font-size: 34px; }
h2{ font-size: 24px; }
h3{ font-size: 18px; font-weight: 600; }
h4{ font-size: 16px; font-weight: 600; }
h5{ font-size: 15px; font-weight: 600; }
h6{ font-size: 14px; font-weight: 600; }

@media (max-width: 640px){
	h1{ font-size: 26px; }
	h2{ font-size: 20px; }
	h3{ font-size: 17px; }
}

/* Freeform page content (Про нас, Доставка і оплата, etc.) — capped width
   for a comfortable line length instead of stretching to the full 1580px
   container, plus heading spacing that suits body copy specifically (a
   heading immediately after a paragraph needs room above it; the bare h1-h6
   rule above only sets margin-bottom, which is right for component titles
   but not for headings breaking up running text). */
.page-content{
	max-width: 820px;
	line-height: 1.7;
}

.page-content h2{
	font-size: 22px;
	margin: var(--space-4) 0 var(--space-1);
}

.page-content h3{
	font-size: 17px;
	margin: var(--space-3) 0 var(--space-1);
}

.container{
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

.site-main{
	padding-top: 30px;
}

.woocommerce-breadcrumb{
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: 13px;
	color: var(--color-muted);
}

.woocommerce-breadcrumb a{
	color: var(--color-muted);
}

.woocommerce-breadcrumb a:hover{
	color: var(--color-accent);
}

.woocommerce-breadcrumb__current{
	color: var(--color-text);
	font-weight: 500;
}

/* First crumb ("Home") shown as a house icon instead of text, like the old store. */
.woocommerce-breadcrumb a:first-child{
	font-size: 0;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.woocommerce-breadcrumb a:first-child::before{
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	background-color: var(--color-muted);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3.2 3 10.5V21h6v-7h6v7h6V10.5z'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3.2 3 10.5V21h6v-7h6v7h6V10.5z'/></svg>") no-repeat center / contain;
}

.woocommerce-breadcrumb a:first-child:hover::before{
	background-color: var(--color-accent);
}

/* ---------- Header ---------- */

.site-header{
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg);
}

/* Sticky header on desktop: pins on scroll, then collapses to a compact bar.
   Scoped to desktop so it never fights the mobile drawer's fixed layout. */
@media (min-width: 769px){
	.site-header{
		position: sticky;
		top: 0;
		z-index: 500;
		transition: box-shadow .2s ease;
	}
	.site-header.is-stuck{
		box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
	}
	.site-header__utility,
	.site-header__top{
		transition: padding .2s ease;
	}
	.site-header.is-stuck .site-header__utility,
	.site-header.is-stuck .main-nav{
		display: none;
	}
	.site-header.is-stuck .site-header__top{
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.site-header.is-stuck .site-logo img{
		height: 42px;
	}
}

.site-header__utility{
	background: var(--color-bg-soft);
	font-size: 13px;
}

.site-header__utility ul{
	display: flex;
	gap: 20px;
	justify-content: flex-end;
}

.site-header__utility a{
	display: block;
	padding: 8px 0;
	color: var(--color-muted);
}

.site-header__utility a:hover{
	color: var(--color-accent);
}

.site-header__top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 0;
}

.site-logo img{
	height: 56px;
	width: auto;
}

.site-phone{
	position: relative;
	flex: 0 0 auto;
}

.site-phone__summary{
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	cursor: pointer;
	white-space: nowrap;
}

.site-phone__summary::-webkit-details-marker{
	display: none;
}

.site-phone__icon{
	color: var(--color-accent);
	display: flex;
}

.site-phone__main{
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.site-phone__main strong{
	font-size: 15px;
	font-weight: 600;
}

.site-phone__main small{
	font-size: 12px;
	color: var(--color-muted);
}

.site-phone__caret{
	display: flex;
	color: var(--color-muted);
	transition: transform .15s ease;
}

.site-phone[open] .site-phone__caret{
	transform: rotate(180deg);
}

.site-phone__panel{
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 20;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
	padding: 12px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 200px;
}

.site-phone__panel a{
	font-size: 14px;
}

.site-phone__panel a:hover{
	color: var(--color-accent);
}

.site-search{
	flex: 1 1 auto;
	max-width: 480px;
}

.site-search form{
	display: flex;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}

.site-search input[type="search"]{
	flex: 1;
	height: 46px;
	border: 0;
	padding: 0 14px;
	font-size: 15px;
	outline: none;
	min-width: 0;
}

.site-search button{
	/* height/font/transition come from the shared button rule (declared
	   below, so its border-radius would otherwise win on source order);
	   square corners here — the rounded look comes from .site-search
	   form's own border-radius clipping the whole pill via overflow:hidden. */
	border-radius: 0 !important;
	padding: 0 18px !important;
	cursor: pointer;
}

.lang-switcher{
	flex: 0 0 auto;
}

/* The language switcher's open dropdown floats at z-index:9999 (set by the
   plugin itself) so it can sit above regular page content — but that also
   puts it above the product gallery's fullscreen lightbox (z-index:1500),
   which should always be the topmost layer on the page. */
.pswp{
	z-index: 100000;
}

/* Flags are disabled in the plugin's own settings; kept as a safety net
   in case that setting ever changes. */
.lang-switcher .trp-flag-image{
	display: none !important;
}

/* Note: the plugin renders TWO elements sharing the .trp-language-switcher
   class — an inert "anchor" that reserves layout space, and the actual
   interactive "overlay" that must stay `position: absolute` (set by the
   plugin's own CSS) so its open dropdown list floats over the page instead
   of pushing the header taller. Never set `position` on that shared class
   here — that's what caused the header-height-on-open bug previously. */

.site-header__actions{
	display: flex;
	align-items: center;
	gap: 20px;
}

.site-header__actions a{
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--color-text);
}

.cart-count{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--color-accent);
	color: #fff;
	font-size: 11px;
}

.main-nav{
	border-top: 1px solid var(--color-border);
}

.main-nav ul{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.main-nav a{
	display: block;
	padding: 14px 16px;
	font-size: 14px;
	font-weight: 500;
}

.main-nav a:hover{
	color: var(--color-accent);
}

/* ---------- Mobile menu ---------- */

.mobile-menu-toggle{
	display: none;
}

.hamburger{
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 24px;
	height: 20px;
	cursor: pointer;
}

.hamburger span{
	display: block;
	height: 2px;
	background: var(--color-text);
	border-radius: 2px;
}

.mobile-nav-panel{
	display: none;
}

.mobile-nav-overlay{
	display: none;
}

@media (max-width: 900px){

	/* The utility bar just repeats the primary menu, which is already in the
	   hamburger panel on mobile — showing both is redundant and cramped. */
	.site-header__utility{ display: none; }

	.site-header__top{
		flex-wrap: wrap;
		row-gap: 10px;
		padding: 14px 16px;
	}

	.hamburger{ display: flex; order: 1; margin-right: 4px; }
	.site-logo{ order: 2; margin-left: auto; }

	/* Language switcher and Кабінет/Кошик move into the hamburger menu on
	   mobile instead of crowding the top row (see .mnav__lang / .mnav__cards). */
	.lang-switcher,
	.site-header__actions{ display: none; }

	.site-phone{ order: 3; flex-basis: 100%; }
	.site-phone__summary{ justify-content: center; }
	.site-search{ order: 4; flex-basis: 100%; max-width: 100%; }

	.site-logo img{ height: 42px; }

	.site-phone__main strong{ font-size: 14px; }

	.site-phone__main small{ display: none; }

	/* Expand inline instead of floating over the search bar below it. */
	.site-phone__panel{
		position: static;
		box-shadow: none;
		margin-top: 10px;
		width: 100%;
		min-width: 0;
	}

	.main-nav{ display: none; }

	.mobile-nav-panel{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 88%;
		max-width: 360px;
		background: #fff;
		z-index: 1000;
		overflow: hidden;
		transform: translateX(-100%);
		transition: transform .25s ease;
		box-shadow: 2px 0 12px rgba(0,0,0,.1);
	}

	.mnav{
		position: relative;
		height: 100%;
	}

	.mnav__screen{
		display: none;
		position: absolute;
		inset: 0;
		overflow-y: auto;
		background: #fff;
	}

	.mnav__screen.is-active{ display: block; }

	.mnav__header{
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 18px 20px;
		border-bottom: 1px solid var(--color-border);
	}

	.mnav__title{
		flex: 1 1 auto;
		font-size: 17px;
		font-weight: 600;
	}

	.mnav__lang{
		flex: 0 0 auto;
	}

	.mnav__lang .trp-shortcode-switcher__wrapper,
	.mnav__lang .trp-current-language-item__wrapper{
		font-size: 13px;
	}

	.mnav__card-icon--cart{ color: var(--color-accent); }

	.mnav__back,
	.mnav__close{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		flex: 0 0 auto;
		border: 0;
		background: none;
		padding: 0;
		color: var(--color-text);
		cursor: pointer;
	}

	.mnav__cards{
		padding: 16px;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.mnav__card{
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		background: #fff;
		padding: 14px;
		font-size: 15px;
		font-family: inherit;
		color: var(--color-text);
		cursor: pointer;
		text-align: left;
	}

	.mnav__card-icon{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 999px;
		flex: 0 0 auto;
		background: var(--color-bg-soft);
		color: var(--color-accent);
	}

	.mnav__card-icon--account{ color: var(--color-accent-secondary); }

	.mnav__card-label{ flex: 1 1 auto; font-weight: 500; }

	.mnav__card-arrow{ color: var(--color-muted); flex: 0 0 auto; }

	.mnav__links{
		padding: 4px 20px 20px;
	}

	.mnav__links-list a{
		display: block;
		padding: 12px 0;
		border-bottom: 1px solid var(--color-border);
		font-size: 14px;
		color: var(--color-muted);
	}

	.mnav__list{
		padding: 8px 8px 20px;
	}

	.mnav__item{
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		border: 0;
		background: none;
		padding: 13px 8px;
		font-size: 15px;
		font-family: inherit;
		color: var(--color-text);
		cursor: pointer;
		text-align: left;
		border-bottom: 1px solid var(--color-border);
	}

	.mnav__item-icon{
		display: flex;
		color: var(--color-muted);
		flex: 0 0 auto;
	}

	.mnav__item-label{ flex: 1 1 auto; }

	.mnav__item--all{
		color: var(--color-accent);
		font-weight: 500;
	}

	.mnav__recent{
		padding: 12px 16px;
	}

	.mnav__empty{
		color: var(--color-muted);
		font-size: 14px;
		padding: 20px 4px;
	}

	.mnav__recent-item{
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 0;
		border-bottom: 1px solid var(--color-border);
	}

	.mnav__recent-thumb{
		width: 52px;
		height: 52px;
		flex: 0 0 auto;
		border-radius: var(--radius);
		overflow: hidden;
		background: var(--color-bg-soft);
	}

	.mnav__recent-thumb img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.mnav__recent-info{
		display: flex;
		flex-direction: column;
		gap: 4px;
		min-width: 0;
	}

	.mnav__recent-title{
		font-size: 13px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.mnav__recent-price{
		font-size: 13px;
		font-weight: 600;
		color: var(--color-accent-dark);
	}

	.mobile-nav-overlay{
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,.4);
		z-index: 999;
		opacity: 0;
		pointer-events: none;
		transition: opacity .25s ease;
	}

	#mobile-menu-toggle:checked ~ header .mobile-nav-panel{
		transform: translateX(0);
	}

	#mobile-menu-toggle:checked ~ .mobile-nav-overlay{
		opacity: 1;
		pointer-events: auto;
	}
}

/* Sticky header on mobile: pins to the top; once scrolled it collapses to the
   hamburger plus the phone number where the logo was (logo + search hidden).
   z-index 1000 keeps the slide-in drawer (inside the header) above its overlay. */
@media (max-width: 768px){
	.site-header{
		position: sticky;
		top: 0;
		z-index: 1000;
	}
	.site-header.is-stuck{
		box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
	}
	.site-header.is-stuck .site-header__top{
		flex-wrap: nowrap;
		row-gap: 0;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.site-header.is-stuck .site-logo,
	.site-header.is-stuck .site-search,
	.site-header.is-stuck .site-phone__caret,
	.site-header.is-stuck .site-phone__panel{
		display: none;
	}
	.site-header.is-stuck .site-phone{
		order: 2;
		flex: 0 0 auto;
		margin-left: auto;
	}
	.site-header.is-stuck .site-phone__main strong{
		font-size: 16px;
	}
}

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

.hero{
	background-color: var(--color-bg-soft);
	background-size: cover;
	background-position: center;
	padding: 96px 24px;
	text-align: left;
	margin-bottom: 0;
}

.hero__inner{
	max-width: var(--container);
	margin: 0 auto;
}

.hero__inner > *{
	max-width: 480px;
}

@media (max-width: 640px){
	.hero{ padding: 56px 20px; text-align: center; }
	.hero__inner > *{ max-width: 100%; }
}

.hero h1{
	font-size: 34px;
	line-height: 1.25;
	margin: 0 0 16px;
}

.hero p{
	color: var(--color-muted);
	margin: 0 0 28px;
	font-size: 16px;
}

.hero__cta{
	/* size/color/radius/transition come from the shared button rule below —
	   this just keeps it from stretching full-width inside .hero. */
	display: inline-flex;
}

/* ---------- WooCommerce buttons (cart, checkout, forms) ---------- */

/* Unified button size: every plain-CTA button/link/input on the site (add
   to cart, apply coupon, update cart, hero CTA, search) renders at the same
   height/font regardless of which WooCommerce markup produces it — WC's own
   defaults vary these wildly per context (e.g. "Оновити кошик" used to come
   out at 34px, "Перейти до оформлення" at 56px, both unstyled by us), so
   the sizing here is !important to hold the line against WC's own rules. */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.hero__cta,
.site-search button{
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 46px !important;
	padding: 0 24px !important;
	background: var(--color-accent);
	color: #fff;
	border: 0;
	border-radius: var(--radius);
	font-size: 15px !important;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition: background-color .25s ease;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.hero__cta:hover,
.site-search button:hover{
	background: var(--color-accent-dark);
	color: #fff;
}

.woocommerce .button:focus-visible,
.hero__cta:focus-visible,
.site-search button:focus-visible{
	outline: 2px solid var(--color-accent-light);
	outline-offset: 2px;
}

/* The two "commercial CTA" buttons a customer actually completes a purchase
   through — larger than everything else so they read as the primary action
   on their page, per the same rule everywhere instead of each inheriting
   whatever size WooCommerce happens to default that markup to. */
.woocommerce button.single_add_to_cart_button,
.woocommerce a.single_add_to_cart_button,
.woocommerce a.checkout-button,
.woocommerce #place_order{
	height: 50px !important;
	padding: 0 32px !important;
	font-size: 16px !important;
	min-width: 220px;
}

@media (max-width: 480px){
	.single_add_to_cart_button,
	.checkout-button,
	#place_order{
		min-width: 0;
		width: 100%;
	}
}

/* ---------- Form fields (checkout, cart coupon, account, reviews, quantity) ----------
   WooCommerce leaves most of these at browser-default sizing (the coupon
   box was 29px tall, the quantity stepper 22px, no focus ring anywhere) —
   bring them to the same height/border/radius as the buttons beside them. */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select,
.woocommerce-cart input[type="text"],
.woocommerce-cart input[type="email"],
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
#customer_login input[type="text"],
#customer_login input[type="password"],
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.quantity .qty{
	height: 46px !important;
	padding: 0 14px !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius) !important;
	font-size: 15px !important;
	color: var(--color-text);
	background: var(--color-bg);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.woocommerce-checkout textarea,
.woocommerce-account textarea,
.comment-form textarea{
	height: auto !important;
	min-height: 120px;
	padding: 12px 14px !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius) !important;
	font-size: 15px !important;
	color: var(--color-text);
	background: var(--color-bg);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.quantity .qty{
	width: 64px;
	text-align: center;
}

/* Doubled-up class selectors (.woocommerce-checkout.woocommerce-checkout etc.)
   are not a typo — WooCommerce's own `.woocommerce form .form-row
   .input-text:focus{ border-color: currentcolor }` rule has the same
   specificity as a single-class :focus selector here, and being !important
   on both sides just falls back to specificity, so this needs a genuine
   specificity edge, not just !important, to reliably win. */
.woocommerce-checkout.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout.woocommerce-checkout input[type="password"]:focus,
.woocommerce-checkout.woocommerce-checkout select:focus,
.woocommerce-checkout.woocommerce-checkout textarea:focus,
.woocommerce-cart.woocommerce-cart input[type="text"]:focus,
.woocommerce-account.woocommerce-account input:focus,
.woocommerce-account.woocommerce-account textarea:focus,
#customer_login#customer_login input:focus,
.comment-form.comment-form input:focus,
.comment-form.comment-form textarea:focus,
.quantity.quantity .qty:focus{
	outline: none !important;
	border-color: var(--color-accent) !important;
	box-shadow: 0 0 0 3px rgba(7,111,172,.12) !important;
}

.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt{
	background: var(--color-accent);
	color: #fff;
}

.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover{
	background: var(--color-accent-dark);
	color: #fff;
}

/* Disabled add-to-cart (no variation picked yet) — coral accent from the
   original i-mebli.com store, at full opacity instead of a faded accent. */
.woocommerce .button.alt.disabled,
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce input.button.alt.disabled,
.woocommerce #respond input#submit.alt.disabled{
	background: var(--color-accent-secondary);
	color: #fff;
	opacity: 1;
	cursor: not-allowed;
}

.woocommerce a:not(.button){
	color: inherit;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{
	color: var(--color-accent-dark);
}

/* Sale badge as a rounded "price tag" pill (icon + percentage) instead of the
   default WooCommerce circle. Overrides WooCommerce's own .onsale sizing. */
.woocommerce span.onsale{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	top: 12px;
	left: 12px;
	right: auto;
	margin: 0;
	padding: 8px 13px;
	border-radius: 8px;
	line-height: 1;
	font-size: 15px;
	font-weight: 700;
	background: var(--color-accent-secondary);
	color: #fff;
}
.woocommerce span.onsale .onsale__icon{
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

/* ---------- PDP purchase block: price hierarchy ---------- */

/* Pre-selection price for a variable product: "від {min}" + muted note,
   instead of a min–max range that competes with the concrete per-size price. */
.woocommerce div.product p.price{
	margin: 0 0 18px;
}
.woocommerce div.product p.price .imebli-price-from{
	display: block;
	font-size: 26px;
	font-weight: 700;
	color: var(--color-accent-dark);
	line-height: 1.15;
}
.woocommerce div.product p.price .imebli-price-note{
	display: block;
	margin-top: 3px;
	font-size: 13px;
	font-weight: 400;
	color: var(--color-muted);
}
/* Once a concrete size is chosen, drop the "від" line — the selected
   variation's own price (below) becomes the single, unambiguous price. */
.product.imebli-has-variation p.price{
	display: none;
}

/* Price of the currently selected variation — the star of the block:
   concrete new price large, old price struck through beside it, saving
   stated as a hryvnia amount on its own line. */
.woocommerce-variation-price .price{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 2px 0 0;
	font-size: 34px;
	font-weight: 700;
	color: var(--color-accent-dark);
	line-height: 1.1;
}
.woocommerce-variation-price del{
	font-size: 20px;
	font-weight: 600;
	color: var(--color-muted);
	opacity: 1;
}
.woocommerce-variation-price ins{
	text-decoration: none;
	background: transparent;
}
.woocommerce-variation-price .imebli-save{
	display: block;
	margin-top: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-accent-secondary);
}

.home-categories,
.home-products{
	max-width: var(--container);
	margin: 0 auto 56px;
	padding: 0 24px;
}

.home-categories h2,
.home-products h2{
	font-size: 22px;
	margin: 0;
}

.home-products__head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 24px;
}

.home-products__head a{
	font-size: 14px;
	color: var(--color-muted);
}

.home-products__head a:hover{
	color: var(--color-accent);
}

.trust-row{
	background: var(--color-accent);
	color: #fff;
}

.trust-row__grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding: 28px 24px;
}

.trust-row__item{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.trust-row__item strong{
	font-size: 14px;
}

.trust-row__item span{
	font-size: 13px;
	opacity: .7;
}

@media (max-width: 640px){
	.trust-row__grid{ grid-template-columns: repeat(2, 1fr); }
}

.home-categories__grid{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

.home-categories__item{
	display: block;
}

.home-categories__link{
	display: block;
}

.home-categories__img{
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-bg-soft);
	margin-bottom: 10px;
}

.home-categories__img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.home-categories__item:hover .home-categories__img img{
	transform: scale(1.05);
}

.home-categories__img-placeholder{
	display: block;
	width: 100%;
	height: 100%;
}

.home-categories__label{
	display: block;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
}

.home-categories__item:hover .home-categories__label{
	color: var(--color-accent);
}

.home-categories__count{
	display: block;
	text-align: center;
	font-size: 12px;
	color: var(--color-muted);
	margin-top: 2px;
}

.home-categories__subcats{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 6px;
	margin-top: 8px;
}

.home-categories__subcats a{
	font-size: 11px;
	color: var(--color-muted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	padding: 2px 8px;
	transition: color .15s ease, border-color .15s ease;
}

.home-categories__subcats a:hover{
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.home-categories__subcats-more{
	font-weight: 600;
}

.home-usp{
	max-width: var(--container);
	margin: 0 auto 56px;
	padding: 32px 24px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.home-usp__item{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.home-usp__item strong{
	font-size: 15px;
}

.home-usp__item span{
	color: var(--color-muted);
	font-size: 13px;
}

@media (max-width: 1024px){
	.home-categories__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
	.home-categories__grid{ grid-template-columns: repeat(2, 1fr); }
	.home-usp{ grid-template-columns: 1fr; }
	.hero h1{ font-size: 26px; }
}

.home-seo-text{
	max-width: 860px;
	margin: 0 auto 56px;
	padding: 40px 24px 0;
	border-top: 1px solid var(--color-border);
	color: var(--color-muted);
	font-size: 14px;
	line-height: 1.7;
}

.home-seo-text__kicker{
	display: block;
	color: var(--color-accent);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-bottom: 8px;
}

.home-seo-text h2{
	color: var(--color-text);
	font-size: 24px;
	margin: 0 0 16px;
}

.home-seo-text h3{
	color: var(--color-text);
	font-size: 17px;
	margin: 24px 0 8px;
}

.home-seo-text hr{
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: 24px 0;
}

/* ---------- Homepage layout (trust strip, banded sections, cards) ---------- */

.home-wrap{
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

.home{ overflow-x: clip; }

/* The homepage sits inside the page-wide .container; bands break out of it to
   span the full viewport width. */
.home-section,
.home-trust{
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: 0;
}

.home-section{
	max-width: none;
	margin-top: 0;
	margin-bottom: 0;
	padding: 48px 0;
}
.home-section--soft{
	background: #f1f7fc;
}

.home-section h2{
	font-size: 22px;
	font-weight: 700;
	margin: 0;
}

/* Trust strip right under the hero */
.home-trust{
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}
.home-trust__grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px 24px;
	padding-top: 22px;
	padding-bottom: 22px;
}
.home-trust__item{
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
}
.home-trust__icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 10px;
	background: #e3f0fa;
	color: var(--color-accent);
}
.home-trust__text{
	font-size: 14px;
	font-weight: 600;
}
@media (max-width: 900px){
	.home-trust__grid{ grid-template-columns: repeat(2, 1fr); }
	.home-trust__item{ justify-content: flex-start; }
}
@media (max-width: 480px){
	.home-trust__text{ font-size: 13px; }
}

/* Category cards */
.home-categories h2{ margin-bottom: 24px; }
.home-categories__grid{
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}
.home-categories__item{
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	transition: box-shadow .2s ease, border-color .2s ease;
}
.home-categories__item:hover{
	border-color: var(--color-accent-light);
	box-shadow: 0 6px 18px rgba(7, 111, 172, .12);
}
.home-categories__link{
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 14px 12px 16px;
}
.home-categories__img{
	background: transparent;
	border-radius: var(--radius);
}
.home-categories__item--all{
	background: var(--color-accent);
	border-color: var(--color-accent);
}
.home-categories__item--all:hover{
	background: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
}
.home-categories__item--all .home-categories__link{
	align-items: center;
	justify-content: center;
	min-height: 120px;
}
.home-categories__item--all .home-categories__label,
.home-categories__item--all:hover .home-categories__label{
	color: #fff;
	font-weight: 700;
	font-size: 15px;
}
@media (max-width: 1100px){
	.home-categories__grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px){
	.home-categories__grid{ grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (max-width: 480px){
	.home-categories__grid{ grid-template-columns: repeat(2, 1fr); }
	.home-section{ padding: 32px 0; }
}

/* Product rows */
.home-products__head{ margin-bottom: 24px; }
.home-products__head a{
	color: var(--color-accent);
	font-weight: 600;
}
.home-products .products{ margin-bottom: 0; }

/* SEO text with "read more" */
.home-seo-text{
	max-width: none;
	margin-top: 0;
	border-top: 0;
	padding: 48px 0;
}
.home-seo-text__box{
	max-width: 860px;
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
}
.home-seo-text__box.is-collapsed{
	max-height: 170px;
	overflow: hidden;
}
.home-seo-text__box.is-collapsed::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 70px;
	background: linear-gradient(rgba(255,255,255,0), #fff);
}
.home-seo-text__more{
	display: block;
	margin: 20px auto 0;
	padding: 10px 22px;
	background: transparent;
	color: var(--color-accent);
	border: 1.5px solid var(--color-accent);
	border-radius: var(--radius);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.home-seo-text__more[hidden]{ display: none; }
.home-seo-text__more:hover{
	background: var(--color-accent);
	color: #fff;
}

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

/* Dark navy footer: brand column + 4 link columns + bottom bar. */
.site-footer{
	margin-top: 64px;
	border-top: 1px solid var(--color-accent);
	background: #12233f;
	padding: 44px 0 28px;
	font-size: 15px;
	color: #c4cbd8;
}

.site-footer .container{
	padding-left: 24px;
	padding-right: 24px;
}

.site-footer__grid{
	display: grid;
	grid-template-columns: 1.3fr repeat(4, 1fr);
	gap: 32px;
	margin-bottom: 36px;
}

.site-footer__brand p{
	margin: 14px 0 0;
	max-width: 240px;
	line-height: 1.55;
}

.site-footer__logo img{
	display: block;
	height: 56px;
	width: auto;
}

.site-footer h4{
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 14px;
}

.site-footer ul li{
	margin-bottom: 11px;
}

.site-footer a{
	color: #c4cbd8;
	transition: color .15s ease;
}

.site-footer a:hover{
	color: #fff;
}

.footer-contacts-block p{
	margin: 10px 0 0;
	line-height: 1.6;
}

.footer-contacts-block__phone{
	display: inline-block;
	font-size: 17px;
	font-weight: 700;
	color: #fff !important;
}

.site-footer__bottom{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 20px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-top: 22px;
	font-size: 14px;
}

@media (max-width: 1024px){
	.site-footer__grid{ grid-template-columns: repeat(2, 1fr); }
	.site-footer__brand{ grid-column: 1 / -1; }
}
@media (max-width: 640px){
	.site-footer__bottom{ justify-content: center; text-align: center; }
}

/* ---------- Single product: SKU/category meta ---------- */

.product_meta{
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 12px 0 4px;
	font-size: 13px;
	color: var(--color-muted);
}

.product_meta > span{
	display: block;
}

/* Rating row visually joins the meta block right above it (same text style,
   compact/inline like the other meta lines) instead of standing out as a
   full-width, oddly-spaced bar. */
.woocommerce .woocommerce-product-rating{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 20px;
	font-size: 13px;
	color: var(--color-muted);
}

/* WooCommerce core adds a float clearfix (::before/::after with content:" ")
   meant for its default float-based layout — inside our flex container that
   generated content becomes a real flex item, and `gap` inserts a visible
   offset before the "Відгуки:" label. Not needed here (nothing floats). */
.woocommerce .woocommerce-product-rating::before,
.woocommerce .woocommerce-product-rating::after{
	content: none;
}

.woocommerce .woocommerce-product-rating .star-rating{
	font-size: 13px;
	float: none;
}

.woocommerce-product-rating__label{
	font-weight: inherit;
	color: inherit;
}

.woocommerce-review-link{
	color: var(--color-muted);
}

.woocommerce-review-link:hover{
	color: var(--color-accent);
}

/* ---------- PDP: size selector ---------- */

/* Turn WooCommerce's variation <table> into a clean stacked field:
   "Розмір" label above a full-width, custom-styled select. */
.woocommerce div.product form.cart .variations{
	width: 100%;
	margin: 0 0 18px;
	border: 0;
}
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr{
	display: block;
}
.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations td.value{
	display: block;
	width: auto;
	padding: 0;
	text-align: left;
	vertical-align: top;
}
.woocommerce div.product form.cart .variations th.label{
	margin-bottom: 7px;
}
.woocommerce div.product form.cart .variations th.label label{
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-muted);
	line-height: 1;
}
.woocommerce div.product form.cart .variations td.value{
	position: relative;
}
.woocommerce div.product form.cart .variations select{
	width: 100%;
	max-width: 360px;
	height: 50px;
	margin: 0;
	padding: 0 44px 0 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background-color: var(--color-bg);
	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='%236b6b6b' 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 16px center;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.woocommerce div.product form.cart .variations select:focus{
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(7,111,172,.12);
}
/* "Очистити" — a quiet secondary link, not a primary control. */
.woocommerce div.product form.cart .reset_variations{
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	color: var(--color-muted);
	text-decoration: underline;
}
.woocommerce div.product form.cart .reset_variations:hover{
	color: var(--color-accent);
}

/* ---------- PDP: quantity + Add to cart as one purchase control ---------- */

.woocommerce div.product form.cart:not(:has(.variations)),
.woocommerce div.product .woocommerce-variation-add-to-cart{
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 2px;
}

/* Stepper: −/+ buttons flanking the number input inside one bordered pill. */
.woocommerce div.product form.cart .quantity,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity{
	float: none;
	margin: 0;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: stretch;
	height: 52px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}
.imebli-qty-btn{
	width: 42px;
	border: 0;
	background: var(--color-bg-soft);
	color: var(--color-text);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}
.imebli-qty-btn:hover{
	background: #ededed;
}
.woocommerce div.product form.cart .quantity .qty{
	width: 52px !important;
	height: 50px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	text-align: center;
	background: var(--color-bg);
	-moz-appearance: textfield;
}
.woocommerce div.product form.cart .quantity .qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity .qty::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;
}

/* The primary action: fills the rest of the row and outweighs everything. */
.woocommerce div.product .single_add_to_cart_button{
	flex: 1 1 auto;
	height: 52px !important;
	min-width: 200px;
	font-size: 17px !important;
	font-weight: 700 !important;
}

/* ---------- PDP trust badges (right under Add to cart) ---------- */

/* A quiet reassurance list separated by a hairline rule — not a boxed-in
   grey container that reads as a separate technical panel. */
.imebli-pdp-trust{
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border: 0;
	border-top: 1px solid var(--color-border);
	border-radius: 0;
	background: transparent;
}

.imebli-pdp-trust__item{
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--color-text);
}

.imebli-pdp-trust__item svg{
	flex: 0 0 auto;
	color: var(--color-accent);
}

/* ---------- PDP: slim sticky purchase bar ---------- */

.imebli-sticky-cart{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	background: #fff;
	border-top: 1px solid var(--color-border);
	box-shadow: 0 -4px 16px rgba(0,0,0,.08);
	transform: translateY(100%);
	transition: transform .25s ease;
}
.imebli-sticky-cart.is-visible{
	transform: translateY(0);
}
.imebli-sticky-cart__inner{
	max-width: var(--container);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 16px;
}
.imebli-sticky-cart__media{
	flex: 0 0 auto;
}
.imebli-sticky-cart__media img{
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--radius);
	display: block;
}
.imebli-sticky-cart__info{
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
}
.imebli-sticky-cart__title{
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 42vw;
}
.imebli-sticky-cart__price{
	font-size: 15px;
	font-weight: 700;
	color: var(--color-accent-dark);
}
.woocommerce .imebli-sticky-cart__btn{
	margin-left: auto;
	flex: 0 0 auto;
	height: 46px !important;
	min-width: 0;
	padding: 0 28px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	white-space: nowrap;
}
@media (max-width: 480px){
	.imebli-sticky-cart__media{ display: none; }
	.imebli-sticky-cart__title{ max-width: 38vw; }
	.woocommerce .imebli-sticky-cart__btn{ padding: 0 18px !important; }
}

/* ---------- Quick order (Швидке замовлення) ---------- */

/* Secondary action beside the primary blue Add-to-cart. */
.woocommerce div.product form.cart .imebli-quick-order-btn{
	flex: 0 0 auto;
	height: 52px !important;
	padding: 0 22px !important;
	background: var(--color-footer-bg) !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	border: 0 !important;
	border-radius: var(--radius);
	white-space: nowrap;
	cursor: pointer;
}
.woocommerce div.product form.cart .imebli-quick-order-btn:hover{
	background: #2a3138 !important;
}

/* Mobile: both buttons stack at full width so they match. */
@media (max-width: 640px){
	.woocommerce div.product form.cart .single_add_to_cart_button,
	.woocommerce div.product form.cart .imebli-quick-order-btn{
		flex: 1 1 100%;
		width: 100% !important;
		min-width: 0;
	}
}

.imebli-qo{
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
/* When closed the modal must not sit as an invisible full-screen layer over
   the page (which would swallow every click) — the class-level display:flex
   above otherwise overrides the [hidden] attribute's default display:none. */
.imebli-qo[hidden]{
	display: none;
}
.imebli-qo__overlay{
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity .2s ease;
}
.imebli-qo.is-open .imebli-qo__overlay{ opacity: 1; }
.imebli-qo__dialog{
	position: relative;
	width: 100%;
	max-width: 620px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: #fff;
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
	transform: translateY(16px);
	opacity: 0;
	transition: transform .2s ease, opacity .2s ease;
}
.imebli-qo.is-open .imebli-qo__dialog{ transform: translateY(0); opacity: 1; }
.imebli-qo__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px;
	border-bottom: 1px solid var(--color-border);
}
.imebli-qo__heading{
	margin: 0;
	font-size: 20px;
	font-weight: 700;
}
.imebli-qo__close{
	border: 0;
	background: none;
	font-size: 28px;
	line-height: 1;
	color: var(--color-muted);
	cursor: pointer;
	padding: 0 4px;
}
.imebli-qo__close:hover{ color: var(--color-text); }
.imebli-qo__product{
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	background: var(--color-bg-soft);
}
.imebli-qo__thumb img{
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--radius);
	display: block;
}
.imebli-qo__info{ display: flex; flex-direction: column; gap: 4px; }
.imebli-qo__name{ font-weight: 600; }
.imebli-qo__price{
	font-size: 20px;
	font-weight: 700;
	color: var(--color-accent-dark);
}
.imebli-qo__form{
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 22px 22px;
}
.imebli-qo__field{ display: flex; flex-direction: column; gap: 6px; }
.imebli-qo__field[hidden]{ display: none; }
.imebli-qo__field label{
	font-size: 13px;
	font-weight: 600;
	color: var(--color-muted);
}
.imebli-qo__form select,
.imebli-qo__form input[type="text"],
.imebli-qo__form input[type="tel"],
.imebli-qo__form input[type="email"],
.imebli-qo__form input[type="number"],
.imebli-qo__form textarea{
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: 15px;
	color: var(--color-text);
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.imebli-qo__form textarea{
	height: auto;
	min-height: 64px;
	padding: 10px 14px;
	resize: vertical;
}
.imebli-qo__form select:focus,
.imebli-qo__form input:focus,
.imebli-qo__form textarea:focus{
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(7, 111, 172, .12);
}
.imebli-qo__hp{
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
}
.imebli-qo__submit{
	height: 52px;
	border: 0;
	border-radius: var(--radius);
	background: var(--color-badge-new);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease;
}
.imebli-qo__submit:hover{ background: #268138; }
.imebli-qo__submit:disabled{ opacity: .7; cursor: default; }
.imebli-qo__msg{ font-size: 14px; }
.imebli-qo__msg.is-error{ color: var(--color-accent-secondary); font-weight: 600; }
.imebli-qo__msg.is-success{ color: var(--color-badge-new); font-weight: 600; font-size: 15px; }

@media (max-width: 560px){
	.imebli-qo__product{ flex-wrap: wrap; }
}

/* ---------- Product gallery ---------- */

.woocommerce-product-gallery{
	margin-bottom: 0;
}

.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image img{
	border-radius: var(--radius);
}

.woocommerce-product-gallery__trigger{
	background: #fff;
	border-radius: 999px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* Dots under the main image + prev/next-arrow thumbnail carousel. */
.imebli-gallery-dots{
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
}

.imebli-gallery-dots button{
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--color-border);
	border: 0;
	padding: 0;
	cursor: pointer;
}

.imebli-gallery-dots button.is-active{
	background: var(--color-accent);
}

.imebli-gallery-thumbs{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.imebli-gallery-arrow{
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	color: var(--color-muted);
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.imebli-gallery-arrow:hover{
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.imebli-gallery-thumbs__track{
	flex: 1 1 auto;
	overflow-x: auto;
	scrollbar-width: none;
}

.imebli-gallery-thumbs__track::-webkit-scrollbar{
	display: none;
}

ol.flex-control-nav.flex-control-thumbs{
	display: flex !important;
	flex-wrap: nowrap;
	gap: 10px;
	margin: 0 !important;
	padding: 0;
	list-style: none;
	width: max-content;
}

.flex-control-thumbs li{
	list-style: none;
	width: 72px !important;
	height: 72px !important;
	flex: 0 0 auto;
}

.flex-control-thumbs li img{
	width: 72px !important;
	height: 72px !important;
	object-fit: cover;
	border-radius: var(--radius);
	border: 2px solid transparent;
	cursor: pointer;
	opacity: .6;
	transition: opacity .15s ease, border-color .15s ease;
}

.flex-control-thumbs li img:hover{
	opacity: 1;
}

.flex-control-thumbs li img.flex-active{
	opacity: 1;
	border-color: var(--color-accent);
}

/* ---------- WPC product options: image-radio swatches (tint colors etc.) ---------- */
/* Some products have 50+ color swatches per group (several wood types) — the plugin's
   default output is one huge image tile per option, which makes the page absurdly long.
   Render them as small chips inside a compact, scrollable palette instead. */

/* Collapsed to ~2 rows by default — a product can have 3 separate 50-swatch
   groups (tinting per wood type) stacked in the purchase form, which used to
   push Add to cart ~1000px below the price. imebli_swatch_toggle_script()
   below adds the "Показати всі" button and .is-expanded toggle; groups short
   enough to already fit collapsed get no button (nothing to expand). */
.wpcpo-option-image-radio .wpcpo-option-form{
	max-height: 108px;
	overflow: hidden;
	padding: 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-bg-soft);
	transition: max-height .2s ease;
}

.wpcpo-option-image-radio .wpcpo-option-form.is-expanded{
	max-height: 280px;
	overflow-y: auto;
}

.imebli-swatch-toggle{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	padding: 5px 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: #fff;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-accent);
	cursor: pointer;
}

.imebli-swatch-toggle:hover{
	border-color: var(--color-accent);
}

.wpcpo-option-image-radio .form-row{
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0;
}

.wpcpo-option-image-radio .wpcpo-option-field{
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.wpcpo-option-image-radio label{
	display: block !important;
	width: 44px !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer;
	font-size: 0;
	line-height: 0;
}

.wpcpo-option-image-radio label img{
	width: 44px !important;
	height: 44px !important;
	object-fit: cover;
	border-radius: 0;
	border: 2px solid transparent;
	/* Pale wood tones are nearly invisible against the swatch box's own
	   background without this — a permanent faint outline, independent of
	   the hover/selected border above. */
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
	transition: border-color .15s ease;
}

.wpcpo-option-image-radio label:hover img{
	border-color: var(--color-muted);
}

.wpcpo-option-image-radio .wpcpo-option-field:checked + label img{
	border-color: var(--color-accent);
	box-shadow: 0 0 0 2px rgba(9,144,219,.2);
}

.wpcpo-option-image-radio .wpcpo-option-field:checked + label img{
	border-color: var(--color-accent);
	box-shadow: 0 0 0 2px rgba(9,144,219,.2);
}

.imebli-swatch-preview{
	position: fixed;
	z-index: 200;
	width: 160px;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: 0 12px 32px rgba(0,0,0,.18);
	padding: 8px;
	text-align: center;
	pointer-events: none;
	display: none;
}

.imebli-swatch-preview.is-visible{
	display: block;
}

.imebli-swatch-preview img{
	width: 100%;
	aspect-ratio: 1 / 1.4;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.imebli-swatch-preview span{
	display: block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
}

/* ---------- Product tabs (Опис / Характеристики / Відгуки) ---------- */

.woocommerce-tabs ul.tabs{
	display: flex !important;
	flex-wrap: nowrap;
	gap: 0;
	border-bottom: 1px solid var(--color-border);
	margin: 0 0 24px !important;
	padding: 0 !important;
	list-style: none;
	overflow-x: auto;
}

.woocommerce-tabs ul.tabs::before{
	content: none !important;
}

.woocommerce-tabs ul.tabs li{
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	text-align: center;
	white-space: nowrap;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after{
	content: none !important;
}

.woocommerce-tabs ul.tabs li a{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 20px !important;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-muted) !important;
	border-bottom: 2px solid transparent;
}

.woocommerce-tabs ul.tabs li.active{
	background: none !important;
}

.woocommerce-tabs ul.tabs li.active a{
	color: var(--color-accent) !important;
	border-bottom-color: var(--color-accent);
}

.imebli-tab-icon{
	display: inline-flex;
}

.imebli-tab-icon svg{
	display: block;
}

@media (max-width: 640px){
	.woocommerce-tabs ul.tabs li{
		flex: 1 1 0;
	}
	.woocommerce-tabs ul.tabs li a{
		font-size: 12px;
		padding: 10px 4px !important;
		gap: 4px;
	}
}

/* ---------- Related / recently viewed sections (single product page) ---------- */

.related.products,
.recently-viewed{
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--color-border);
}

.related.products > h2,
.recently-viewed > h2{
	font-size: 20px;
	margin: 0 0 20px;
}

/* ---------- Shop layout (sidebar + grid) ---------- */

.shop-title{
	font-size: 26px;
	margin: 0 0 24px;
}

.shop-layout{
	display: grid;
	grid-template-columns: 390px 1fr;
	gap: 32px;
	align-items: start;
	margin-bottom: 48px;
}

.shop-filter-toggle{
	display: none;
}

.shop-sidebar__close{
	display: none;
}

.shop-sidebar{
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 20px;
	position: sticky;
	top: 20px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	overflow-x: hidden;
}

.shop-sidebar__title{
	display: block;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 16px;
}

.shop-sidebar .woof_container{
	font-size: 14px;
}

.shop-sidebar__title--categories{
	display: block;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--color-border);
}

.category-tree{
	font-size: 14px;
}

.category-tree__item{
	border-bottom: 1px solid var(--color-border);
}

.category-tree__item > a{
	display: block;
	padding: 10px 0;
	font-weight: 500;
}

.category-tree__item > a:hover,
.category-tree__item > a.is-current{
	color: var(--color-accent);
}

.category-tree__summary{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	cursor: pointer;
	list-style: none;
}

.category-tree__summary::-webkit-details-marker{
	display: none;
}

.category-tree__summary::after{
	content: "▾";
	font-size: 11px;
	color: var(--color-muted);
	transition: transform .15s ease;
	flex: 0 0 auto;
	margin-left: 8px;
}

.category-tree__group[open] > .category-tree__summary::after{
	transform: rotate(180deg);
}

.category-tree__summary a{
	flex: 1 1 auto;
	font-weight: 500;
}

.category-tree__summary.is-current a{
	color: var(--color-accent);
}

.category-tree__children{
	padding: 0 0 10px 14px;
}

.category-tree__children li{
	border-left: 1px solid var(--color-border);
}

.category-tree__children a{
	display: block;
	padding: 7px 0 7px 12px;
	font-size: 13px;
	color: var(--color-muted);
}

.category-tree__children a:hover,
.category-tree__children a.is-current{
	color: var(--color-accent);
}

.shop-layout__main ul.products{
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px){
	.shop-layout__main ul.products{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px){
	.shop-layout{
		grid-template-columns: 1fr;
	}
	/* On mobile the sidebar sits below a long (100+ item) product grid, so
	   it's hidden by default and a toggle button above the grid reveals it
	   instead of forcing a long scroll to reach the filter. */
	.shop-filter-toggle{
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		order: 0;
		margin-bottom: 16px;
		padding: 12px 16px;
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		background: var(--color-bg-soft);
		font-size: 15px;
		font-weight: 600;
		color: var(--color-text);
	}
	.shop-filter-toggle svg{
		flex: 0 0 auto;
	}
	.shop-sidebar{
		order: 1;
		position: static;
		max-height: none;
		overflow-y: visible;
		display: none;
		margin-bottom: 24px;
	}
	.shop-sidebar.is-open{
		display: block;
	}
	.shop-sidebar__close{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		margin-left: auto;
		margin-bottom: 12px;
		border: none;
		border-radius: 50%;
		background: var(--color-bg-soft);
		color: var(--color-text);
	}
	.shop-layout__main{
		order: 2;
	}
}

/* ---------- Subcategory tiles (shown under the H1 on a parent category page) ---------- */

.subcat-tiles{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 4px 0 24px;
}

.subcat-tiles__item{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: #fff;
	line-height: 1;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.subcat-tiles__label{
	font-size: 16px;
	font-weight: 600;
	color: var(--color-text);
	transition: color .15s ease;
}

.subcat-tiles__count{
	font-size: 14px;
	color: var(--color-muted);
}

.subcat-tiles__item:hover{
	border-color: var(--color-accent);
	box-shadow: 0 2px 8px rgba(7, 111, 172, .12);
}

.subcat-tiles__item:hover .subcat-tiles__label{
	color: var(--color-accent);
}

@media (max-width: 480px){
	.subcat-tiles{ gap: 8px; }
	.subcat-tiles__item{ padding: 10px 16px; }
	.subcat-tiles__label{ font-size: 15px; }
}

/* ---------- Shop grid / product card ---------- */

ul.products{
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	margin: 0 0 40px;
	padding: 0;
}

/* Pagination reads as one quiet navigation line, not a row of buttons that
   compete with the product grid above it: plain-text numbers, the current
   page as the only filled shape, minimal arrows. A top divider + generous
   padding gives it room to read as the grid's calm closing line instead of
   another dense row of UI right after 12+ product cards. */
.woocommerce-pagination{
	margin: 8px 0 40px;
	padding-top: 24px;
	border-top: 1px solid var(--color-border);
}

.woocommerce-pagination ul.page-numbers{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 100%;
}

.woocommerce-pagination .page-numbers li{
	list-style: none;
}

/* WooCommerce's own pagination rule (.woocommerce nav.woocommerce-pagination
   ul li a/span) has more type selectors (nav, ul, li) than ours, so it wins
   on specificity despite loading first — !important everywhere here to
   guarantee our styling regardless. Numbers and the prev/next arrows share
   this one base rule, so they're always the same size/shape/spacing. */
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span{
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 48px !important;
	height: 48px !important;
	padding: 0 8px !important;
	margin: 0 !important;
	text-align: center !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: var(--color-text);
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	transition: background-color .15s ease, color .15s ease;
}

.woocommerce-pagination .page-numbers a:hover{
	border-color: var(--color-accent) !important;
	color: var(--color-accent) !important;
}

.woocommerce-pagination .page-numbers .current{
	background: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
	color: #fff !important;
	font-weight: 700 !important;
}

.woocommerce-pagination .page-numbers .dots,
.woocommerce-pagination .page-numbers span.dots{
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--color-muted) !important;
	font-weight: 400 !important;
}

/* Prev/next arrows: quieter than the numbers (no fill even on hover — just a
   faint tint), so they read as navigation chrome, not extra pages. */
.woocommerce-pagination .prev.page-numbers,
.woocommerce-pagination .next.page-numbers{
	font-size: 20px !important;
	color: var(--color-text);
}

.woocommerce-pagination .prev.page-numbers:hover,
.woocommerce-pagination .next.page-numbers:hover{
	border-color: var(--color-accent) !important;
	color: var(--color-accent) !important;
}

@media (max-width: 480px){
	.woocommerce-pagination ul.page-numbers{
		gap: 6px;
	}
	.woocommerce-pagination .page-numbers a,
	.woocommerce-pagination .page-numbers span{
		min-width: 40px !important;
		height: 40px !important;
		padding: 0 4px !important;
		border-radius: 10px !important;
		font-size: 15px !important;
	}
}

/* WooCommerce's own clearfix pseudo-elements become real grid items inside a grid container — kill them. */
ul.products::before,
ul.products::after{
	content: none !important;
	display: none !important;
}

ul.products li.product{
	list-style: none;
	position: relative;
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}

.imebli-card{
	display: flex;
	flex-direction: column;
}

.imebli-card__media{
	position: relative;
	margin-bottom: 14px;
}

.imebli-card__image{
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--color-bg-soft);
	border-radius: var(--radius);
	overflow: hidden;
}

.imebli-card__image img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform .35s ease;
}

.imebli-card:hover .imebli-card__image img{
	transform: scale(1.04);
}

.imebli-card__badge{
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--color-accent-secondary);
	color: #fff;
	font-size: 11px;
	padding: 4px 8px;
	border-radius: 4px;
}

.imebli-card__badge--hit{
	background: var(--color-accent);
}

.imebli-card__badge--new{
	background: var(--color-badge-new);
}

.imebli-card__button{
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease;
}

.imebli-card:hover .imebli-card__button{
	opacity: 1;
	transform: translateY(0);
}

.imebli-card__button a,
.imebli-card__button .button{
	display: block;
	width: 100%;
	text-align: center;
	background: #fff;
	border: 1px solid var(--color-text);
	border-radius: var(--radius);
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.imebli-card__button a:hover,
.imebli-card__button .button:hover{
	background: var(--color-text);
	color: #fff;
}

.imebli-card__title{
	font-size: 14px;
	font-weight: 500;
	margin: 0 0 6px;
	line-height: 1.35;
	/* Clamp to 2 lines so a long product name never makes one card taller
	   than its row-mates — same fixed card height regardless of title length. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.35em * 2);
}

.imebli-card__price{
	font-size: 20px;
	font-weight: 700;
}

.imebli-card__price del{
	color: var(--color-muted);
	font-weight: 400;
	font-size: 14px;
	margin-right: 6px;
}

.imebli-card__variants{
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--color-muted);
}

.imebli-card__price ins{
	text-decoration: none;
}

/* Responsive grid */
@media (max-width: 1024px){
	ul.products{ grid-template-columns: repeat(3, 1fr); }
	.site-footer__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
	ul.products{ grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.site-footer__grid{ grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Back-to-top button ---------- */
.to-top{
	position: fixed;
	right: 20px;
	bottom: 24px;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-accent);
	color: #fff;
	box-shadow: 0 4px 14px rgba(7, 111, 172, .35);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s ease, bottom .25s ease;
}
.to-top.is-visible{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.to-top:hover{
	background: var(--color-accent-dark);
}
.to-top:focus-visible{
	outline: 2px solid var(--color-accent-light);
	outline-offset: 3px;
}
/* Lift above the sticky add-to-cart bar on product pages. */
body:has(.imebli-sticky-cart.is-visible) .to-top{
	bottom: 88px;
}
@media (max-width: 640px){
	.to-top{ right: 14px; bottom: 18px; width: 42px; height: 42px; }
}

/* ---------- Category description: "read more" ---------- */
.term-description.is-collapsed{
	position: relative;
	max-height: 190px;
	overflow: hidden;
}
.term-description.is-collapsed::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 70px;
	background: linear-gradient(rgba(255,255,255,0), #fff);
}
.term-description__more{
	display: inline-block;
	margin: 16px 0 0;
	padding: 10px 22px;
	background: transparent;
	color: var(--color-accent);
	border: 2px solid var(--color-accent);
	border-radius: 12px;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.term-description__more:hover{
	background: var(--color-accent);
	color: #fff;
}

/* WooCommerce wraps the pagination in a bordered <ul> with bordered/padded <li>s
   (a joined button group). Neutralise that so each number is its own card. */
.woocommerce nav.woocommerce-pagination ul.page-numbers{
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	white-space: normal;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li{
	float: none !important;
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: visible !important;
}
@media (max-width: 480px){
	.woocommerce nav.woocommerce-pagination ul.page-numbers{ gap: 6px !important; }
}

/* ---------- Unified select fields ----------
   Same look as the product-page size selector: bordered box, bold label,
   custom chevron. Applies to catalog sorting, the filter selects and the
   checkout/account selects, replacing the browser-default controls. */
.woocommerce .woocommerce-ordering select.orderby,
.woocommerce-page .woocommerce-ordering select.orderby,
.woof_container select,
.woof_redraw_zone select,
.woocommerce-checkout select,
.woocommerce-account select{
	height: 50px;
	max-width: 100%;
	margin: 0;
	padding: 0 44px 0 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background-color: var(--color-bg);
	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='%236b6b6b' 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 16px center;
	background-size: 16px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.woocommerce .woocommerce-ordering select.orderby:focus,
.woof_container select:focus,
.woof_redraw_zone select:focus,
.woocommerce-checkout select:focus,
.woocommerce-account select:focus{
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(7,111,172,.12);
}
.woocommerce .woocommerce-ordering{
	margin: 0 0 32px;
}
.woocommerce .woocommerce-result-count{
	margin: 0 0 32px;
	line-height: 50px;
}
.woof_container select,
.woof_redraw_zone select{
	width: 100%;
	height: 44px;
}