/* 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);
	font-weight: var(--ngs-title-weight, 400);
	font-family: var(--ngs-title-font, inherit);
	font-size: var(--ngs-title-size, 13px);
	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 {
	color: var(--ngs-price-color, #b08a3e);
	font-size: var(--ngs-price-size, 13px);
	font-weight: var(--ngs-title-weight, 400);
	font-family: var(--ngs-title-font, inherit);
	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);
	font-family: var(--ngs-style1-title-font, inherit);
	font-weight: 700;
	font-size: var(--ngs-style1-title-size, 18px);
	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);
	font-weight: 700;
	font-size: var(--ngs-style1-price-size, 17px);
	color: var(--ngs-style1-title-color, #0f172a);
	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; font-family: var(--ngs-style2-title-font, inherit); font-size: var(--ngs-style2-title-size, 16px); 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); font-weight: 700; font-size: var(--ngs-style2-price-size, 20px); 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); font-family: var(--ngs-style3-title-font, inherit); text-transform: none; font-weight: 700; font-size: var(--ngs-style3-title-size, 17px); margin-top: var(--ngs-style3-title-margin-top, 0); }
.ngs-card--style3 .ngs-card__price { font-family: var(--ngs-style3-title-font, inherit); font-size: var(--ngs-style3-price-size, 15px); 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);
	font-family: var(--ngs-style4-title-font, inherit);
	font-size: var(--ngs-style4-title-size, 20px);
	font-weight: 700;
	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);
	font-family: var(--ngs-style4-price-font, inherit);
	font-size: var(--ngs-style4-price-old-size, 15px);
}
.ngs-card--style4 .ngs-card__price {
	color: var(--ngs-style4-price-color, #111111);
	font-family: var(--ngs-style4-price-font, inherit);
	font-size: var(--ngs-style4-price-size, 24px);
	font-weight: 800;
}

.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; }