/* Nexio Toolkit — Phase 13 product/archive Elementor widgets.
 *
 * Structural defaults only: spacing rhythm, hierarchy, feedback and
 * motion. Colors and decoration stay with Elementor's widget style
 * controls wherever the user can set them, so nothing here fights a
 * design built in the editor.
 */

.nexio-shortcode-placeholder {
	display: inline-block;
	padding: 8px 12px;
	border: 1px dashed #f9a8a1;
	border-radius: 8px;
	color: #b42318;
	font-size: 13px;
	line-height: 1.5;
	background: #fef3f2;
}

.nexio-hide-sale-formatting del {
	display: none;
}

.nexio-hide-quantity .quantity {
	display: none;
}

.nexio-product-add-to-cart-wrap {
	display: block;
}

/* Phase 15.1 — flex rows so the widget's gap / alignment / per-piece
 * controls have real targets. Stacked by default; the widget's Layout
 * control adds a nexio-meta-layout-inline wrapper class for the
 * side-by-side variant.
 */
.nexio-product-meta {
	font-size: 13px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.nexio-meta-layout-inline .nexio-product-meta {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 16px;
}

.nexio-product-meta__row {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
}

.nexio-product-meta__label {
	font-weight: 600;
}

.nexio-product-meta__value a {
	text-decoration: none;
	transition: color 140ms ease, background-color 140ms ease;
}

/* Legacy fallback: meta markup that predates the __row spans (the
 * shortcode version) still stacks cleanly.
 */
.nexio-product-meta>span:not(.nexio-product-meta__row) {
	display: block;
}

.nexio-archive-products__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

/* Phase 13.1 — Add to Cart feedback + button width. */

.nexio-button-width-full .single_add_to_cart_button {
	display: block;
	width: 100%;
	text-align: center;
}

/* Owned state — the disabled "Already Purchased" button shown in
 * place of Add to Cart once the visitor has access to the product.
 * (0,2,1) so kit/theme button skins can't re-enable the cursor. */
/* Neutral by design, with !important: the widget's own button skin
   (whatever brand colour the site owner chose) must NOT reach this
   state. Dimming the purchase colour still read as a purple CTA;
   a grey ghost reads as "done". */
.nexio-product-add-to-cart button.nexio-owned-button {
	cursor: not-allowed;
	pointer-events: auto;
	opacity: 1;
	background: #f2f4f7 !important;
	background-image: none !important;
	border: 1px solid #d0d5dd !important;
	color: #667085 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

/* A check mark makes "Already Purchased" read as a status, not a
   second call-to-action competing with the Download button above it. */
.nexio-product-add-to-cart button.nexio-owned-button::before {
	content: "✓";
	margin-right: 8px;
	font-weight: 700;
}

/* The Download control that replaces Add to Cart for direct buyers
   is a real action: full strength, pointer cursor. */
.nexio-product-add-to-cart .nexio-download-now__button,
.nexio-product-add-to-cart a.nexio-download-now__button,
.nexio-product-add-to-cart button.nexio-download-now__button {
	cursor: pointer;
	opacity: 1;
}

/* Loading state — replace WooCommerce's default icon-font spinner
 * (an absolutely-positioned glyph that renders as broken characters
 * on buttons outside Woo's own templates) with a clean inline ring.
 * Written at (0,4,1) to outrank Woo core's
 * `.woocommerce button.button.loading::after` (0,3,1). */
.nexio-product-add-to-cart-wrap .nexio-product-add-to-cart .single_add_to_cart_button.loading {
	opacity: 0.75;
	pointer-events: none;
}

.nexio-product-add-to-cart-wrap .nexio-product-add-to-cart button.single_add_to_cart_button.loading::after {
	content: "";
	position: static;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	width: 1em;
	height: 1em;
	margin-left: 0.5em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	background: none;
	font-family: inherit;
	animation: nexio-atc-spin 0.6s linear infinite;
}

@keyframes nexio-atc-spin {
	to {
		transform: rotate(360deg);
	}
}

.nexio-add-to-cart-message {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.5;
	animation: nexio-cart-message-in 0.22s ease-out both;
}

/* No message yet (or message cleared) — take up no space at all
 * instead of reserving an empty strip under the button. */
.nexio-add-to-cart-message:empty {
	display: none;
}

@keyframes nexio-cart-message-in {
	from {
		opacity: 0;
		transform: translateY(3px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.nexio-add-to-cart-message::before {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	align-self: center;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.nexio-add-to-cart-message--success {
	color: #15803d;
}

.nexio-add-to-cart-message--success::before {
	content: "";
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5.5'/%3E%3C/svg%3E");
}

.nexio-add-to-cart-message--error {
	color: #b42318;
}

.nexio-add-to-cart-message--error::before {
	content: "";
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 16.5v.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 16.5v.5'/%3E%3C/svg%3E");
}

.nexio-add-to-cart-message__view-cart {
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
	color: inherit;
}

/* Loading: dim the button and spin a small ring in its text color. */

.single_add_to_cart_button.loading {
	opacity: 0.7;
	cursor: default;
	pointer-events: none;
	position: relative;
}

.single_add_to_cart_button.loading::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 8px;
	vertical-align: -1px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: nexio-cart-spin 0.7s linear infinite;
}

@keyframes nexio-cart-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Phase 13.2 — Archive Products Custom Grid mode. Phase 13.4.1 —
 * WooCommerce Default Loop mode's own ul.products now shares the
 * same --nexio-cols-* variables, so Column Gap/Row Gap and the
 * Columns setting behave identically in both Layout Modes instead
 * of only working in Custom Grid mode.
 */

/* The wrapper must never grow past the Elementor container it sits
 * in, whatever the theme does to ul.products / li.product.
 */
.nexio-archive-products {
	max-width: 100%;
}

.nexio-product-grid,
.nexio-archive-products ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* minmax(0, 1fr) — NOT plain 1fr. A bare `1fr` is minmax(auto,
	 * 1fr), so each track is floored at its content's min-content
	 * width: one full-size product thumbnail (percentage widths are
	 * ignored for intrinsic sizing) or a single long unbroken word is
	 * enough to push every track wider than its share, and the grid
	 * then overflows the container horizontally. minmax(0, 1fr) lets
	 * tracks shrink below content width so N columns always add up to
	 * exactly 100% of the container.
	 */
	grid-template-columns: repeat(var(--nexio-cols-desktop, 4), minmax(0, 1fr));
	width: 100%;
	max-width: 100%;
}

.nexio-product-grid {
	gap: 28px 24px;
}

/* Grid items need the same floor, or their own content re-inflates
 * the track. li.product also gets the theme's/WooCommerce's float +
 * percentage-width loop styles neutralised — those are written for a
 * float layout and fight the grid.
 */
.nexio-product-card,
.nexio-archive-products ul.products li.product {
	min-width: 0;
	max-width: 100%;
	float: none;
	clear: none;
	margin-right: 0;
	margin-left: 0;
}

.nexio-product-card>* {
	min-width: 0;
	max-width: 100%;
}

.nexio-product-card img,
.nexio-archive-products ul.products li.product img {
	max-width: 100%;
}

@media (max-width: 1024px) {

	.nexio-product-grid,
	.nexio-archive-products ul.products {
		grid-template-columns: repeat(var(--nexio-cols-tablet, 2), minmax(0, 1fr));
	}
}

@media (max-width: 600px) {

	.nexio-product-grid,
	.nexio-archive-products ul.products {
		grid-template-columns: repeat(var(--nexio-cols-mobile, 1), minmax(0, 1fr));
	}
}

/* List display mode (both layout modes): a single column, and in
 * Custom Grid mode each card lays its image and content side by
 * side regardless of the chosen Card Layout preset.
 */

.nexio-archive-products--list .nexio-product-card {
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
}

.nexio-archive-products--list .nexio-product-card__image {
	flex: 0 0 200px;
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.nexio-archive-products--list .nexio-product-card {
		flex-direction: column;
	}

	.nexio-archive-products--list .nexio-product-card__image {
		flex-basis: auto;
	}
}

.nexio-product-card {
	display: flex;
	flex-direction: column;
}

.nexio-product-card__image {
	position: relative;
	margin-bottom: 14px;
}

.nexio-product-card__image img {
	display: block;
	width: 100%;
	height: auto;
}

.nexio-product-card__categories {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.65;
	margin-bottom: 6px;
}

.nexio-product-card__title {
	margin: 0 0 6px;
	font-weight: 600;
	line-height: 1.35;
}

.nexio-product-card__rating {
	margin-bottom: 6px;
}

.nexio-product-card__price {
	margin-bottom: 10px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.nexio-product-card__price del {
	font-weight: 400;
	opacity: 0.55;
	margin-right: 6px;
}

/*
 * WooCommerce wraps a sale price in <ins>, which every browser
 * underlines by default. text-decoration does not inherit in a way a
 * parent can cancel — setting `none` on the price wrapper (or via the
 * Typography control) leaves the <ins>'s own underline untouched, so
 * the only way to remove it is to target the element itself.
 *
 * <del> deliberately keeps its line-through: that one is meaningful,
 * it is what marks the price as superseded.
 */
.nexio-product-card__price ins,
.nexio-product-price ins {
	text-decoration: none;
	background: none;
}

.nexio-product-card__excerpt {
	margin-bottom: 12px;
	font-size: 13px;
	line-height: 1.55;
	opacity: 0.8;
}

.nexio-product-card__add-to-cart {
	margin-top: auto;
}

/* Phase 13.2 — Additional Information / Reviews visibility toggles. */

.nexio-hide-heading .woocommerce-product-attributes-heading,
.nexio-hide-heading>h2 {
	display: none;
}

.nexio-hide-review-title .woocommerce-Reviews-title {
	display: none;
}

.nexio-hide-review-list ol.commentlist {
	display: none;
}

/* Phase 13.2 — Add to Cart quantity/message polish. */

.nexio-product-add-to-cart .cart {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nexio-product-add-to-cart-wrap.nexio-layout-stacked .cart {
	flex-direction: column;
	align-items: flex-start;
}

/* Phase 13.3 — Archive Products: element ordering, presets, badge, hover, empty state. */

.nexio-product-card {
	display: flex;
	flex-direction: column;
	position: relative;
	transition-property: transform, background-color, border-color, box-shadow;
	transition-duration: 220ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card layout presets — structure only; user style controls still apply on top. */

.nexio-card-preset--compact {
	gap: 4px;
}

.nexio-card-preset--compact .nexio-product-card__image {
	max-width: 60%;
	margin-left: auto;
	margin-right: auto;
}

.nexio-card-preset--image-top .nexio-product-card__image,
.nexio-card-preset--image_top .nexio-product-card__image {
	margin-bottom: 16px;
}

.nexio-card-preset--content_overlay {
	position: relative;
	justify-content: flex-end;
	min-height: 280px;
}

.nexio-card-preset--content_overlay .nexio-product-card__image {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.nexio-card-preset--content_overlay .nexio-product-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nexio-card-preset--content_overlay .nexio-product-card__title,
.nexio-card-preset--content_overlay .nexio-product-card__price,
.nexio-card-preset--content_overlay .nexio-product-card__categories,
.nexio-card-preset--content_overlay .nexio-product-card__excerpt,
.nexio-card-preset--content_overlay .nexio-product-card__add-to-cart {
	position: relative;
	z-index: 1;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	padding: 6px 12px;
}

.nexio-card-preset--minimal {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.nexio-card-preset--side_by_side {
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
}

.nexio-card-preset--side_by_side .nexio-product-card__image {
	flex: 0 0 40%;
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.nexio-card-preset--side_by_side {
		flex-direction: column;
	}

	.nexio-card-preset--side_by_side .nexio-product-card__image {
		flex: none;
		width: 100%;
	}
}

/* =============================================================
 * Phase 14.1 — Marketplace Poster Card
 *
 * Every declaration here is a DEFAULT that the widget's Style tab
 * overrides: Elementor prints per-widget selectors with higher
 * specificity ( .elementor-element-xxxx .nexio-product-card ), so
 * setting a background/radius/shadow in the panel always wins.
 *
 * The preset changes structure and rhythm only. The card's children
 * stay a flat list so Archive Products' Card Element Order repeater
 * keeps working inside this preset too.
 * ========================================================== */

/* Structure only — deliberately NO background, border, radius,
 * padding, or transition here. Those all exist as CONTROL DEFAULTS on
 * the Featured Products / Shop Catalog widgets instead. Keeping them
 * here too created an un-clearable floor: a user who emptied the
 * padding control (Elementor then prints nothing) got this CSS's
 * hardcoded 12px back and could never reach zero.
 */
.nexio-card-preset--marketplace {
	position: relative;
}

.nexio-card-preset--marketplace .nexio-product-card__image {
	margin-bottom: 14px;
	border-radius: 12px;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.03);
}

/* Push price to the bottom so cards in a row align even when titles
 * wrap to different line counts.
 */
.nexio-card-preset--marketplace .nexio-product-card__price {
	margin-top: auto;
	margin-bottom: 0;
}

.nexio-card-preset--marketplace .nexio-product-card__title {
	margin: 0 0 6px;
}

/* Fixed aspect ratio — the piece that makes a mixed-size catalogue
 * read as a uniform grid. Applied only when a ratio is chosen, so
 * "Original (no crop)" leaves existing grids byte-identical.
 */

.nexio-card--ratio .nexio-product-card__image {
	position: relative;
	aspect-ratio: var(--nexio-card-ratio, 3 / 4);
	overflow: hidden;
}

.nexio-card--ratio .nexio-product-card__image>a {
	display: block;
	width: 100%;
	height: 100%;
}

.nexio-card--ratio .nexio-product-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* aspect-ratio is very widely supported, but a browser without it
 * would otherwise collapse the box to zero height. Padding-top
 * fallback keeps the poster shape there too.
 */
@supports not (aspect-ratio: 1 / 1) {
	.nexio-card--ratio .nexio-product-card__image {
		height: 0;
		padding-top: 133.33%;
	}

	.nexio-card--ratio .nexio-product-card__image>a,
	.nexio-card--ratio .nexio-product-card__image img {
		position: absolute;
		inset: 0;
	}
}

/* Preset interplay: the ratio rules above are written later in this
 * file than the preset blocks, so with equal specificity they were
 * silently overriding Content Overlay's `position: absolute` image —
 * the image dropped back into the normal flow and the preset looked
 * like it did nothing. In that preset the image IS the card backdrop,
 * so a fixed ratio does not apply to it.
 */
.nexio-card-preset--content_overlay.nexio-card--ratio .nexio-product-card__image {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	height: auto;
	padding-top: 0;
}

/* Floating circular action button.
 *
 * Selector strength matters here: the anchor carries WooCommerce's
 * own `button add_to_cart_button` classes so its AJAX script works,
 * which also means WooCommerce's/the theme's generic `a.button` rules
 * (specificity 0,2,1 — display:block, padding, line-height) apply.
 * These rules are written at li.nexio-product-card a.… (0,2,2) so the
 * button's own geometry always beats the loop-button skin.
 */

li.nexio-product-card a.nexio-product-card__fab,
.nexio-product-card .nexio-product-card__fab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	box-sizing: border-box;
	text-decoration: none;
	line-height: 1;
	min-width: 0;
	min-height: 0;
	cursor: pointer;
	transition: transform 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

li.nexio-product-card a.nexio-product-card__fab--circle,
.nexio-product-card .nexio-product-card__fab--circle {
	position: absolute;
	right: var(--nexio-fab-x, 12px);
	bottom: var(--nexio-fab-y, 12px);
	top: auto;
	left: auto;
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background-color: #111;
	color: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* Corner anchoring — the Button Corner control puts a
 * nexio-fab-corner-* prefix class on the widget wrapper. Written at
 * wrapper + li + a strength (0,3,2) so they outrank the base
 * bottom-right anchoring above.
 */

.nexio-fab-corner-bottom-left li.nexio-product-card a.nexio-product-card__fab--circle {
	left: var(--nexio-fab-x, 12px);
	right: auto;
}

.nexio-fab-corner-top-right li.nexio-product-card a.nexio-product-card__fab--circle {
	top: var(--nexio-fab-y, 12px);
	bottom: auto;
}

.nexio-fab-corner-top-left li.nexio-product-card a.nexio-product-card__fab--circle {
	top: var(--nexio-fab-y, 12px);
	left: var(--nexio-fab-x, 12px);
	right: auto;
	bottom: auto;
}

.nexio-product-card__fab--circle .nexio-product-card__fab-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

/* Card-level placement: the card itself becomes the positioning
 * context, and gains bottom padding so the button never sits on top
 * of the price.
 */
.nexio-card--fab-card {
	position: relative;
	padding-bottom: 68px;
}

li.nexio-product-card a.nexio-product-card__fab--standard,
.nexio-product-card .nexio-product-card__fab--standard {
	position: static;
	margin-top: 12px;
	padding: 10px 18px;
	border-radius: 8px;
	background-color: #111;
	color: #fff;
}

li.nexio-product-card a.nexio-product-card__fab:hover,
li.nexio-product-card a.nexio-product-card__fab:focus-visible,
.nexio-product-card__fab:hover,
.nexio-product-card__fab:focus-visible {
	color: #fff;
	text-decoration: none;
}

/* WooCommerce's own added/loading classes land on this anchor because
 * it carries .add_to_cart_button — keep them from restyling it.
 */
.nexio-product-card__fab.added::after,
.nexio-product-card__fab.loading::after {
	display: none;
}

/* WooCommerce core styles its loading buttons with
 * `.woocommerce a.button.loading { padding-right: 2.618em }` to make
 * room for its own spinner glyph. On a fixed-size round button that
 * padding is added to the width, turning the 50px circle into a 67px
 * ellipse. !important is warranted here: the rule belongs to another
 * plugin, and Elementor's per-widget width/height is emitted after
 * this file, so specificity alone cannot win. */
.nexio-product-card__fab.loading {
	opacity: 1;
	pointer-events: none;
	padding: 0 !important;
	position: relative;
}

/* Its own spinner, since WooCommerce's glyph is suppressed above. */
.nexio-product-card__fab.loading > * {
	visibility: hidden;
}

.nexio-product-card__fab.loading::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: nexio-card-fab-spin 0.6s linear infinite;
	visibility: visible;
}

@keyframes nexio-card-fab-spin {
	to { transform: rotate(360deg); }
}

@media ( prefers-reduced-motion: reduce ) {
	.nexio-product-card__fab.loading::before {
		animation: none;
	}
}

/* WooCommerce injects a "View cart" link after a successful AJAX add.
 * Inside a card it lands over the image and pushes the grid around,
 * and the cart drawer already opens on every add — so this is a second
 * confirmation nobody asked for. Removed rather than repositioned.
 */
.nexio-product-card .added_to_cart,
.nexio-card--fab-card .added_to_cart {
	display: none !important;
}

/* Sale badge. */

.nexio-product-card__badge {
	position: absolute;
	z-index: 2;
	font-size: 11px;
	line-height: 1;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: #b42318;
	color: #fff;
	padding: 5px 10px;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.2);
}

.nexio-product-card__badge--top-left {
	top: 10px;
	left: 10px;
}

.nexio-product-card__badge--top-right {
	top: 10px;
	right: 10px;
}

/* Hover polish — gentle zoom in the image frame; anything the user
   configures via widget hover controls layers on top of this.

   isolation: isolate gives the rounded frame its own stacking
   context, and backface-visibility promotes the img onto the
   compositor — together they stop the classic corner flicker where a
   border-radius + overflow:hidden clip is re-rasterised every frame
   while the child transform animates. */

.nexio-product-card__image {
	overflow: hidden;
	isolation: isolate;
}

.nexio-product-card__image img {
	transition-property: transform, opacity, filter;
	transition-duration: 350ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.nexio-product-card:hover .nexio-product-card__image img,
.nexio-product-card:focus-within .nexio-product-card__image img {
	transform: scale(1.04);
}

/* Card button full width on mobile. */

@media (max-width: 600px) {
	.nexio-card-btn-full-mobile .nexio-product-card__add-to-cart .button {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* Responsive visibility utility (image). */

.nexio-hide-mobile {
	/* Hidden below 600px only — see media query. */
}

.nexio-hide-tablet {
	/* Hidden between 601px and 1024px only — see media query. */
}

@media (max-width: 600px) {
	.nexio-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 601px) and (max-width: 1024px) {
	.nexio-hide-tablet {
		display: none !important;
	}
}

/* Empty state. */

.nexio-archive-products__empty {
	list-style: none;
	grid-column: 1 / -1;
	padding: 48px 24px;
	text-align: center;
	border: 1px dashed rgba(0, 0, 0, 0.18);
	border-radius: 12px;
	opacity: 0.75;
}

/* Reduced motion: keep every state change, remove the choreography. */

@media (prefers-reduced-motion: reduce) {

	.nexio-product-card,
	.nexio-product-card__image img,
	.nexio-add-to-cart-message {
		transition: none !important;
		animation: none !important;
	}

	.nexio-product-card:hover .nexio-product-card__image img,
	.nexio-product-card:focus-within .nexio-product-card__image img {
		transform: none;
	}

	.single_add_to_cart_button.loading::after {
		animation-duration: 1.5s;
	}
}

/* Phase 13.4 — archive filter, sorting, and utility widgets.
 * Structural defaults only, same philosophy as the rest of this
 * file: layout and rhythm here, colors/decoration stay with
 * Elementor's own style controls.
 */

/* Result Count */

.nexio-archive-result-count {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
}

.nexio-archive-result-count .woocommerce-result-count {
	margin: 0;
}

/* Sorting */

.nexio-archive-sorting {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.nexio-archive-sorting .woocommerce-ordering {
	margin: 0;
}

.nexio-archive-sorting select.orderby {
	max-width: 100%;
}

/* Product Search Filter */

.nexio-product-search-filter__form {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
}

/* Wraps input + leading icon so the icon positions against the field
   rather than the whole form (which also holds the submit button). */
.nexio-product-search-filter__field {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
}

.nexio-product-search-filter__input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

.nexio-product-search-filter__button {
	flex: 0 0 auto;
	cursor: pointer;
}

/* ---------- Icon ---------- */

.nexio-product-search-filter__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Never let the icon be squeezed by a flex parent — without this it
	   shrinks to nothing, taking the SVG's percentage sizing with it. */
	flex: 0 0 auto;
	font-size: 20px;
	line-height: 0;
	color: inherit;
}

/*
 * `max-width: none` is load-bearing. Themes (this one included) ship
 * `img, picture, video, canvas, svg { max-width: 100% }`, and 100% of a
 * shrink-to-fit flex item whose width is derived from this very SVG
 * resolves to zero — the icon disappears entirely.
 */
.nexio-product-search-filter__icon svg {
	width: 1em;
	height: 1em;
	max-width: none;
	flex: 0 0 auto;
	display: block;
}

/* Leading icon: overlaid on the field, so the input keeps its own
   padding and border rather than being split into two boxes. */
.nexio-product-search-filter__icon--field {
	position: absolute;
	left: 12px;
	pointer-events: none;
	z-index: 1;
}

/* Class applied by PHP rather than :has(), so the padding is correct in
   every browser regardless of :has() support. */
.nexio-product-search-filter__field--has-icon .nexio-product-search-filter__input {
	padding-left: 2.6em;
}

.nexio-product-search-filter__button--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Trigger (popup + expand layouts) ---------- */

.nexio-product-search-filter--popup,
.nexio-product-search-filter--expand {
	display: inline-flex;
	align-items: center;
	position: relative;
}

/*
 * Doubled class (0,2,0) on purpose: the Elementor kit styles bare
 * `button` elements at (0,1,1) — `.elementor-kit-N button` — which
 * otherwise wins and hands the trigger the kit's button padding, font
 * size and text color. That made the trigger 66px wide with a
 * near-white icon on a white page. `color: inherit` pulls the icon
 * colour from the surrounding header instead of the button default.
 */
.nexio-product-search-filter .nexio-product-search-filter__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 50%;
	cursor: pointer;
	color: inherit;
	font-size: inherit;
	line-height: 0;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ---------- Expand layout ---------- */

.nexio-product-search-filter--expand .nexio-product-search-filter__expand {
	display: flex;
	overflow: hidden;
}

.nexio-product-search-filter--expand .nexio-product-search-filter__form {
	width: 0;
	opacity: 0;
	flex-wrap: nowrap;
	transition: width 0.28s ease, opacity 0.2s ease;
	/* Never intercept clicks while collapsed — a 0-width box can still
	   swallow a click on whatever sits beside it. */
	pointer-events: none;
}

.nexio-product-search-filter--expand.is-open .nexio-product-search-filter__form {
	width: 260px;
	opacity: 1;
	pointer-events: auto;
}

/* Expanding leftwards keeps the field on screen for an icon that sits
   at the right-hand end of a header. */
.nexio-search-expand-left .nexio-product-search-filter--expand {
	flex-direction: row-reverse;
}

@media (prefers-reduced-motion: reduce) {
	.nexio-product-search-filter--expand .nexio-product-search-filter__form {
		transition: none;
	}
}

/* ---------- Popup layout ---------- */

.nexio-product-search-filter__popup {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 18vh 20px 20px;
}

.nexio-product-search-filter__popup[hidden] {
	display: none;
}

.nexio-product-search-filter__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(15, 23, 42, 0.6);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.nexio-product-search-filter__panel {
	position: relative;
	width: 100%;
	max-width: 640px;
	padding: 28px;
	background-color: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.35);
}

.nexio-product-search-filter__heading {
	margin: 0 0 14px;
	font-size: 20px;
	font-weight: 600;
}

/* Same kit-button specificity fix as the trigger above. */
.nexio-product-search-filter .nexio-product-search-filter__close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: inherit;
	font-size: inherit;
	line-height: 0;
}

.nexio-product-search-filter .nexio-product-search-filter__close svg {
	width: 18px;
	height: 18px;
	max-width: none;
	display: block;
}

.nexio-product-search-filter .nexio-product-search-filter__close:hover {
	background-color: rgba(0, 0, 0, 0.06);
}

/* Page behind an open popup must not scroll. */
html.nexio-search-scroll-locked,
html.nexio-search-scroll-locked body {
	overflow: hidden;
}

/* The popup stays closed in the editor too — clicking the trigger opens
   it there, which is how you preview and style it. Forcing it open
   would cover the canvas on every render. */

/* Product Categories Filter */

.nexio-product-categories-filter__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nexio-product-categories-filter__item {
	margin: 0;
}

.nexio-product-categories-filter--list .nexio-product-categories-filter__list {
	flex-direction: column;
	align-items: flex-start;
}

.nexio-product-categories-filter--buttons a {
	display: inline-block;
	text-decoration: none;
	padding: 6px 14px;
	border: 1px solid transparent;
}

.nexio-product-categories-filter--list a {
	text-decoration: none;
}

.nexio-product-categories-filter__count {
	opacity: 0.7;
	font-size: 0.9em;
}

.nexio-product-categories-filter--dropdown select {
	max-width: 100%;
}

/* Active Filters
 *
 * Ships with a real chip design rather than bare inline text. Without
 * an explicit font-size the row inherits whatever the theme applies
 * to the surrounding archive header — which is often a heading scale,
 * so a short string like "No filters applied" rendered at ~28px. Every
 * value here is a plain default the widget's Style tab overrides.
 */

.nexio-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 1.4;
}

.nexio-active-filters__label {
	font-weight: 600;
	margin-right: 2px;
}

.nexio-active-filters__tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 5px 6px 5px 12px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 999px;
	background-color: rgba(0, 0, 0, 0.04);
	line-height: 1.4;
}

/* Only the text truncates — the × keeps its full hit area on a long
 * category name or search term.
 */
.nexio-active-filters__tag-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nexio-active-filters__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	color: inherit;
	opacity: 0.55;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.nexio-active-filters__remove:hover,
.nexio-active-filters__remove:focus {
	color: inherit;
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.12);
}

.nexio-active-filters__clear {
	text-decoration: none;
	font-weight: 600;
	line-height: 1.3;
	opacity: 0.75;
	border-bottom: 1px solid currentColor;
	transition: opacity 0.15s ease;
}

.nexio-active-filters__clear:hover,
.nexio-active-filters__clear:focus {
	opacity: 1;
}

.nexio-active-filters__empty {
	font-size: 14px;
	opacity: 0.7;
}

/* Archive Pagination */

.nexio-archive-pagination {
	display: flex;
}

.nexio-archive-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 6px;
}

.nexio-archive-pagination .page-numbers li {
	margin: 0;
}

.nexio-archive-pagination .page-numbers a,
.nexio-archive-pagination .page-numbers span {
	display: inline-block;
	text-decoration: none;
}

/* Product Filters
 *
 * WooCommerce's own price-slider chrome (track/handle/range geometry)
 * only exists scoped under `.widget_price_filter` — the CSS class its
 * own WP_Widget wrapper applies — which this widget never prints, so
 * none of it reaches here. Every rule below (not just colors) has to
 * be provided from scratch; jQuery UI's slider script supplies drag
 * BEHAVIOR only, never any visual chrome of its own.
 */

.nexio-product-filters {
	font-size: 14px;
	line-height: 1.5;
}

.nexio-product-filters__form {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.nexio-product-filters__heading {
	margin: 0 0 12px;
	font-size: 1em;
	font-weight: 600;
}

/* Price slider */

.nexio-product-filters .price_slider_wrapper {
	padding-top: 6px;
}

.nexio-product-filters .price_slider {
	position: relative;
	height: 6px;
	margin: 0 7px 22px;
	border-radius: 999px;
	background-color: rgba(0, 0, 0, 0.1);
}

.nexio-product-filters .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	transform: translateY(-50%);
	border: 2px solid #fff;
	border-radius: 50%;
	background-color: #333;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	cursor: ew-resize;
	outline: none;
	z-index: 2;
}

.nexio-product-filters .ui-slider-range {
	position: absolute;
	top: 0;
	height: 100%;
	border-radius: 999px;
	background-color: #333;
	z-index: 1;
}

.nexio-product-filters .price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* No CSS hides #min_price/#max_price — wc-price-slider.js does that
 * itself once it initializes (see init_price_filter() in WooCommerce's
 * own price-slider.js), the same way WooCommerce's own Price Filter
 * widget works. If that script ever fails to load, these plain number
 * inputs stay visible as a working fallback instead of the widget
 * going blank.
 */

.nexio-product-filters .price_label {
	font-size: 0.95em;
}

/* Rating */

.nexio-product-filters__rating-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nexio-product-filters__rating-item a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

/* The star icons themselves (.star-rating, built by WooCommerce's own
 * wc_get_star_rating_html()) are intentionally left unstyled here.
 * has_filterable_context() only ever lets this group render on a real
 * shop/category/tag archive or the Elementor editor previewing one —
 * every such page already carries WooCommerce's own "woocommerce"
 * body class, whose .star-rating CSS (icon font + hidden a11y text)
 * already applies globally. Duplicating that geometry here would risk
 * a specificity tie against WooCommerce's own rule, decided only by
 * stylesheet load order — this widget's Style tab color controls
 * still win reliably, since Elementor's {{WRAPPER}} prefix always
 * out-specifies WooCommerce's bare .woocommerce .star-rating rule.
 */

/* Category / Tag option lists */

.nexio-product-filters__option-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nexio-product-filters__option label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.nexio-product-filters__option-input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
}

.nexio-product-filters__option-text {
	flex: 1 1 auto;
}

.nexio-product-filters__option-count {
	opacity: 0.6;
	font-size: 0.9em;
}

/* Actions */

.nexio-product-filters__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.nexio-product-filters__apply {
	cursor: pointer;
	border: 0;
}

.nexio-product-filters__clear {
	text-decoration: underline;
	text-underline-offset: 2px;
	opacity: 0.75;
}

.nexio-product-filters__clear:hover {
	opacity: 1;
}

.nexio-archive-pagination__prev-next {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* =============================================================
 * Phase 14.2 — Shop Catalog
 *
 * Defaults only; the widget's Style tab prints higher-specificity
 * per-element selectors that win over everything here.
 * ========================================================== */

.nexio-shop-catalog {
	position: relative;
}

/* Filter tabs */

.nexio-shop-catalog__tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 32px;
}

.nexio-shop-catalog__tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 999px;
	background-color: transparent;
	color: inherit;
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.nexio-shop-catalog__tab:hover,
.nexio-shop-catalog__tab:focus-visible {
	border-color: rgba(0, 0, 0, 0.35);
	text-decoration: none;
}

.nexio-shop-catalog__tab.is-active {
	background-color: #111;
	border-color: #111;
	color: #fff;
}

.nexio-shop-catalog__tab-count {
	opacity: 0.65;
	font-size: 0.9em;
}

.nexio-shop-catalog__reset {
	margin-left: auto;
	padding: 9px 14px;
	border: 1px solid transparent;
	border-radius: 999px;
	color: inherit;
	font-size: 14px;
	line-height: 1.3;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.nexio-shop-catalog__reset.is-hidden {
	display: none;
}

/* Sections */

.nexio-shop-catalog__section-title {
	margin: 0 0 20px;
	font-size: 22px;
	line-height: 1.25;
}

.nexio-shop-catalog__featured {
	margin-bottom: 56px;
}

/* Pagination */

.nexio-shop-catalog__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 36px;
}

.nexio-shop-catalog__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	color: inherit;
	font-size: 14px;
	text-decoration: none;
}

.nexio-shop-catalog__page.is-active {
	background-color: #111;
	border-color: #111;
	color: #fff;
}

.nexio-shop-catalog__more {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

.nexio-shop-catalog__more-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 999px;
	color: inherit;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

.nexio-shop-catalog__more-button:hover,
.nexio-shop-catalog__more-button:focus-visible {
	background-color: #111;
	border-color: #111;
	color: #fff;
	text-decoration: none;
}

.nexio-shop-catalog__more-button.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Empty state */

.nexio-shop-catalog__empty {
	margin: 0;
	padding: 48px 16px;
	text-align: center;
	opacity: 0.75;
}

/* Loading state. The body dims rather than emptying, so the page
 * never collapses to zero height mid-filter and the layout does not
 * jump. The spinner is CSS-only — no image, no library.
 */

.nexio-shop-catalog__loader {
	display: none;
}

.nexio-shop-catalog.is-loading .nexio-shop-catalog__body {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 160ms ease;
}

.nexio-shop-catalog.is-loading .nexio-shop-catalog__loader {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 120px;
	pointer-events: none;
}

.nexio-shop-catalog__spinner {
	width: 34px;
	height: 34px;
	border: 3px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: 0.6;
	animation: nexio-catalog-spin 0.7s linear infinite;
}

@keyframes nexio-catalog-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nexio-shop-catalog__spinner {
		animation-duration: 2s;
	}
}

/* Serial number badge on the poster */

.nexio-product-card__serial {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.92);
	color: #111;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* A card with both a sale badge and a serial would stack them in the
 * same corner, so the serial steps aside.
 */
.nexio-product-card__badge--top-left~.nexio-product-card__serial {
	left: auto;
	right: 10px;
}

.nexio-product-card__serial--inline {
	position: static;
	margin-bottom: 8px;
}

/* Already-in-cart affordance */

.nexio-product-card--in-cart .nexio-product-card__fab--circle {
	background-color: #1c7c3f;
}

.nexio-editor-note {
	margin: 0 0 16px;
	padding: 10px 14px;
	border: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	font-size: 13px;
	opacity: 0.75;
}

/* =============================================================
 * Phase 14.3 — Product Tabs (rebuilt)
 *
 * Modern defaults: pill-free underline tabs, clean panel. Every
 * declaration is overridable from the widget's Style tab.
 * ========================================================== */

.nexio-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.nexio-tabs__tab {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	margin: 0 0 -1px;
	padding: 10px 16px;
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	color: inherit;
	opacity: 0.65;
	cursor: pointer;
	transition: color 160ms ease, opacity 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.nexio-tabs__tab:hover,
.nexio-tabs__tab:focus-visible {
	opacity: 1;
}

.nexio-tabs__tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.nexio-tabs__tab.is-active {
	opacity: 1;
	border-bottom-color: currentColor;
}

.nexio-tabs__panel[hidden] {
	display: none;
}

.nexio-tabs__panel {
	line-height: 1.7;
}

/* Alignment (prefix classes from the Tab Alignment control). */

.nexio-tabs-align-center .nexio-tabs__nav {
	justify-content: center;
}

.nexio-tabs-align-right .nexio-tabs__nav {
	justify-content: flex-end;
}

.nexio-tabs-align-stretch .nexio-tabs__tab {
	flex: 1 1 0;
	text-align: center;
}

/* Vertical layout. */

.nexio-tabs-layout-vertical .nexio-tabs {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.nexio-tabs-layout-vertical .nexio-tabs__nav {
	flex: 0 0 220px;
	max-width: 220px;
	flex-direction: column;
	align-items: stretch;
	border-bottom: none;
	border-right: 1px solid rgba(0, 0, 0, 0.1);
	margin: 0;
	padding-right: 0;
}

.nexio-tabs-layout-vertical .nexio-tabs__tab {
	text-align: left;
	border-bottom: none;
	border-right: 2px solid transparent;
	margin: 0 -1px 0 0;
}

.nexio-tabs-layout-vertical .nexio-tabs__tab.is-active {
	border-right-color: currentColor;
}

.nexio-tabs-layout-vertical .nexio-tabs__panels {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 767px) {
	.nexio-tabs-layout-vertical .nexio-tabs {
		flex-direction: column;
		gap: 20px;
	}

	.nexio-tabs-layout-vertical .nexio-tabs__nav {
		flex: none;
		max-width: 100%;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		border-right: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	.nexio-tabs-layout-vertical .nexio-tabs__tab {
		border-right: none;
		border-bottom: 2px solid transparent;
	}

	.nexio-tabs-layout-vertical .nexio-tabs__tab.is-active {
		border-bottom-color: currentColor;
	}
}

/* WooCommerce repeats the tab name as an in-panel heading; hidden by
 * default via the Hide Panel Headings control's prefix class.
 */
.nexio-tabs-no-heading-yes .nexio-tabs__panel>h2:first-child,
.nexio-tabs-no-heading-yes .nexio-tabs__panel .woocommerce-Reviews-title {
	display: none;
}

/* WooCommerce review-form pieces inherit sane spacing inside the
 * panel rather than theme defaults.
 */
.nexio-tabs__panel .comment-form,
.nexio-tabs__panel .commentlist {
	margin-top: 12px;
}

/* Phase 14.4 — windowed pagination ellipsis. */

.nexio-shop-catalog__page-gap {
	display: inline-flex;
	align-items: center;
	min-width: 24px;
	justify-content: center;
	opacity: 0.5;
}
/* Phase 14.6 — discount % pill on the Product Price widget. Dark pill
 * defaults matching the marketplace look; every value overridable
 * from the widget's Discount Badge style section. */

.nexio-product-price__discount {
	display: inline-flex;
	align-items: center;
	margin-left: var(--nexio-badge-ml, 8px);
	padding: 4px 10px;
	border-radius: 999px;
	background-color: #111;
	color: #fff;
	font-size: 0.55em;
	font-weight: 600;
	line-height: 1.3;
	vertical-align: middle;
	white-space: nowrap;
}

/* Phase 15.2 — configurable piece order + gaps on the Product Price
 * widget. All variables are set by widget controls; with none set,
 * every rule below is a no-op (order 0, zero margins, and gap is
 * ignored while the wrapper is still display:block). */

.nexio-product-price {
	gap: var(--nexio-price-flex-gap, 0.35em);
}

.nexio-product-price del + ins {
	margin-left: var(--nexio-price-margin, var(--nexio-price-gap, 0));
}

.nexio-product-price del {
	order: var(--nexio-po-del, 0);
}

.nexio-product-price ins {
	order: var(--nexio-po-ins, 0);
}

.nexio-product-price .nexio-product-price__discount {
	order: var(--nexio-po-badge, 0);
}

/* =============================================================
 * Phase 15 — Single Product Digital Experience widgets.
 * Defaults only; each widget's Style tab overrides.
 * ========================================================== */

/* Trust Stats */

.nexio-trust-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 1.4;
}

.nexio-trust-stats__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.nexio-trust-stats__stars {
	letter-spacing: 1px;
	color: #f59e0b;
}

.nexio-trust-stats__rating-number {
	font-weight: 700;
}

.nexio-trust-stats__sep {
	opacity: 0.45;
}

.nexio-trust-stats__reviews,
.nexio-trust-stats__downloads {
	opacity: 0.8;
}

/* Included Files */

.nexio-included-files {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nexio-included-files__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	background-color: #fff;
}

.nexio-included-files__type-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background-color: rgba(0, 0, 0, 0.06);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.nexio-included-files__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}

.nexio-included-files__name {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nexio-included-files__meta {
	font-size: 12px;
	opacity: 0.65;
}

.nexio-included-files__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	color: inherit;
	transition: background-color 150ms ease, color 150ms ease;
}

.nexio-included-files__action svg {
	width: 18px;
	height: 18px;
}

a.nexio-included-files__action:hover,
a.nexio-included-files__action:focus-visible {
	background-color: rgba(0, 0, 0, 0.06);
}

.nexio-included-files__action--locked {
	opacity: 0.4;
}

/* Reviews Advanced */

.nexio-reviews__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}

.nexio-reviews__summary-stars {
	letter-spacing: 1px;
	color: #f59e0b;
	font-size: 18px;
}

.nexio-reviews__summary-number {
	font-size: 20px;
	font-weight: 700;
}

.nexio-reviews__summary-count {
	opacity: 0.7;
}

.nexio-reviews__list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.nexio-reviews__item {
	padding: 16px 18px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	background-color: #fff;
}

.nexio-reviews__item-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.nexio-reviews__avatar img {
	border-radius: 50%;
	display: block;
}

.nexio-reviews__item-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.nexio-reviews__author {
	font-weight: 600;
	line-height: 1.3;
}

.nexio-reviews__verified {
	font-size: 12px;
	color: #15803d;
}

.nexio-reviews__date {
	font-size: 12px;
	opacity: 0.6;
}

.nexio-reviews__item-stars {
	color: #f59e0b;
	letter-spacing: 1px;
}

.nexio-reviews__text {
	line-height: 1.65;
}

.nexio-reviews__text p:last-child {
	margin-bottom: 0;
}

.nexio-reviews__pagination {
	display: flex;
	gap: 6px;
	margin-bottom: 24px;
}

.nexio-reviews__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	font-size: 13px;
	color: inherit;
	text-decoration: none;
}

.nexio-reviews__page.is-active {
	background-color: #111;
	border-color: #111;
	color: #fff;
}

.nexio-reviews__form-wrap {
	margin-top: 8px;
}

.nexio-reviews__form-title {
	margin: 0 0 12px;
	font-size: 18px;
}

.nexio-reviews__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.nexio-reviews__star-input {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: #f59e0b;
}

/* Written at (0,2,1) because Elementor kit / theme global `button`
 * skins (0,1,1) otherwise repaint these as full-size buttons — near
 * white text (invisible stars), 18px font, 12/30px padding. */
.nexio-reviews__star-input button.nexio-reviews__star {
	appearance: none;
	background: transparent;
	background-image: none;
	border: none;
	box-shadow: none;
	outline-offset: 2px;
	padding: 2px;
	margin: 0;
	min-height: 0;
	min-width: 0;
	width: auto;
	border-radius: 4px;
	font-family: inherit;
	font-size: 26px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	transition: transform 120ms ease, color 120ms ease;
}

.nexio-reviews__star-input button.nexio-reviews__star:hover {
	background: transparent;
	color: inherit;
	transform: scale(1.15);
}

.nexio-reviews__textarea {
	width: 100%;
	max-width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 10px;
	font: inherit;
	line-height: 1.6;
	resize: vertical;
}

/* (0,2,1) for the same kit-skin reason as the stars above. */
.nexio-reviews__form button.nexio-reviews__submit {
	appearance: none;
	border: none;
	cursor: pointer;
	padding: 12px 26px;
	border-radius: 10px;
	background-color: #111;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	transition: opacity 150ms ease;
}

.nexio-reviews__form button.nexio-reviews__submit:hover {
	opacity: 0.85;
}

.nexio-reviews__notice {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
	background-color: rgba(0, 0, 0, 0.05);
}

.nexio-reviews__notice--success {
	background-color: #ecfdf5;
	color: #047857;
}

.nexio-reviews__notice--error {
	background-color: #fef2f2;
	color: #b91c1c;
}

.nexio-reviews__empty {
	opacity: 0.7;
	margin: 0 0 20px;
}

/* =============================================================
 * Nexio Breadcrumb.
 * Defaults only; the widget's Style tab overrides everything.
 * ========================================================== */

.nexio-breadcrumb {
	font-size: 14px;
	line-height: 1.5;
}

.nexio-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nexio-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.nexio-breadcrumb__item a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.nexio-breadcrumb__item a:hover {
	opacity: 0.7;
}

.nexio-breadcrumb__item--current {
	opacity: 0.6;
}

.nexio-breadcrumb__sep {
	display: inline-flex;
	align-items: center;
	margin: 0;
	opacity: 0.45;
	user-select: none;
}

/* Product Description content images — never overflow the column,
 * whatever size was uploaded. The widget's Images style section
 * overrides everything else. */
.nexio-product-description img {
	max-width: 100%;
	height: auto;
}

/* Reviews — Load More button. (0,2,1) so kit/theme button skins
 * can't repaint it; the widget's Load More Button section overrides. */
.nexio-reviews button.nexio-reviews__load-more {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	padding: 10px 22px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.nexio-reviews button.nexio-reviews__load-more:hover {
	background: rgba(0, 0, 0, 0.05);
}

.nexio-reviews__load-more-count {
	opacity: 0.55;
	font-weight: 400;
}

/* ====================================================================
   Comparison Table
   ==================================================================== */

/* The scroll wrapper owns the radius/border/shadow and lets the table
   scroll sideways on narrow screens instead of crushing the columns. */
.nexio-ctable__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px -16px rgba(15, 23, 42, 0.18);
}

.nexio-ctable {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
}

.nexio-ctable thead th {
	background-color: #1F2429;
	color: #fff;
	font-weight: 600;
	text-align: left;
	padding: 18px 24px;
	white-space: nowrap;
}

.nexio-ctable td,
.nexio-ctable th[scope="row"] {
	padding: 17px 24px;
	text-align: left;
	vertical-align: middle;
	border-top: 1px solid var(--nexio-ctable-divider, rgba(0, 0, 0, 0.07));
}

/* First body row sits against the header — no doubled line. */
.nexio-ctable tbody tr:first-child td,
.nexio-ctable tbody tr:first-child th[scope="row"] {
	border-top: 0;
}

.nexio-ctable th[scope="row"] {
	font-weight: 500;
	color: #1F2429;
}

.nexio-ctable tbody tr:nth-child(odd) {
	background-color: #F7F8F9;
}

/* Optional vertical separators between columns. */
.nexio-ctable-coldiv-yes .nexio-ctable td,
.nexio-ctable-coldiv-yes .nexio-ctable thead th:not(:first-child) {
	border-left: 1px solid var(--nexio-ctable-divider, rgba(0, 0, 0, 0.07));
}

/* Highlighted (recommended) column tint. Sits under text, above the
   row stripes — hence a background on the cells, not the column. */
.nexio-ctable .nexio-ctable__col--highlight {
	background-color: var(--nexio-ctable-highlight, rgba(79, 70, 229, 0.05));
	background-clip: padding-box;
}

.nexio-ctable__cell {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.nexio-ctable__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
}

/* max-width:none defeats the theme's `img, …, svg { max-width: 100% }`
   inside a shrink-to-fit flex item (same fix as every other inline
   SVG in this plugin). */
.nexio-ctable__icon svg {
	width: 13px;
	height: 13px;
	max-width: none;
	flex: 0 0 auto;
	display: block;
}

/* Font-icon glyphs (Custom Icon) match the SVG default size. */
.nexio-ctable__icon i {
	font-size: 13px;
	line-height: 1;
}

.nexio-ctable__icon--check {
	color: #1F2429;
}

.nexio-ctable__icon--cross {
	color: #8A9098;
}


/* --------------------------------------------------------------------
 * Nexio Button
 *
 * The hover background lives on a ::before overlay rather than on the
 * anchor itself. Every effect below is just a different way of
 * revealing that one overlay, so the Hover background control means
 * the same thing whichever effect is picked. The label and icon sit in
 * .nexio-btn__content, which is raised above the overlay so it is
 * never covered.
 * ------------------------------------------------------------------ */

.nexio-btn-wrap {
	display: flex;
	flex-direction: column;
}

.nexio-btn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background-color: #4A3AFF;
	color: #fff;
	border: 0 solid transparent;
	border-radius: 8px;
	transition-property: color, background-color, border-color, box-shadow, transform;
	transition-duration: 0.3s;
	transition-timing-function: ease;
	/* Never let the wrapper's stretch alignment blow the button to full
	   width unless Full Width was actually asked for. */
	align-self: inherit;
}

.nexio-btn:hover,
.nexio-btn:focus-visible {
	text-decoration: none;
}

/* The animated hover layer. Inert until an effect moves or fades it. */
.nexio-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	transition-property: opacity, transform;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}

.nexio-btn__content {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	line-height: inherit;
}

.nexio-btn__text {
	display: inline-block;
}

.nexio-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	color: inherit;
}

/* The theme's `img, svg { max-width: 100% }` collapses an inline SVG
   inside a shrink-to-fit flex item, so both are overridden here. */
.nexio-btn__icon svg {
	width: 16px;
	height: 16px;
	max-width: none;
	flex: 0 0 auto;
	display: block;
}

.nexio-btn__icon i {
	font-size: 16px;
	line-height: 1;
}

/* ---- Size presets: a starting point the Style tab can override. ---- */
.nexio-btn--size-xs { padding: 7px 14px;  font-size: 12px; }
.nexio-btn--size-sm { padding: 9px 18px;  font-size: 13px; }
.nexio-btn--size-md { padding: 12px 24px; font-size: 15px; }
.nexio-btn--size-lg { padding: 16px 32px; font-size: 17px; }
.nexio-btn--size-xl { padding: 20px 42px; font-size: 19px; }

/* ---- Effects ---- */

/* None: the overlay snaps on with no transition at all. */
.nexio-btn--fx-none::before { transition-duration: 0s; }
.nexio-btn--fx-none:hover::before,
.nexio-btn--fx-none:focus-visible::before { opacity: 1; }

.nexio-btn--fx-fade:hover::before,
.nexio-btn--fx-fade:focus-visible::before { opacity: 1; }

/* Sweeps: the overlay is fully opaque and parked off one edge, then
   slides across. scaleX/scaleY with a transform-origin keeps it on the
   compositor rather than animating layout. */
.nexio-btn--fx-sweep-left::before,
.nexio-btn--fx-sweep-right::before,
.nexio-btn--fx-sweep-up::before,
.nexio-btn--fx-sweep-down::before {
	opacity: 1;
}

.nexio-btn--fx-sweep-left::before  { transform: scaleX(0); transform-origin: left center; }
.nexio-btn--fx-sweep-right::before { transform: scaleX(0); transform-origin: right center; }
.nexio-btn--fx-sweep-up::before    { transform: scaleY(0); transform-origin: center bottom; }
.nexio-btn--fx-sweep-down::before  { transform: scaleY(0); transform-origin: center top; }

.nexio-btn--fx-sweep-left:hover::before,
.nexio-btn--fx-sweep-left:focus-visible::before,
.nexio-btn--fx-sweep-right:hover::before,
.nexio-btn--fx-sweep-right:focus-visible::before { transform: scaleX(1); }

.nexio-btn--fx-sweep-up:hover::before,
.nexio-btn--fx-sweep-up:focus-visible::before,
.nexio-btn--fx-sweep-down:hover::before,
.nexio-btn--fx-sweep-down:focus-visible::before { transform: scaleY(1); }

/* Shine: the hover background is revealed and a gloss band crosses it.
   The band is the ::after layer so it can travel independently. */
.nexio-btn--fx-shine:hover::before,
.nexio-btn--fx-shine:focus-visible::before { opacity: 1; }

.nexio-btn--fx-shine::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -80%;
	width: 45%;
	z-index: 1;
	pointer-events: none;
	transform: skewX(-20deg);
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.38) 50%,
		rgba(255, 255, 255, 0) 100%
	);
}

.nexio-btn--fx-shine:hover::after,
.nexio-btn--fx-shine:focus-visible::after {
	left: 130%;
	transition: left 0.7s ease;
}

/* Transform effects still reveal the hover background, so the control
   behaves the same way across every option. */
.nexio-btn--fx-grow:hover::before,
.nexio-btn--fx-grow:focus-visible::before,
.nexio-btn--fx-shrink:hover::before,
.nexio-btn--fx-shrink:focus-visible::before,
.nexio-btn--fx-float:hover::before,
.nexio-btn--fx-float:focus-visible::before { opacity: 1; }

.nexio-btn--fx-grow:hover,
.nexio-btn--fx-grow:focus-visible   { transform: scale(1.06); }

.nexio-btn--fx-shrink:hover,
.nexio-btn--fx-shrink:focus-visible { transform: scale(0.94); }

.nexio-btn--fx-float:hover,
.nexio-btn--fx-float:focus-visible  { transform: translateY(-4px); }

/* Respect a reduced-motion preference: keep the colour change, drop
   the movement. */
@media (prefers-reduced-motion: reduce) {
	.nexio-btn,
	.nexio-btn::before,
	.nexio-btn::after {
		transition-duration: 0.01ms !important;
	}

	.nexio-btn--fx-grow:hover,
	.nexio-btn--fx-shrink:hover,
	.nexio-btn--fx-float:hover {
		transform: none;
	}

	.nexio-btn--fx-sweep-left::before,
	.nexio-btn--fx-sweep-right::before,
	.nexio-btn--fx-sweep-up::before,
	.nexio-btn--fx-sweep-down::before {
		transform: none;
		opacity: 0;
	}

	.nexio-btn--fx-sweep-left:hover::before,
	.nexio-btn--fx-sweep-right:hover::before,
	.nexio-btn--fx-sweep-up:hover::before,
	.nexio-btn--fx-sweep-down:hover::before {
		opacity: 1;
	}
}

/* Highlighted run inside the label — text wrapped in {{ }}. Everything
   inherits by default, so a button whose author never opens the
   Highlighted Text section looks exactly as it did before. */
.nexio-btn__hl {
	display: inline-block;
	color: inherit;
	line-height: inherit;
	border: 0 solid transparent;
}

/* ------------------------------------------------------------------
 * Search popup — refined presentation.
 *
 * Defaults only: every value here is one an Elementor control can
 * override (its selectors carry the element id, so they outrank this),
 * which is why nothing below uses !important.
 * ------------------------------------------------------------------ */

.nexio-product-search-filter__popup {
	align-items: flex-start;
	padding: 14vh 20px 20px;
}

.nexio-product-search-filter__overlay {
	background-color: rgba(15, 23, 42, 0.55);
	-webkit-backdrop-filter: blur(6px) saturate(120%);
	backdrop-filter: blur(6px) saturate(120%);
	animation: nexio-search-fade 0.18s ease-out;
}

.nexio-product-search-filter__panel {
	max-width: 620px;
	padding: 30px 30px 26px;
	border-radius: 18px;
	border: 1px solid rgba(15, 23, 42, 0.06);
	box-shadow: 0 32px 70px -24px rgba(15, 23, 42, 0.45);
	animation: nexio-search-rise 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

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

@keyframes nexio-search-rise {
	from { opacity: 0; transform: translateY(-10px) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.nexio-product-search-filter__overlay,
	.nexio-product-search-filter__panel {
		animation: none;
	}
}

/* Heading sits clear of the close button rather than under it. */
.nexio-product-search-filter__heading {
	margin: 0 0 16px;
	padding-right: 40px;
	font-size: 19px;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.nexio-product-search-filter .nexio-product-search-filter__close {
	top: 16px;
	right: 16px;
	width: 34px;
	height: 34px;
	color: #667085;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nexio-product-search-filter .nexio-product-search-filter__close:hover {
	background-color: rgba(15, 23, 42, 0.07);
	color: #101828;
}

/* The field is the point of the dialog, so it gets the weight. */
.nexio-product-search-filter__popup .nexio-product-search-filter__field {
	width: 100%;
}

.nexio-product-search-filter__popup .nexio-product-search-filter__input {
	width: 100%;
	min-height: 54px;
	font-size: 16px; /* 16px stops iOS zooming the page on focus. */
	line-height: 1.4;
}

.nexio-product-search-filter__popup .nexio-product-search-filter__form {
	align-items: stretch;
}

@media ( max-width: 600px ) {
	.nexio-product-search-filter__popup {
		padding: 10vh 14px 14px;
	}

	.nexio-product-search-filter__panel {
		padding: 24px 20px 20px;
		border-radius: 14px;
	}
}