/* Nedclan Grid System — front-end styles
   All colors/sizes come from CSS custom properties set inline by the admin settings. */

.ngs-grid-wrapper {
	width: 100%;
	box-sizing: border-box;
}

.ngs-grid {
	display: grid;
	width: 100%;
	box-sizing: border-box;
	grid-template-columns: repeat(var(--ngs-mobile-cols, 2), 1fr);
	gap: var(--ngs-v-margin, 20px) var(--ngs-h-spacing, 1px);
}

@media (min-width: 600px) {
	.ngs-grid { grid-template-columns: repeat(var(--ngs-tablet-cols, 3), 1fr); }
}
@media (min-width: 1024px) {
	.ngs-grid { grid-template-columns: repeat(var(--ngs-desktop-cols, 4), 1fr); }
}

/* Breaks the grid out of whatever narrower container/column it's placed in (e.g. a page
   builder's default content width) so it spans the full browser width edge-to-edge, with
   its own gutter so cards don't touch the true viewport edge. The actual breakout math is
   applied by JS (assets/js/ngs-scripts.js), which measures the element's real position —
   more reliable than a CSS percentage trick, which silently assumes the containing column
   is itself perfectly centered in the viewport (often untrue in nested page-builder markup,
   and the cause of uneven left/right spacing when it isn't). Until JS runs, this stays a
   safe, ordinary contained width rather than attempting a breakout that could be wrong. */
.ngs-grid-wrapper.ngs-full-width {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding-left: var(--ngs-full-width-gutter, 16px);
	padding-right: var(--ngs-full-width-gutter, 16px);
}
.ngs-grid-wrapper.ngs-full-width.ngs-full-width--applied {
	overflow-x: hidden;
}

.ngs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ngs-card-bg, #fff);
}

/* ---------- Media / hover swap + zoom ---------- */
.ngs-card__media {
	position: relative;
	width: 100%;
	overflow: hidden;
	aspect-ratio: var(--ngs-image-ratio, 4 / 5);
	background: #f4f2ef;
}

.ngs-card__media-link { display: block; width: 100%; height: 100%; }

.ngs-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: opacity var(--ngs-hover-speed, 350ms) ease, transform var(--ngs-hover-speed, 350ms) ease;
}
.ngs-card__img--main { opacity: 1; transform: scale(1); z-index: 1; }
.ngs-card__img--hover { opacity: 0; transform: scale(var(--ngs-hover-zoom, 1.06)); z-index: 2; }

.ngs-card:hover .ngs-card__img--main { opacity: 0; }
.ngs-card:hover .ngs-card__img--hover { opacity: 1; }

/* ---------- Badges ---------- */
.ngs-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	z-index: 3;
}
.ngs-badge--sale {
	background: var(--ngs-sale-bg, #c1440e);
	color: var(--ngs-sale-color, #fff);
	font-size: var(--ngs-sale-font-size, 11px);
	padding: var(--ngs-sale-badge-padding, 8px);
	border-radius: var(--ngs-sale-badge-radius, 100px);
}
.ngs-badge--oos {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: var(--ngs-oos-text-size, 11px);
	padding: 6px 9px;
	border-radius: 3px;
	background: var(--ngs-oos-bg, #fff);
	color: var(--ngs-oos-color, #111);
}

/* ---------- Icon buttons (add to cart / wishlist) ---------- */
.ngs-card__actions {
	position: absolute;
	bottom: 12px;
	right: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 3;
}
.ngs-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.ngs-icon-btn svg { display: block; }

/* Wishlist heart: square background, size = icon size + padding on all sides, radius adjustable in admin */
.ngs-wishlist-toggle,
.ngs-remove-wishlist {
	width: calc(var(--ngs-wishlist-icon-size, 18px) + (var(--ngs-wishlist-icon-padding, 8px) * 2));
	height: calc(var(--ngs-wishlist-icon-size, 18px) + (var(--ngs-wishlist-icon-padding, 8px) * 2));
	border-radius: var(--ngs-wishlist-icon-radius, 0px);
	background: var(--ngs-wishlist-icon-bg, #fff);
	color: var(--ngs-wishlist-icon-color, #111);
	padding: var(--ngs-wishlist-icon-padding, 8px);
	border: var(--ngs-wishlist-icon-border-width, 0px) solid var(--ngs-wishlist-icon-border-color, transparent);
	box-sizing: border-box;
}
.ngs-wishlist-toggle.is-active svg { fill: var(--ngs-wishlist-icon-active-color, currentColor); }
.ngs-wishlist-toggle {
	margin: var(--ngs-wishlist-icon-margin-top, 0) var(--ngs-wishlist-icon-margin-right, 0) var(--ngs-wishlist-icon-margin-bottom, 0) var(--ngs-wishlist-icon-margin-left, 0);
}
.ngs-wishlist-toggle svg,
.ngs-remove-wishlist svg { width: var(--ngs-wishlist-icon-size, 18px); height: var(--ngs-wishlist-icon-size, 18px); }

/* Add to cart icon: square background, size = icon size + padding on all sides, radius adjustable in admin */
.ngs-add-to-cart-icon {
	width: calc(var(--ngs-cart-icon-size, 18px) + (var(--ngs-cart-icon-padding, 8px) * 2));
	height: calc(var(--ngs-cart-icon-size, 18px) + (var(--ngs-cart-icon-padding, 8px) * 2));
	border-radius: var(--ngs-cart-icon-radius, 0px);
	background: var(--ngs-cart-icon-bg, #fff);
	color: var(--ngs-cart-icon-color, #111);
	padding: var(--ngs-cart-icon-padding, 8px);
	margin: var(--ngs-cart-icon-margin-top, 0) var(--ngs-cart-icon-margin-right, 0) var(--ngs-cart-icon-margin-bottom, 0) var(--ngs-cart-icon-margin-left, 0);
	transition: opacity 150ms ease;
}
.ngs-add-to-cart-icon svg { width: var(--ngs-cart-icon-size, 18px); height: var(--ngs-cart-icon-size, 18px); }
.ngs-add-to-cart-icon.is-loading { opacity: 0.55; pointer-events: none; }
.ngs-add-to-cart-icon.is-added { background: #1f7a3d; color: #fff; }

/* out of stock: hide the add-to-cart icon entirely, keep only the wishlist heart */
.ngs-card--oos .ngs-add-to-cart-icon { display: none; }

/* wishlist card remove (X) */
.ngs-remove-wishlist {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	background: #fff;
	color: #111;
}

/* ---------- Card info (title / price) ---------- */
.ngs-card__info {
	margin: var(--ngs-card-margin-top, 12px) var(--ngs-card-margin-right, 0) var(--ngs-card-margin-bottom, 12px) var(--ngs-card-margin-left, 0);
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 2px;
}
.ngs-card__title {
	color: var(--ngs-title-color, #111) !important;
	font-weight: var(--ngs-title-weight, 400) !important;
	font-family: var(--ngs-title-font, inherit) !important;
	font-size: var(--ngs-title-size, 13px) !important;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.4;
	margin-top: var(--ngs-title-spacing-top, 0);
}
.ngs-card__price {
	/* !important guards against a theme's own price styling winning inside a context it
	   specifically targets — most commonly WooCommerce's "Related Products" section
	   (.related.products), which many themes size differently from the regular shop grid even
	   though this plugin renders both with the exact same card markup/settings. Without this,
	   the configured price size only reliably applies where the theme has no competing rule. */
	color: var(--ngs-price-color, #b08a3e) !important;
	font-size: var(--ngs-price-size, 13px) !important;
	font-weight: var(--ngs-title-weight, 400) !important;
	font-family: var(--ngs-title-font, inherit) !important;
	margin-top: var(--ngs-price-spacing-top, 0);
}
.ngs-card__price del { opacity: 0.5; margin-right: 6px; }
.ngs-card__price ins { text-decoration: none; }

/* Equal padding + stable horizontal alignment regardless of title length */
.ngs-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(var(--ngs-title-size, 13px) * 1.4 * 2);
}

/* ---------- Variation swatches ---------- */
.ngs-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 4px;
}
.ngs-swatch-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ngs-swatch-gap, 6px);
}
.ngs-swatch {
	min-width: var(--ngs-swatch-size, 26px);
	height: var(--ngs-swatch-size, 26px);
	padding: 0 var(--ngs-swatch-text-padding, 4px);
	border-radius: var(--ngs-swatch-radius, 2px);
	border: 1px solid var(--ngs-swatch-border, #ddd);
	background: #fff;
	font-size: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ngs-swatch--color { width: var(--ngs-swatch-size, 26px); }
.ngs-swatch.is-selected,
.ngs-swatch:hover {
	border-color: var(--ngs-swatch-active-border, #111);
}

/* ---------- Menu icons (cart / wishlist) ---------- */
.ngs-menu-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.ngs-menu-cart-icon svg { width: var(--ngs-menu-cart-size, 22px); height: var(--ngs-menu-cart-size, 22px); color: var(--ngs-menu-cart-color, #111); }
.ngs-menu-wishlist-icon svg { width: var(--ngs-menu-wishlist-size, 22px); height: var(--ngs-menu-wishlist-size, 22px); color: var(--ngs-menu-wishlist-color, #111); }

.ngs-menu-counter {
	display: none;
	position: absolute;
	top: -8px;
	right: -12px;
	min-width: 18px;
	height: 18px;
	padding: 3px 6px;
	border-radius: 50%;
	font-size: 10px;
	line-height: 12px;
	text-align: center;
	box-sizing: border-box;
}
.ngs-menu-counter.is-visible {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ngs-cart-counter { background: var(--ngs-menu-cart-counter-bg, #111); color: var(--ngs-menu-cart-counter-color, #fff); }
.ngs-wishlist-counter { background: var(--ngs-menu-wishlist-counter-bg, #111); color: var(--ngs-menu-wishlist-counter-color, #fff); }

/* ---------- Wishlist page card variant ---------- */
.ngs-card--wishlist .ngs-add-to-cart-full {
	width: 100%;
	padding: 12px;
	margin-top: 8px;
	background: var(--ngs-wishlist-btn-bg, #111);
	color: var(--ngs-wishlist-btn-color, #fff);
	border: none;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.05em;
}
.ngs-card--wishlist .ngs-add-to-cart-full:disabled { opacity: 0.5; cursor: not-allowed; }

.ngs-view-cart-link {
	display: block;
	text-align: center;
	margin-top: 8px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: underline;
	color: var(--ngs-wishlist-btn-bg, #111);
}

.ngs-wishlist-empty { padding: 40px 0; text-align: center; }

/* ---------- Single product wishlist button ---------- */
.ngs-wishlist-btn-single {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px solid #111;
	padding: 10px 16px;
	cursor: pointer;
}
.ngs-wishlist-btn-single svg { width: 16px; height: 16px; }
.ngs-wishlist-btn-single.is-active svg { fill: currentColor; }

.ngs-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 30px; }

/* ---------- Product count ---------- */
.ngs-product-count {
	font-size: var(--ngs-count-font-size, 14px);
	color: var(--ngs-count-color, #333);
}
.ngs-product-count__number { color: var(--ngs-count-number-color, #111); font-weight: 600; }

/* ---------- Sort widget (dropdown) ---------- */
.ngs-sort-widget {
	position: relative;
	display: inline-block;
	background: var(--ngs-sort-bg, transparent);
	padding: var(--ngs-sort-padding, 0);
	margin: var(--ngs-sort-margin-top, 0) var(--ngs-sort-margin-right, 0) var(--ngs-sort-margin-bottom, 0) var(--ngs-sort-margin-left, 0);
}
.ngs-sort-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: var(--ngs-sort-font-size, 14px);
	color: var(--ngs-sort-text-color, #333);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.ngs-sort-toggle__icon,
.ngs-sort-toggle__chevron { width: 16px; height: 16px; flex-shrink: 0; }
.ngs-sort-toggle__chevron { transition: transform 200ms ease; }
.ngs-sort-widget.is-open .ngs-sort-toggle__chevron { transform: rotate(180deg); }

.ngs-sort-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 180px;
	background: var(--ngs-sort-dropdown-bg, #fff);
	border: 1px solid var(--ngs-sort-border, #ddd);
	box-shadow: 0 6px 20px rgba(0,0,0,0.08);
	z-index: 40;
	display: none;
	flex-direction: column;
	padding: 6px 0;
}
.ngs-sort-widget.is-open .ngs-sort-dropdown { display: flex; }
.ngs-sort-option {
	background: none;
	border: none;
	text-align: left;
	padding: 8px 16px;
	font-size: var(--ngs-sort-font-size, 14px);
	color: var(--ngs-sort-text-color, #333);
	cursor: pointer;
}
.ngs-sort-option:hover {
	background: var(--ngs-sort-option-hover-bg, #f5f5f5);
	color: var(--ngs-sort-option-hover-color, #111);
}
.ngs-sort-option.is-selected {
	background: var(--ngs-sort-option-active-bg, #111);
	color: var(--ngs-sort-option-active-color, #fff);
	font-weight: 600;
}

/* ---------- Filter widget (slide-in panel) ---------- */
.ngs-filter-widget {
	display: inline-block;
	margin: var(--ngs-filter-margin-top, 0) var(--ngs-filter-margin-right, 0) var(--ngs-filter-margin-bottom, 0) var(--ngs-filter-margin-left, 0);
}
.ngs-filter-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--ngs-filter-toggle-bg, transparent);
	color: var(--ngs-filter-toggle-color, #333);
	border: none;
	cursor: pointer;
	font-size: var(--ngs-filter-label-size, 14px);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.ngs-filter-toggle__icon,
.ngs-filter-toggle__chevron { width: 16px; height: 16px; flex-shrink: 0; }
.ngs-filter-toggle__chevron { transition: transform 200ms ease; }
.ngs-filter-widget.is-open .ngs-filter-toggle__chevron { transform: rotate(180deg); }

.ngs-filter-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.35);
	opacity: 0;
	visibility: hidden;
	transition: opacity 250ms ease;
	z-index: 99998;
}
.ngs-filter-overlay.is-open { opacity: 1; visibility: visible; }

.ngs-filter-panel {
	position: fixed;
	top: 0;
	right: var(--ngs-filter-panel-margin-right, 2px);
	width: var(--ngs-filter-panel-width, 400px);
	max-width: calc(100vw - var(--ngs-filter-panel-margin-right, 2px));
	height: calc(100vh - var(--ngs-filter-panel-margin-bottom, 2px)); /* fallback for older browsers */
	height: calc(100dvh - var(--ngs-filter-panel-margin-bottom, 2px)); /* tracks the real visible viewport as mobile toolbars show/hide */
	background: var(--ngs-filter-bg, #fff);
	border-left: 1px solid var(--ngs-filter-border, #eee);
	box-shadow: -8px 0 24px rgba(0,0,0,0.1);
	transform: translateX(100%);
	transition: transform 300ms ease;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	padding: var(--ngs-filter-padding, 24px);
	box-sizing: border-box;
	overflow: hidden;
}
.ngs-filter-panel.is-open { transform: translateX(0); }

.ngs-filter-panel__header { display: flex; justify-content: flex-end; margin-bottom: 12px; flex-shrink: 0; }
.ngs-filter-close {
	background: none;
	border: none;
	cursor: pointer;
	width: var(--ngs-filter-close-size, 22px);
	height: var(--ngs-filter-close-size, 22px);
	padding: 0;
	color: var(--ngs-filter-close-color, #333) !important;
}
.ngs-filter-close svg {
	width: 100%;
	height: 100%;
	stroke: var(--ngs-filter-close-color, #333) !important;
}

.ngs-filter-accordion { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--ngs-filter-group-gap, 0); }
.ngs-filter-accordion-item { border-bottom: 1px solid var(--ngs-filter-border, #eee); }
.ngs-filter-accordion-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--ngs-filter-section-bg, transparent) !important;
	border: none;
	cursor: pointer;
	padding: 16px 0;
	font-size: var(--ngs-filter-heading-size, 15px);
	color: var(--ngs-filter-heading-color, #111) !important;
	transition: background-color 150ms ease, color 150ms ease;
}
.ngs-filter-accordion-toggle:hover {
	background: var(--ngs-filter-section-hover-bg, transparent) !important;
	color: var(--ngs-filter-section-hover-color, #111) !important;
}
.ngs-filter-accordion-toggle svg { width: 16px; height: 16px; transition: transform 200ms ease; }
.ngs-filter-accordion-item.is-expanded .ngs-filter-accordion-toggle svg { transform: rotate(90deg); }
.ngs-filter-accordion-content { display: none; padding-bottom: 16px; }
.ngs-filter-accordion-item.is-expanded .ngs-filter-accordion-content { display: block; }

.ngs-filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ngs-filter-option-gap, 8px);
}
.ngs-filter-options:not(.ngs-filter-options--swatch) { flex-direction: column; }
.ngs-filter-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--ngs-filter-label-size, 13px);
	color: var(--ngs-filter-label-color, #333);
	cursor: pointer;
}
.ngs-filter-checkbox input { accent-color: var(--ngs-filter-active-color, #111); }
.ngs-filter-checkbox input:checked + span { color: var(--ngs-filter-active-color, #111); font-weight: 600; }
.ngs-filter-swatch.is-selected { border-color: var(--ngs-filter-active-color, #111); box-shadow: 0 0 0 1px var(--ngs-filter-active-color, #111); }

.ngs-filter-panel__footer { padding-top: 16px; border-top: 1px solid var(--ngs-filter-border, #eee); display: flex; flex-direction: column; flex-shrink: 0; }
.ngs-filter-back {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: var(--ngs-filter-back-bg, #b5451b);
	color: var(--ngs-filter-back-color, #fff);
	border: none;
	border-radius: var(--ngs-filter-back-radius, 100px);
	padding: var(--ngs-filter-back-padding, 12px);
	font-family: var(--ngs-filter-back-font, inherit);
	font-size: var(--ngs-filter-back-font-size, 14px);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	cursor: pointer;
	margin: var(--ngs-filter-back-margin-top, 0) var(--ngs-filter-back-margin-right, 0) var(--ngs-filter-back-margin-bottom, 12px) var(--ngs-filter-back-margin-left, 0);
}
.ngs-filter-back svg { width: 16px; height: 16px; }
.ngs-filter-clear {
	width: 100%;
	background: var(--ngs-filter-clear-bg, transparent);
	border: 1px solid var(--ngs-filter-clear-border-color, #333);
	border-radius: var(--ngs-filter-clear-radius, 0);
	padding: var(--ngs-filter-clear-padding, 10px);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-family: var(--ngs-filter-clear-font, inherit);
	font-size: var(--ngs-filter-clear-font-size, 13px);
	color: var(--ngs-filter-clear-color, #333);
	cursor: pointer;
	margin: var(--ngs-filter-clear-margin-top, 0) var(--ngs-filter-clear-margin-right, 0) var(--ngs-filter-clear-margin-bottom, 0) var(--ngs-filter-clear-margin-left, 0);
}

body.ngs-filter-panel-open { overflow: hidden; }

@media (max-width: 599px) {
	.ngs-filter-panel { width: 80vw; }
}

/* ---------- Filter 2 (alternate accordion — plain checkboxes throughout, incl. Price & Availability) ----------
   Reuses every Filter 1 class/behavior (toggle, overlay, panel, accordion, clear button, JS) so it opens, closes,
   and AJAX-refreshes the grid identically — this block only overrides appearance via the `ngs-filter--style2`
   modifier class, which is present on the widget wrapper, the panel, and the overlay (the panel/overlay get
   moved to be direct children of <body> by JS, so the modifier has to live on each of them, not just the wrapper). */
.ngs-filter-widget.ngs-filter--style2 {
	margin: var(--ngs-filter2-margin-top, 0) var(--ngs-filter2-margin-right, 0) var(--ngs-filter2-margin-bottom, 20px) var(--ngs-filter2-margin-left, 0);
}
.ngs-filter-widget.ngs-filter--style2 .ngs-filter-toggle {
	background: var(--ngs-filter2-toggle-bg, transparent);
	color: var(--ngs-filter2-toggle-color, #333);
}
.ngs-filter-panel.ngs-filter--style2 {
	right: var(--ngs-filter2-panel-margin-right, 0px);
	width: var(--ngs-filter2-panel-width, 380px);
	max-width: calc(100vw - var(--ngs-filter2-panel-margin-right, 0px));
	height: calc(100vh - var(--ngs-filter2-panel-margin-bottom, 0px));
	height: calc(100dvh - var(--ngs-filter2-panel-margin-bottom, 0px));
	background: var(--ngs-filter2-bg, #fdf6ec);
	border-left: 1px solid var(--ngs-filter2-border, #e8ddc9);
	padding: var(--ngs-filter2-padding, 24px);
}
.ngs-filter-panel.ngs-filter--style2 .ngs-filter-close {
	width: var(--ngs-filter2-close-size, 20px);
	height: var(--ngs-filter2-close-size, 20px);
	color: var(--ngs-filter2-close-color, #333) !important;
}
.ngs-filter-panel.ngs-filter--style2 .ngs-filter-close svg { stroke: var(--ngs-filter2-close-color, #333) !important; }
.ngs-filter-panel.ngs-filter--style2 .ngs-filter-accordion { gap: var(--ngs-filter2-group-gap, 20px); }
.ngs-filter-panel.ngs-filter--style2 .ngs-filter-accordion-item {
	border-bottom-color: var(--ngs-filter2-border, #e8ddc9);
	border-bottom-width: var(--ngs-filter2-divider-width, 1px);
	border-bottom-style: var(--ngs-filter2-divider-style, solid);
}
.ngs-filter-panel.ngs-filter--style2 .ngs-filter-accordion-toggle {
	background: transparent !important;
	color: var(--ngs-filter2-heading-color, #1a1a1a) !important;
	font-family: var(--ngs-filter2-heading-font, Georgia, serif);
	font-size: var(--ngs-filter2-heading-size, 13px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.ngs-filter-panel.ngs-filter--style2 .ngs-filter-accordion-toggle:hover {
	background: var(--ngs-filter2-section-hover-bg, transparent) !important;
	color: var(--ngs-filter2-section-hover-color, #1a1a1a) !important;
}
.ngs-filter-panel.ngs-filter--style2 .ngs-filter-options { gap: var(--ngs-filter2-option-gap, 10px); }
.ngs-filter-panel.ngs-filter--style2 .ngs-filter-checkbox {
	gap: 10px;
	font-family: var(--ngs-filter2-label-font, inherit);
	font-size: var(--ngs-filter2-label-size, 13px);
	color: var(--ngs-filter2-label-color, #4a3f35);
}
.ngs-filter-panel.ngs-filter--style2 .ngs-filter-checkbox input:checked + span {
	color: var(--ngs-filter2-active-color, #111);
	font-weight: 600;
}
.ngs-filter-panel.ngs-filter--style2 .ngs-filter-count {
	color: var(--ngs-filter2-count-color, #a99a86);
	font-weight: 400 !important;
}
.ngs-filter-panel.ngs-filter--style2 .ngs-filter-checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	margin: 0;
	flex-shrink: 0;
	cursor: pointer;
	position: relative;
	width: var(--ngs-filter2-checkbox-size, 18px);
	height: var(--ngs-filter2-checkbox-size, 18px);
	border-radius: var(--ngs-filter2-checkbox-radius, 4px);
	border: var(--ngs-filter2-checkbox-stroke-width, 1.5px) solid var(--ngs-filter2-checkbox-border-color, #c9a227);
	background: var(--ngs-filter2-checkbox-bg, #fff);
}
.ngs-filter-panel.ngs-filter--style2 .ngs-filter-checkbox input[type="checkbox"]:checked {
	background: var(--ngs-filter2-checkbox-checked-bg, #c9a227);
	border-color: var(--ngs-filter2-checkbox-checked-border, #c9a227);
}
.ngs-filter-panel.ngs-filter--style2 .ngs-filter-checkbox input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 28%;
	top: 6%;
	width: 32%;
	height: 58%;
	border: solid var(--ngs-filter2-checkbox-check-color, #fff);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ngs-filter-panel.ngs-filter--style2 .ngs-filter-panel__footer { border-top-color: var(--ngs-filter2-border, #e8ddc9); }
.ngs-filter-panel.ngs-filter--style2 .ngs-filter-clear {
	background: var(--ngs-filter2-clear-bg, transparent);
	border: 1px solid var(--ngs-filter2-clear-border-color, #111);
	border-radius: var(--ngs-filter2-clear-radius, 100px);
	padding: var(--ngs-filter2-clear-padding, 12px);
	font-family: var(--ngs-filter2-clear-font, inherit);
	font-size: var(--ngs-filter2-clear-font-size, 14px);
	color: var(--ngs-filter2-clear-color, #111);
	text-transform: none;
	letter-spacing: normal;
	margin: var(--ngs-filter2-clear-margin-top, 8px) var(--ngs-filter2-clear-margin-right, 0) var(--ngs-filter2-clear-margin-bottom, 0) var(--ngs-filter2-clear-margin-left, 0);
}

@media (max-width: 599px) {
	.ngs-filter-panel.ngs-filter--style2 { width: 85vw; }
}

/* ---------- Archive page: [ngs_archive_title] / [ngs_archive_filter] / [ngs_archive_products] ---------- */
.ngs-archive-title {
	color: var(--ngs-archive-title-color, #1a1a1a);
	font-family: var(--ngs-archive-title-font, Georgia, serif);
	font-size: var(--ngs-archive-title-size, 28px);
	font-weight: 400;
	line-height: 1.2;
	margin: var(--ngs-archive-title-margin-top, 24px) var(--ngs-archive-title-margin-right, 0) var(--ngs-archive-title-margin-bottom, 16px) var(--ngs-archive-title-margin-left, 0);
}
.ngs-archive-pill-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ngs-archive-pill-gap, 10px);
	margin: var(--ngs-archive-row-margin-top, 0) var(--ngs-archive-row-margin-right, 0) var(--ngs-archive-row-margin-bottom, 24px) var(--ngs-archive-row-margin-left, 0);
}
.ngs-archive-pill {
	/* `all: unset !important` first, same as the search buttons elsewhere in this file — wipes
	   any theme default <button> styling (border-radius, border, background, padding, font...)
	   that would otherwise have equal-or-higher specificity than a single class selector, so
	   the corner radius (and every other pill style below) always renders as configured. */
	all: unset !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	cursor: pointer !important;
	background: var(--ngs-archive-pill-bg, transparent) !important;
	color: var(--ngs-archive-pill-color, #4a3f35) !important;
	border: var(--ngs-archive-pill-border-width, 1px) solid var(--ngs-archive-pill-border-color, #e8ddc9) !important;
	border-radius: var(--ngs-archive-pill-radius, 100px) !important;
	padding: var(--ngs-archive-pill-padding-v, 10px) var(--ngs-archive-pill-padding-h, 20px) !important;
	font-family: var(--ngs-archive-pill-font, inherit) !important;
	font-size: var(--ngs-archive-pill-font-size, 15px) !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
.ngs-archive-pill:hover {
	background: var(--ngs-archive-pill-hover-bg, #fdf6ec) !important;
	color: var(--ngs-archive-pill-hover-color, #1a1a1a) !important;
}
.ngs-archive-pill__count { color: var(--ngs-archive-pill-count-color, #a99a86) !important; }
.ngs-archive-pill.is-active {
	background: var(--ngs-archive-pill-active-bg, #a0522d) !important;
	color: var(--ngs-archive-pill-active-color, #ffffff) !important;
	border-color: var(--ngs-archive-pill-active-border-color, #a0522d) !important;
}
.ngs-archive-pill.is-active .ngs-archive-pill__count { color: var(--ngs-archive-pill-active-count-color, #f3e4da); }
.ngs-archive-pill.is-active:hover {
	background: var(--ngs-archive-pill-active-bg, #a0522d);
	color: var(--ngs-archive-pill-active-color, #ffffff);
}

/* ---------- Related Products / Recently Viewed sections (single product page) ---------- */
.ngs-section { margin-top: 60px; clear: both; }
.ngs-section__title {
	font-size: 18px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 24px;
	color: var(--ngs-title-color, #111);
}

/* ---------- Wishlist add/remove toast notification ---------- */
.ngs-toast {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 99999;
	background: var(--ngs-toast-bg, #fff);
	padding: var(--ngs-toast-padding, 14px);
	margin: var(--ngs-toast-margin-top, 0) var(--ngs-toast-margin-right, 20px) var(--ngs-toast-margin-bottom, 20px) var(--ngs-toast-margin-left, 0);
	font-size: var(--ngs-toast-font-size, 13px);
	box-shadow: 0 2px 14px rgba(0,0,0,0.15);
	border-radius: 4px;
	max-width: 320px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 250ms ease, transform 250ms ease;
	pointer-events: none;
}
.ngs-toast.is-visible { opacity: 1; transform: translateY(0); }
.ngs-toast--added { color: var(--ngs-toast-added-color, #1f7a3d); }
.ngs-toast--removed { color: var(--ngs-toast-removed-color, #b3261e); }
.ngs-toast--cart-added { color: var(--ngs-toast-cart-added-color, #1f7a3d); }

/* =========================================================
   Card Style 1 — white rounded card, inset image, pill button + circular heart
   ========================================================= */
.ngs-card--style1 {
	background: var(--ngs-style1-card-bg, #fff);
	border-radius: var(--ngs-style1-card-radius, 20px);
	box-shadow: 0 4px 18px rgba(0,0,0,0.06);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.ngs-card--style1 .ngs-card__media {
	aspect-ratio: 1 / 1;
	margin: 12px;
	width: calc(100% - 24px);
	border-radius: var(--ngs-style1-image-radius, 16px);
}
.ngs-card--style1 .ngs-card__info {
	padding: var(--ngs-style1-padding-top, 16px) var(--ngs-style1-padding-right, 16px) var(--ngs-style1-padding-bottom, 16px) var(--ngs-style1-padding-left, 16px);
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--ngs-style-element-gap, 8px);
	margin: 0;
}
.ngs-card--style1 .ngs-card__brand {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ngs-style1-brand-color, #8a8a8a);
}
.ngs-card--style1 .ngs-card__title {
	color: var(--ngs-style1-title-color, #0f172a) !important;
	font-family: var(--ngs-style1-title-font, inherit) !important;
	font-weight: 700 !important;
	font-size: var(--ngs-style1-title-size, 18px) !important;
	text-transform: none;
	line-height: 1.3;
	margin-top: var(--ngs-style1-title-margin-top, 0);
}
.ngs-card--style1 .ngs-card__price {
	font-family: var(--ngs-style1-title-font, inherit) !important;
	font-weight: 700 !important;
	font-size: var(--ngs-style1-price-size, 17px) !important;
	color: var(--ngs-style1-title-color, #0f172a) !important;
	margin-top: var(--ngs-style1-price-margin-top, 0);
}
.ngs-card--style1 .ngs-swatch--color { border-radius: 50%; border: none; width: 18px; height: 18px; min-width: 18px; padding: 0; }
.ngs-style1-actions { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; }
.ngs-style1-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--ngs-style1-button-bg, #111);
	color: var(--ngs-style1-button-color, #fff);
	border: none;
	border-radius: var(--ngs-style1-button-radius, 100px);
	padding: var(--ngs-style1-button-padding, 12px);
	font-family: var(--ngs-style1-button-font, inherit);
	font-size: var(--ngs-style1-button-font-size, 14px);
	font-weight: 600;
	cursor: pointer;
	margin: var(--ngs-style1-button-margin-top, 4px) var(--ngs-style1-button-margin-right, 0) var(--ngs-style1-button-margin-bottom, 0) var(--ngs-style1-button-margin-left, 0);
}
.ngs-style1-btn svg { width: 16px; height: 16px; }
.ngs-style1-btn--oos { background: #eee; color: #999; cursor: not-allowed; }
.ngs-style1-heart {
	width: calc(var(--ngs-wishlist-icon-size, 18px) + (var(--ngs-wishlist-icon-padding, 8px) * 2));
	height: calc(var(--ngs-wishlist-icon-size, 18px) + (var(--ngs-wishlist-icon-padding, 8px) * 2));
	border-radius: 50%;
	background: var(--ngs-wishlist-icon-bg, #111);
	color: var(--ngs-wishlist-icon-color, #fff);
	padding: var(--ngs-wishlist-icon-padding, 8px);
	margin: var(--ngs-wishlist-icon-margin-top, 0) var(--ngs-wishlist-icon-margin-right, 0) var(--ngs-wishlist-icon-margin-bottom, 0) var(--ngs-wishlist-icon-margin-left, 0);
	flex-shrink: 0;
}
.ngs-style1-heart svg { width: var(--ngs-wishlist-icon-size, 18px); height: var(--ngs-wishlist-icon-size, 18px); }
.ngs-style1-heart.is-active svg { fill: var(--ngs-wishlist-icon-active-color, currentColor); }
.ngs-card--style1.ngs-card--oos .ngs-add-to-cart-icon { display: none; }

/* =========================================================
   Card Style 2 — colored image block, dark heart overlay, ratings, square cart button
   ========================================================= */
.ngs-card--style2 {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.ngs-card--style2 .ngs-card__media {
	background: var(--ngs-style2-image-bg, #e3e6f5);
	border-radius: var(--ngs-style2-image-radius, 16px);
	aspect-ratio: 1 / 1;
}
.ngs-card--style2 .ngs-card__img { object-fit: contain; padding: 20px; box-sizing: border-box; }
.ngs-style2-heart {
	position: absolute;
	top: 12px;
	right: 12px;
	width: calc(var(--ngs-wishlist-icon-size, 18px) + (var(--ngs-wishlist-icon-padding, 8px) * 2));
	height: calc(var(--ngs-wishlist-icon-size, 18px) + (var(--ngs-wishlist-icon-padding, 8px) * 2));
	border-radius: 50%;
	background: var(--ngs-wishlist-icon-bg, #1a1a1a);
	color: var(--ngs-wishlist-icon-color, #fff);
	padding: var(--ngs-wishlist-icon-padding, 8px);
	margin: var(--ngs-wishlist-icon-margin-top, 0) var(--ngs-wishlist-icon-margin-right, 0) var(--ngs-wishlist-icon-margin-bottom, 0) var(--ngs-wishlist-icon-margin-left, 0);
	z-index: 3;
}
.ngs-style2-heart svg { width: var(--ngs-wishlist-icon-size, 18px); height: var(--ngs-wishlist-icon-size, 18px); }
.ngs-style2-heart.is-active svg { fill: var(--ngs-wishlist-icon-active-color, currentColor); }
.ngs-card--style2 .ngs-card__info {
	padding: var(--ngs-style2-padding-top, 16px) var(--ngs-style2-padding-right, 15px) var(--ngs-style2-padding-bottom, 15px) var(--ngs-style2-padding-left, 15px);
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--ngs-style-element-gap, 8px);
	margin: 0;
}
.ngs-card--style2 .ngs-card__title { text-transform: none; font-weight: 600 !important; font-family: var(--ngs-style2-title-font, inherit) !important; font-size: var(--ngs-style2-title-size, 16px) !important; margin-top: var(--ngs-style2-title-margin-top, 0); }
.ngs-style2-rating { display: flex; align-items: center; gap: 10px; }
.ngs-style2-stars { display: flex; gap: 2px; }
.ngs-style2-stars svg { width: 14px; height: 14px; fill: var(--ngs-style2-star-empty-color, #ddd); }
.ngs-style2-stars svg.is-filled { fill: var(--ngs-style2-star-color, #111); }
.ngs-style2-review-count { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ngs-style2-review-color, #777); }
.ngs-style2-review-count svg { width: 14px; height: 14px; }
.ngs-card--style2 .ngs-swatch--color { border-radius: 50%; border: none; width: 18px; height: 18px; min-width: 18px; padding: 0; }
.ngs-style2-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 4px; }
.ngs-style2-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ngs-style2-price-old { text-decoration: line-through; color: #999; font-size: 13px; }
.ngs-style2-badge { position: static; background: var(--ngs-style2-discount-bg, #e3e6f5); color: var(--ngs-style2-discount-color, #3b3b3b); border-radius: 6px; font-size: 11px; padding: 3px 7px; }
.ngs-style2-price .ngs-card__price { flex-basis: 100%; font-family: var(--ngs-style2-title-font, inherit) !important; font-weight: 700 !important; font-size: var(--ngs-style2-price-size, 20px) !important; margin-top: var(--ngs-style2-price-margin-top, 0); }
.ngs-style2-cart-btn {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: none;
	border-radius: var(--ngs-style2-button-radius, 12px);
	background: var(--ngs-style2-button-bg, #e63946);
	color: var(--ngs-style2-button-color, #fff);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: var(--ngs-style2-button-padding, 12px);
	box-sizing: border-box;
	margin: var(--ngs-style2-button-margin-top, 0) var(--ngs-style2-button-margin-right, 0) var(--ngs-style2-button-margin-bottom, 0) var(--ngs-style2-button-margin-left, 0);
}
.ngs-style2-cart-btn svg { width: 100%; height: 100%; }
.ngs-card--style2.ngs-card--oos .ngs-style2-cart-btn { display: none; }

/* =========================================================
   Card Style 3 — full-bleed image, circular sale badge, cream content, outline heart + Buy pill
   ========================================================= */
.ngs-card--style3 {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}
.ngs-card--style3 .ngs-card__media { aspect-ratio: 4 / 3; }
.ngs-style3-sale-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--ngs-style3-sale-badge-bg, #b5451b);
	color: var(--ngs-style3-sale-badge-color, #fff);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	z-index: 3;
}
.ngs-style3-info {
	background: var(--ngs-style3-content-bg, #f7f0e8);
	padding: var(--ngs-style3-padding-top, 16px) var(--ngs-style3-padding-right, 16px) var(--ngs-style3-padding-bottom, 16px) var(--ngs-style3-padding-left, 16px);
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--ngs-style-element-gap, 8px);
	margin: 0;
}
.ngs-style3-category { font-size: 12px; color: var(--ngs-style3-category-color, #8a8a8a); }
.ngs-card--style3 .ngs-card__title { color: var(--ngs-style3-title-color, #111) !important; font-family: var(--ngs-style3-title-font, inherit) !important; text-transform: none; font-weight: 700 !important; font-size: var(--ngs-style3-title-size, 17px) !important; margin-top: var(--ngs-style3-title-margin-top, 0); }
.ngs-card--style3 .ngs-card__price { font-family: var(--ngs-style3-title-font, inherit) !important; font-size: var(--ngs-style3-price-size, 15px) !important; margin-top: var(--ngs-style3-price-margin-top, 0); }
.ngs-card--style3 .ngs-swatch--color { border-radius: 50%; border: none; width: 18px; height: 18px; min-width: 18px; padding: 0; }
.ngs-style3-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 4px; }
.ngs-style3-heart {
	background: none;
	box-shadow: none;
	border: 1.5px solid var(--ngs-wishlist-icon-color, #b5451b);
	color: var(--ngs-wishlist-icon-color, #b5451b);
	width: calc(var(--ngs-wishlist-icon-size, 18px) + (var(--ngs-wishlist-icon-padding, 8px) * 2));
	height: calc(var(--ngs-wishlist-icon-size, 18px) + (var(--ngs-wishlist-icon-padding, 8px) * 2));
	padding: var(--ngs-wishlist-icon-padding, 8px);
	margin: var(--ngs-wishlist-icon-margin-top, 0) var(--ngs-wishlist-icon-margin-right, 0) var(--ngs-wishlist-icon-margin-bottom, 0) var(--ngs-wishlist-icon-margin-left, 0);
	border-radius: 50%;
	flex-shrink: 0;
}
.ngs-style3-heart svg { width: var(--ngs-wishlist-icon-size, 18px); height: var(--ngs-wishlist-icon-size, 18px); }
.ngs-style3-heart.is-active svg { fill: var(--ngs-wishlist-icon-active-color, currentColor); }
.ngs-style3-buy {
	flex: 1;
	background: var(--ngs-style3-buy-bg, #b5451b);
	color: var(--ngs-style3-buy-color, #fff);
	border: none;
	border-radius: var(--ngs-style3-buy-radius, 100px);
	padding: var(--ngs-style3-buy-padding, 12px);
	font-family: var(--ngs-style3-buy-font, inherit);
	font-size: var(--ngs-style3-buy-font-size, 15px);
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	margin: var(--ngs-style3-buy-margin-top, 0) var(--ngs-style3-buy-margin-right, 0) var(--ngs-style3-buy-margin-bottom, 0) var(--ngs-style3-buy-margin-left, 0);
}
.ngs-style3-buy--oos { background: #eee; color: #999; cursor: not-allowed; }
.ngs-card--style3.ngs-card--oos .ngs-add-to-cart-icon { display: none; }

/* Wishlist page context: full-width primary action for all three new styles */
.ngs-card--style1.ngs-card--wishlist .ngs-style1-actions,
.ngs-card--style3.ngs-card--wishlist .ngs-style3-bottom { flex-direction: row; }
.ngs-card--style1.ngs-card--wishlist .ngs-add-to-cart-full,
.ngs-card--style3.ngs-card--wishlist .ngs-add-to-cart-full { flex: 1; }

/* =========================================================
   Product Carousel (built on Swiper — see assets/js/ngs-carousel.js)
   ========================================================= */
.ngs-carousel { position: relative; width: 100%; }
.ngs-carousel__title {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 16px;
	color: var(--ngs-carousel-title-color, #111);
}
.ngs-carousel__viewport { position: relative; }

/* Swiper sizes/positions .swiper-slide itself via JS (inline width/margin, once it boots) —
   but before that JS runs (or on the first paint), .swiper-slide has no width of its own and
   would otherwise sit at full container width, i.e. stacked instead of in a row. The rule
   below gives every slide a fixed, evenly-computed width and gap from first paint using the
   same --ngs-carousel-slides/--ngs-carousel-gap values Swiper is configured with, so the row
   is always horizontally laid out and fixed-width — Swiper's own inline styles (which win
   automatically over any stylesheet) then just take over cleanly once it initializes, with
   no visible jump since the numbers already match. */
.ngs-carousel__swiper {
	width: 100%;
	position: relative;
	overflow: hidden;
	list-style: none;
	padding: 0;
	z-index: 1;
}
.ngs-carousel__swiper .swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	transition-property: transform;
	box-sizing: content-box;
}
.ngs-carousel__slide {
	flex: 0 0 auto;
	width: calc((100% - (max(var(--ngs-carousel-slides, 4), 1) - 1) * var(--ngs-carousel-gap, 16px)) / max(var(--ngs-carousel-slides, 4), 1));
	margin-right: var(--ngs-carousel-gap, 16px);
	height: auto;
}
.ngs-carousel__slide:last-child { margin-right: 0; }
.ngs-carousel__slide .ngs-card { height: 100%; }

.ngs-carousel__arrow {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: var(--ngs-carousel-arrow-bg, #fff);
	color: var(--ngs-carousel-arrow-color, #111);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.ngs-carousel__arrow svg { width: 18px; height: 18px; stroke: var(--ngs-carousel-arrow-color, #111) !important; }
.ngs-carousel__arrow--prev { left: -4px; }
.ngs-carousel__arrow--next { right: -4px; }
.ngs-carousel__arrow.swiper-button-disabled { opacity: 0.35; cursor: not-allowed; }
.ngs-carousel.ngs-carousel--hide-arrows .ngs-carousel__arrow { display: none; }

/* Mobile defaults to native swipe + pagination dots, no arrow buttons (matches reference design) */
@media (max-width: 599px) {
	.ngs-carousel--hide-arrows-mobile .ngs-carousel__arrow { display: none; }
}

/* Navigation dots (Swiper's built-in pagination), customizable via admin settings */
.ngs-carousel__pagination {
	position: static;
	margin: var(--ngs-carousel-dot-margin-top, 14px) 0 var(--ngs-carousel-dot-margin-bottom, 0) 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ngs-carousel-dot-gap, 6px);
}
.ngs-carousel__pagination .swiper-pagination-bullet {
	background: var(--ngs-carousel-progress-bg, #e5e5e5);
	opacity: 1;
	width: var(--ngs-carousel-dot-size, 7px);
	height: var(--ngs-carousel-dot-size, 7px);
	margin: 0 !important;
}
.ngs-carousel__pagination .swiper-pagination-bullet-active {
	background: var(--ngs-carousel-progress-color, #111);
}

/* Per-device disable: when JS destroys the Swiper instance for the current breakpoint
   (ngs-carousel--static class), fall back to a plain wrapped grid instead of a scroller. */
.ngs-carousel--static .swiper-wrapper {
	flex-wrap: wrap;
	transform: none !important;
}
.ngs-carousel--static .ngs-carousel__slide {
	width: calc((100% - var(--ngs-carousel-gap, 16px)) / 2) !important;
	margin: 0 0 var(--ngs-carousel-gap, 16px) 0 !important;
}
@media (min-width: 600px) {
	.ngs-carousel--static .ngs-carousel__slide { width: calc((100% - 2 * var(--ngs-carousel-gap, 16px)) / 3) !important; }
}
@media (min-width: 1024px) {
	.ngs-carousel--static .ngs-carousel__slide { width: calc((100% - 3 * var(--ngs-carousel-gap, 16px)) / 4) !important; }
}
.ngs-carousel--static .ngs-carousel__arrow,
.ngs-carousel--static .ngs-carousel__pagination { display: none; }

/* ---------- AJAX Search: [ngs_search_bar] / [ngs_search_icon] ---------- */
.ngs-search { position: relative; }
.ngs-search-bar {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--ngs-search-bar-bg, #fdf6ec);
	border: var(--ngs-search-bar-border-width, 1px) solid var(--ngs-search-bar-border-color, #e8ddc9);
	border-radius: var(--ngs-search-bar-radius, 100px);
	padding: var(--ngs-search-bar-padding-v, 12px) var(--ngs-search-bar-padding-h, 20px);
	margin: var(--ngs-search-bar-margin-top, 0) var(--ngs-search-bar-margin-right, 0) var(--ngs-search-bar-margin-bottom, 0) var(--ngs-search-bar-margin-left, 0);
}
.ngs-search-input {
	flex: 1 1 auto;
	min-width: 0;
	/* !important guards against theme/WooCommerce default text-input styling (its own border,
	   background, box-shadow, border-radius) showing through as a second box nested inside
	   the pill — the bar's fill should come only from .ngs-search-bar above. */
	border: none !important;
	outline: none !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
	margin: 0;
	width: 100%;
	font-family: var(--ngs-search-placeholder-font, inherit);
	font-size: var(--ngs-search-text-size, 15px);
	color: var(--ngs-search-text-color, #1a1a1a);
}
.ngs-search-input:focus { border: none !important; outline: none !important; box-shadow: none !important; }
.ngs-search-input::placeholder {
	font-family: var(--ngs-search-placeholder-font, inherit);
	color: var(--ngs-search-text-color, #1a1a1a);
	opacity: 0.55;
}
.ngs-search-clear,
.ngs-search-submit {
	/* `all: unset !important` wipes out any theme/global button styling (border, background,
	   padding, box-shadow, appearance, line-height, font, outline...) in one guaranteed-to-win
	   declaration, regardless of how specific the theme's own button selector is — the same
	   root cause as the earlier "rectangle inside the input" issue, just on these buttons
	   instead. Everything the button actually needs is then re-declared below, also flagged
	   !important so a later, more specific theme rule can't reintroduce the problem piecemeal. */
	all: unset !important;
	box-sizing: border-box !important;
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-left: 10px !important;
	cursor: pointer !important;
	color: var(--ngs-search-icon-color, #a0522d) !important;
}
.ngs-search-clear svg,
.ngs-search-submit svg {
	width: var(--ngs-search-icon-size, 20px) !important;
	height: var(--ngs-search-icon-size, 20px) !important;
	display: block !important;
}
.ngs-search-clear { display: none !important; }
.ngs-search.has-value .ngs-search-clear { display: inline-flex !important; }

/* Results dropdown — shared by both shortcodes; for [ngs_search_icon] this sits inside the
   already-portaled popup, so no extra positioning/portal logic is needed for it specifically. */
.ngs-search-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 20;
	background: var(--ngs-search-dropdown-bg, #ffffff);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
	overflow: hidden;
	max-height: 70vh;
	overflow-y: auto;
}
.ngs-search-dropdown.is-visible { display: block; }
.ngs-search-empty { padding: 20px; text-align: center; color: var(--ngs-search-result-name-color, #1a1a1a); opacity: 0.7; }
.ngs-search-suggested-label {
	padding: 10px 16px 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ngs-search-result-price-color, #a0522d);
}

.ngs-search-result {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ngs-search-result__link {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
}
.ngs-search-result__thumb {
	flex-shrink: 0;
	width: var(--ngs-search-thumb-size, 56px);
	height: var(--ngs-search-thumb-size, 56px);
	object-fit: cover;
	border-radius: 6px;
	background: #f2f2f2;
}
.ngs-search-result__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ngs-search-result__name {
	color: var(--ngs-search-result-name-color, #1a1a1a);
	font-size: var(--ngs-search-result-name-size, 15px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ngs-search-highlight {
	background: transparent;
	color: var(--ngs-search-highlight-color, #a0522d);
	font-weight: 700;
}
.ngs-search-result__price {
	color: var(--ngs-search-result-price-color, #a0522d);
	font-size: var(--ngs-search-result-price-size, 14px);
}
.ngs-search-result__price del { opacity: 0.55; margin-right: 4px; }

/* Overrides .ngs-add-to-cart-icon's fixed square icon-button sizing (see product card rules
   above) — the search "Add" button reuses that class only for its click behavior/JS, not its
   default square-icon look; this restyles it as the text pill shown in the reference design. */
.ngs-search-result__add {
	flex-shrink: 0;
	width: auto;
	height: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ngs-search-add-bg, #a0522d);
	color: var(--ngs-search-add-color, #ffffff);
	border: none;
	border-radius: var(--ngs-search-add-radius, 100px);
	padding: var(--ngs-search-add-padding-v, 8px) var(--ngs-search-add-padding-h, 18px);
	margin: 0 0 0 var(--ngs-search-add-margin-left, 12px);
	font-family: var(--ngs-search-add-font, inherit);
	font-size: var(--ngs-search-add-font-size, 13px);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}
.ngs-search-result__add.is-added { background: #1f7a3d; color: #fff; }

.ngs-search-view-all {
	display: block;
	text-align: center;
	padding: 14px 16px;
	color: var(--ngs-search-result-price-color, #a0522d);
	font-size: var(--ngs-search-result-name-size, 15px);
	text-decoration: none;
}
.ngs-search-view-all:hover { text-decoration: underline; }

/* ---- [ngs_search_icon]: toggle button + centered popup ---- */
.ngs-search-icon-toggle {
	/* See the comment on .ngs-search-clear/.ngs-search-submit above — same defensive reset,
	   since this is a <button> too and was showing up as a bare bordered box on sites whose
	   theme applies its own default button chrome (border/background/padding) at a specificity
	   this rule wasn't previously guarding against. */
	all: unset !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	color: var(--ngs-search-icon-color, #a0522d) !important;
}
.ngs-search-icon-toggle svg {
	width: var(--ngs-search-icon-size, 20px) !important;
	height: var(--ngs-search-icon-size, 20px) !important;
	display: block !important;
}

.ngs-search-overlay {
	position: fixed !important;
	inset: 0 !important;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 200ms ease;
	z-index: 9998;
}
.ngs-search-overlay.is-open { opacity: 1; visibility: visible; }

.ngs-search-popup {
	position: fixed !important;
	top: 80px;
	left: 50%;
	transform: translateX(-50%) translateY(-12px);
	width: min(600px, 92vw);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 200ms ease, transform 200ms ease;
	z-index: 9999;
}
.ngs-search-popup.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.ngs-search-popup__inner { display: flex; align-items: flex-start; gap: 12px; }
.ngs-search-popup .ngs-search { flex: 1 1 auto; min-width: 0; }
.ngs-search-popup-close {
	all: unset !important;
	box-sizing: border-box !important;
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-top: 2px !important;
	cursor: pointer !important;
	color: var(--ngs-search-close-icon-color, #333) !important;
}
.ngs-search-popup-close svg {
	width: var(--ngs-search-close-icon-size, 22px) !important;
	height: var(--ngs-search-close-icon-size, 22px) !important;
	display: block !important;
}
body.ngs-search-popup-open { overflow: hidden; }

@media (max-width: 599px) {
	.ngs-search-popup { top: 60px; width: 94vw; }
}

/* =========================================================
   Card Style 4 — full-bleed image, sale badge, wishlist + share circles overlapping the
   image, title, swatches, price row, large circular "+" add-to-cart button
   ========================================================= */
.ngs-card--style4 {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ngs-style4-card-bg, #ffffff);
	border: var(--ngs-style4-card-border-width, 1px) solid var(--ngs-style4-card-border-color, #eeeeee);
	border-radius: var(--ngs-style4-radius, 20px);
	margin: var(--ngs-style4-card-margin, 0px);
	overflow: hidden;
	box-sizing: border-box;
}
.ngs-card--style4 .ngs-card__media { aspect-ratio: 4 / 3.3; }

.ngs-style4-sale-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--ngs-style4-sale-badge-bg, #f0d9c8);
	color: var(--ngs-style4-sale-badge-color, #b5451b);
	font-size: var(--ngs-style4-sale-badge-size, 13px);
	font-weight: 700;
	padding: var(--ngs-style4-sale-badge-padding, 8px);
	border-radius: 10px;
	z-index: 3;
	line-height: 1;
}

/* Wishlist + share circles — a single flex row anchored bottom-right of the image, so if
   share is hidden (or a custom SVG is a different size) the heart just reflows next to the
   edge instead of leaving a gap. */
.ngs-style4-icons {
	position: absolute;
	right: var(--ngs-style4-icon-offset-right, 14px);
	bottom: var(--ngs-style4-icon-offset-bottom, 14px);
	display: flex;
	align-items: center;
	gap: var(--ngs-style4-icon-gap, 8px);
	z-index: 3;
}
.ngs-style4-icon-btn {
	width: var(--ngs-style4-icon-circle-size, 38px);
	height: var(--ngs-style4-icon-circle-size, 38px);
	border-radius: 50%;
	background: var(--ngs-style4-icon-bg, #ffffff);
	color: var(--ngs-style4-icon-color, #1a1a1a);
	border: none;
	padding: 0;
	flex-shrink: 0;
	box-sizing: border-box;
}
.ngs-style4-icon-btn svg {
	width: var(--ngs-style4-icon-size, 18px);
	height: var(--ngs-style4-icon-size, 18px);
}
.ngs-style4-icon-btn.ngs-wishlist-toggle.is-active svg { fill: var(--ngs-wishlist-icon-active-color, currentColor); }

.ngs-card--style4 .ngs-card__info {
	position: relative;
	padding: var(--ngs-style4-card-padding, 18px);
	display: flex;
	flex-direction: column;
	flex: 1;
	margin: 0;
}
.ngs-card--style4 .ngs-card__title {
	color: var(--ngs-style4-title-color, #1a1a2e) !important;
	font-family: var(--ngs-style4-title-font, inherit) !important;
	font-size: var(--ngs-style4-title-size, 20px) !important;
	font-weight: 700 !important;
	text-transform: none;
	margin-top: var(--ngs-style4-title-margin-top, 12px);
}
.ngs-card--style4 .ngs-swatches { margin-top: 10px; }
.ngs-card--style4 .ngs-swatch--color { border-radius: 50%; border: none; width: 16px; height: 16px; min-width: 16px; padding: 0; }

.ngs-style4-bottom-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: var(--ngs-style4-price-margin-top, 10px);
}
.ngs-style4-price-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.ngs-style4-price-old {
	text-decoration: line-through;
	color: var(--ngs-style4-price-old-color, #9a9a9a) !important;
	font-family: var(--ngs-style4-price-font, inherit) !important;
	font-size: var(--ngs-style4-price-old-size, 15px) !important;
}
.ngs-card--style4 .ngs-card__price {
	color: var(--ngs-style4-price-color, #111111) !important;
	font-family: var(--ngs-style4-price-font, inherit) !important;
	font-size: var(--ngs-style4-price-size, 24px) !important;
	font-weight: 800 !important;
}

.ngs-style4-plus {
	flex-shrink: 0;
	margin-right: var(--ngs-style4-plus-margin-right, 0px);
	margin-bottom: var(--ngs-style4-plus-margin-bottom, 0px);
	width: var(--ngs-style4-plus-size, 56px);
	height: var(--ngs-style4-plus-size, 56px);
	border-radius: 50%;
	background: var(--ngs-style4-plus-bg, #b5451b);
	color: var(--ngs-style4-plus-color, #ffffff);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	padding: 0;
	box-sizing: border-box;
}
.ngs-style4-plus svg {
	width: var(--ngs-style4-plus-icon-size, 24px);
	height: var(--ngs-style4-plus-icon-size, 24px);
	display: block;
}
.ngs-card--style4.ngs-card--oos .ngs-style4-plus { display: none; }

/* ---------- Related Products: belt-and-suspenders price sizing ---------- */
/* Same card markup/settings as the main grid, but WooCommerce wraps this section in its own
   ".related.products" markup that some themes specifically target with their own price styling.
   The rules above already use !important, which should already win regardless of the theme's
   selector specificity — this block adds a second layer with a more specific, later-in-file
   selector (".ngs-related-products .ngs-card__price") so it also wins any tie against a theme
   rule that happens to use !important itself, which a plain specificity fight can't resolve. */
.ngs-related-products .ngs-card__price,
.ngs-related-products .ngs-card__title {
	font-size: var(--ngs-price-size, 13px) !important;
}
.ngs-related-products .ngs-card__title { font-size: var(--ngs-title-size, 13px) !important; }
.ngs-related-products .ngs-card--style1 .ngs-card__price { font-size: var(--ngs-style1-price-size, 17px) !important; }
.ngs-related-products .ngs-card--style1 .ngs-card__title { font-size: var(--ngs-style1-title-size, 18px) !important; }
.ngs-related-products .ngs-style2-price .ngs-card__price { font-size: var(--ngs-style2-price-size, 20px) !important; }
.ngs-related-products .ngs-card--style2 .ngs-card__title { font-size: var(--ngs-style2-title-size, 16px) !important; }
.ngs-related-products .ngs-card--style3 .ngs-card__price { font-size: var(--ngs-style3-price-size, 15px) !important; }
.ngs-related-products .ngs-card--style3 .ngs-card__title { font-size: var(--ngs-style3-title-size, 17px) !important; }
.ngs-related-products .ngs-card--style4 .ngs-card__price { font-size: var(--ngs-style4-price-size, 24px) !important; }
.ngs-related-products .ngs-card--style4 .ngs-card__title { font-size: var(--ngs-style4-title-size, 20px) !important; }