:root {
	/* The site's own nav/search font (confirmed via its Elementor
	   typography settings — Montserrat is what the header actually loads
	   and uses, not assumed). Declared explicitly wherever this plugin's
	   markup lives, rather than relying on inheritance: the search
	   dropdowns and the mega menu panel are appended straight to <body>,
	   outside any themed container that would otherwise supply it. */
	--ips-font: 'Montserrat', sans-serif;

	/* Brand palette — exactly these three, everything else is a neutral
	   (white/light gray) for structure, never a competing "brand" color. */
	--ips-navy: #0F2548;   /* headings, important text, dark UI */
	--ips-blue: #1E83BC;   /* buttons, links, active/selected states, icons, focus */
	--ips-black: #000000;  /* black accents, body copy */

	--ips-blue-tint: #eaf3f9;
	--ips-line: #e3e7ec;
	--ips-line-soft: #edf0f3;
	--ips-muted: #5b6673;
	--ips-faint: #94a0ac;
	--ips-surface: #ffffff;
	--ips-surface-soft: #f7f8fa;

	/* Square corners, flat solid fills — matches the live site's own
	   header/button treatment (solid black bar, square blue CTA), no
	   rounding anywhere in this file. */
	--ips-radius: 0;
	--ips-radius-sm: 0;
	--ips-shadow-sm: 0 1px 2px rgba(15, 37, 72, .06);
	--ips-shadow: 0 8px 20px rgba(15, 37, 72, .12);
}

/* Set once on every root container this plugin renders (including the
   ones appended straight to <body> — the search dropdowns and the mega
   menu panel sit outside any themed wrapper that would otherwise hand
   them a font) so the whole thing cascades from one place instead of
   needing a font-family on every single element. */
.ips-catalog,
.ips-search,
.ips-search__results,
.ips-search__results--header,
.ips-search__results--fixed,
.ips-mega-menu,
.ips-mega-menu-panel,
.ips-mobile-filter-trigger,
.ips-empty-state {
	font-family: var(--ips-font);
}

/* ================= page intro ================= */
.ips-breadcrumb { font-size: 12.5px; color: var(--ips-muted); margin-bottom: 10px; }
.ips-breadcrumb a { color: var(--ips-muted); text-decoration: none; }
.ips-breadcrumb a:hover { color: var(--ips-blue); }
.ips-breadcrumb__sep { margin: 0 6px; color: var(--ips-faint); }
.ips-breadcrumb span[aria-current] { color: var(--ips-navy); font-weight: 600; }
.ips-catalog__intro { padding: 20px 0 20px; border-bottom: 1px solid var(--ips-line); margin-bottom: 24px; }
.ips-catalog__title { margin: 0 0 8px; font-size: 30px; font-weight: 800; color: var(--ips-navy); line-height: 1.2; }
.ips-catalog__desc { margin: 0; max-width: 640px; font-size: 14.5px; line-height: 1.6; color: var(--ips-black); opacity: .75; }

/* ================= search box (header widget) ================= */
.ips-search { position: relative; max-width: 480px; }
.ips-search__input {
	width: 100% !important;
	padding: 12px 46px 12px 16px !important;
	border: 1px solid var(--ips-line) !important;
	border-radius: var(--ips-radius) !important;
	font-size: 14px;
	box-sizing: border-box;
	color: var(--ips-navy) !important;
	background: var(--ips-surface) !important;
	box-shadow: none !important;
	font-family: var(--ips-font) !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ips-search__input:focus { outline: none; border-color: var(--ips-blue) !important; box-shadow: 0 0 0 3px var(--ips-blue-tint) !important; }
.ips-search__submit {
	position: absolute !important; right: 6px; top: 50%; transform: translateY(-50%);
	background: var(--ips-blue) !important; color: #fff !important; border: none !important;
	border-radius: var(--ips-radius-sm) !important; width: 34px; height: 34px;
	display: flex !important; align-items: center; justify-content: center; cursor: pointer;
	box-shadow: none !important; transition: background .15s ease;
}
.ips-search__submit:hover { background: var(--ips-navy) !important; }

.ips-search__results, .ips-search__results--header, .ips-search__results--fixed {
	position: fixed; background: var(--ips-surface); color: var(--ips-navy);
	border: 1px solid var(--ips-line); border-radius: var(--ips-radius); box-shadow: var(--ips-shadow);
	z-index: 99999; max-height: 420px; overflow-y: auto; animation: ips-fade-in .12s ease;
}
@keyframes ips-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ips-search__list { list-style: none; margin: 0; padding: 6px; }
.ips-search__item a { display: flex; gap: 12px; align-items: center; padding: 8px; text-decoration: none; color: inherit; border-radius: var(--ips-radius-sm); }
.ips-search__item a:hover, .ips-search__item a:focus { background: var(--ips-surface-soft); }
.ips-search__item img, .ips-search__noimg { width: 42px; height: 42px; object-fit: cover; border-radius: var(--ips-radius-sm); background: var(--ips-surface-soft); flex: none; border: 1px solid var(--ips-line); }
.ips-search__item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ips-search__item-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ips-navy); }
.ips-search__item-sku { font-size: 11.5px; color: var(--ips-muted); }
.ips-search__see-all, .ips-search__empty { display: block; padding: 11px 14px; font-size: 13px; text-align: center; border-top: 1px solid var(--ips-line); color: var(--ips-blue); text-decoration: none; font-weight: 600; }
.ips-search__see-all:hover { color: var(--ips-navy); }
.ips-search__empty { color: var(--ips-muted); font-weight: 400; border-top: none; }
.ips-search__loading {
	display: flex; align-items: center; gap: 10px;
	padding: 14px; font-size: 13px; color: var(--ips-muted);
}
.ips-search__loading::before {
	content: ''; flex: none; width: 14px; height: 14px;
	border: 2px solid var(--ips-line); border-top-color: var(--ips-blue);
	border-radius: 50%; animation: ips-spin .7s linear infinite;
}

/* ================= mobile filter trigger ================= */
.ips-mobile-filter-trigger {
	display: none !important;
	align-items: center; justify-content: center; gap: 8px;
	width: 100% !important;
	margin-bottom: 16px !important;
	padding: 12px !important;
	background: var(--ips-navy) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--ips-radius) !important;
	font-size: 14px; font-weight: 600 !important;
	cursor: pointer;
	box-shadow: none !important;
	font-family: var(--ips-font) !important;
}

/* ================= layout ================= */
.ips-catalog-layout { display: flex; gap: 28px; align-items: flex-start; position: relative; }
.ips-catalog-layout__main { flex: 1 1 auto; min-width: 0; }
.ips-filters-overlay { display: none; }

/* ================= filter sidebar ================= */
.ips-filters {
	flex: 0 0 320px; max-width: 320px;
	background: var(--ips-surface);
	border: 1px solid var(--ips-line);
	box-shadow: var(--ips-shadow-sm);
	position: sticky; top: 16px;
	display: flex; flex-direction: column;
	overflow-x: hidden;
}

.ips-filters__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--ips-line); }
.ips-filters__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--ips-navy); }
.ips-filters__clear {
	display: inline-block !important; background: transparent !important; border: none !important;
	color: var(--ips-blue) !important; padding: 0 !important; font-size: 12.5px; font-weight: 600 !important;
	cursor: pointer; box-shadow: none !important; font-family: var(--ips-font) !important;
	text-decoration: underline !important; text-underline-offset: 2px;
}
.ips-filters__clear:hover { color: var(--ips-navy) !important; }
.ips-filters__drawer-close { display: none !important; }

.ips-filters__body { flex: 1 1 auto; }
.ips-filters__group { border-bottom: 1px solid var(--ips-line-soft); padding: 14px 18px; }
.ips-filters__group:last-child { border-bottom: none; }

.ips-filters__heading {
	display: flex !important; align-items: center; justify-content: space-between; width: 100% !important;
	margin: 0 0 8px; padding: 0 !important; background: none !important; border: none !important;
	font-size: 13px; font-weight: 700 !important; color: var(--ips-navy) !important; cursor: pointer;
	box-shadow: none !important; font-family: var(--ips-font) !important; text-align: left;
}
.ips-filters__chevron { color: var(--ips-faint); transition: transform .15s ease; flex: none; }
.ips-filters__group.is-open .ips-filters__chevron { transform: rotate(180deg); }
.ips-filters__group:not(.is-open) .ips-filters__heading { margin-bottom: 0; }
.ips-filters__group:not(.is-open) .ips-filters__list,
.ips-filters__group:not(.is-open) .ips-filters__top-category { display: none; }

/* Non-interactive heading above the Subcategory list — "you're browsing
   inside Pump Parts, here are its other subcategories" — not another
   checkbox row, so it's styled apart from .ips-filters__option (no
   checkbox gutter, smaller/uppercase so it reads as a label, not a
   selectable value). */
.ips-filters__top-category {
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: var(--ips-faint); padding: 0 2px 8px;
}

/* Single-column checkbox list for every facet — no per-facet search, no
   multi-column grid (Brand previously used a 2-column grid; removed), and
   no internal scrolling: every list renders in full at its natural height. */
.ips-filters__list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }

/* min-width: 0 on the flex row is what lets the label text actually wrap —
   without it, a flex item's default min-width:auto keeps it at its full
   intrinsic (unwrapped) width, which is what was pushing the sidebar wide
   and causing the horizontal scroll for a long option name. */
.ips-filters__option label { display: flex; align-items: flex-start; gap: 9px; min-width: 0; font-size: 13.5px; color: var(--ips-black); padding: 5px 2px; cursor: pointer; border-radius: var(--ips-radius-sm); }
.ips-filters__option label:hover { background: var(--ips-surface-soft); }
.ips-filters__option[hidden] { display: none; }
.ips-filters__option-label { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; word-break: break-word; line-height: 1.35; }

.ips-filters__option input[type=checkbox] {
	-webkit-appearance: none; appearance: none;
	box-sizing: border-box;
	display: inline-block;
	width: 16px; height: 16px; flex: none; margin: 2px 0 0;
	border: 1.5px solid #c3cbd4; background: #fff;
	position: relative; cursor: pointer;
	transition: background .12s ease, border-color .12s ease;
}
.ips-filters__option input[type=checkbox]:checked { background: var(--ips-blue); border-color: var(--ips-blue); }
.ips-filters__option input[type=checkbox]:checked::after {
	content: '';
	position: absolute; left: 4.5px; top: 1px;
	width: 4px; height: 8px;
	border: solid #fff; border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ips-filters__option input[type=checkbox]:disabled { border-color: var(--ips-line); cursor: not-allowed; }
.ips-filters__option input[type=checkbox]:focus-visible { outline: 2px solid var(--ips-blue); outline-offset: 1px; }

.ips-filters__count { margin-left: auto; flex: none; color: var(--ips-faint); font-size: 12px; font-variant-numeric: tabular-nums; }



.ips-filters__drawer-footer { display: none; }

/* ================= active filter chips ================= */
.ips-filters__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.ips-chip {
	display: inline-flex !important; align-items: center; gap: 8px;
	background: var(--ips-blue) !important; color: #fff !important; border: none !important;
	padding: 6px 8px 6px 12px !important; font-size: 12px;
	font-weight: 600 !important; cursor: pointer; box-shadow: none !important; font-family: var(--ips-font) !important; max-width: 100%;
}
.ips-chip:hover { background: var(--ips-navy) !important; }
.ips-chip__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.ips-chip__remove { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: rgba(255,255,255,.25); font-size: 13px; line-height: 1; flex: none; }

/* ================= results bar ================= */
.ips-results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ips-line); }
.ips-results-bar__count { font-size: 13.5px; font-weight: 600; color: var(--ips-navy); font-variant-numeric: tabular-nums; }
.ips-results-bar__controls { display: flex; align-items: center; gap: 14px; }
.ips-results-bar__sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ips-muted); }
.ips-sort-select { border: 1px solid var(--ips-line) !important; border-radius: var(--ips-radius-sm) !important; padding: 6px 10px !important; font-size: 13px; color: var(--ips-navy) !important; background: var(--ips-surface) !important; box-shadow: none !important; font-family: var(--ips-font) !important; }
.ips-sort-select:focus { outline: none; border-color: var(--ips-blue) !important; }

.ips-view-toggle { display: flex; border: 1px solid var(--ips-line); border-radius: var(--ips-radius-sm); overflow: hidden; }
.ips-view-toggle__btn { display: flex !important; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--ips-surface) !important; border: none !important; color: var(--ips-muted) !important; cursor: pointer; box-shadow: none !important; }
.ips-view-toggle__btn + .ips-view-toggle__btn { border-left: 1px solid var(--ips-line) !important; }
.ips-view-toggle__btn.is-active { background: var(--ips-blue) !important; color: #fff !important; }

/* ================= product grid ================= */
.ips-product-grid { position: relative; min-height: 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; transition: opacity .15s ease; }
.ips-product-grid[aria-busy="true"] { opacity: .6; pointer-events: none; }
.ips-product-grid[aria-busy="true"]::after {
	content: '';
	position: absolute; top: 40px; left: 50%; margin-left: -18px;
	width: 36px; height: 36px;
	border: 3px solid var(--ips-line);
	border-top-color: var(--ips-blue);
	border-radius: 50%; /* the one shape a spinner can't be square and still read as loading */
	animation: ips-spin .7s linear infinite;
}
@keyframes ips-spin { to { transform: rotate(360deg); } }

.ips-product-grid__error { grid-column: 1 / -1; font-size: 14px; color: #a3271f; background: #fdf1f0; padding: 32px 16px; text-align: center; border-radius: var(--ips-radius); }

.ips-product-card {
	position: relative;
	display: flex !important; flex-direction: column !important; gap: 5px;
	border: 1px solid var(--ips-line) !important; border-radius: var(--ips-radius) !important;
	padding: 16px !important; background: var(--ips-surface) !important; box-shadow: var(--ips-shadow-sm) !important;
	font-family: var(--ips-font) !important; transition: box-shadow .15s ease, border-color .15s ease;
}
.ips-product-card:hover { box-shadow: var(--ips-shadow) !important; border-color: #c9d2db !important; }

/* Wraps the real YITH WooCommerce Wishlist button (server-rendered via its
   shortcode, see class-ajax-filters.php render_products()) in the same
   30x30 top-right icon slot the old custom button used. Only sizing/
   position/text-hiding is overridden here — YITH's own CSS (already
   enqueued sitewide) still controls the icon itself and its added/removed
   states, so a wishlist that's already saved keeps showing correctly. */
.ips-product-card__fav {
	position: absolute !important; top: 12px; right: 12px; z-index: 2;
	display: flex !important; align-items: center; justify-content: center;
	width: 30px; height: 30px; background: var(--ips-surface) !important; border: 1px solid var(--ips-line) !important;
	transition: border-color .15s ease;
}
.ips-product-card__fav:hover { border-color: var(--ips-blue) !important; }
.ips-product-card__fav .yith-wcwl-add-to-wishlist,
.ips-product-card__fav .yith-wcwl-add-button,
.ips-product-card__fav .yith-wcwl-add-button > div { margin: 0 !important; padding: 0 !important; }
.ips-product-card__fav a.add_to_wishlist,
.ips-product-card__fav a.remove_from_wishlist {
	display: flex !important; align-items: center; justify-content: center;
	width: 100%; height: 100%; margin: 0 !important; padding: 0 !important;
}
.ips-product-card__fav a.add_to_wishlist span:not(.yith-wcwl-icon-svg),
.ips-product-card__fav .ajax-loading { display: none !important; }
.ips-product-card__fav svg { width: 16px !important; height: 16px !important; margin: 0 !important; }

/* Once added, YITH swaps the button's inner markup for a
   .yith-wcwl-wishlistaddedbrowse block: an icon+"Product added!" label
   (wrapped together in .feedback) plus a separate "Browse wishlist"
   link — .feedback used to be display:none here, which hid the added
   state's icon entirely along with the text it was meant to hide (there
   was no separate text-only wrapper to target instead). font-size:0
   collapses just the text node next to the icon without touching the
   icon's own explicit pixel width/height, and the browse-wishlist link
   is hidden the same as the "Add to wishlist" label already was — this
   stays the same 30x30 icon-only slot in both states. */
.ips-product-card__fav .feedback {
	display: flex !important; align-items: center; justify-content: center;
	width: 100%; height: 100%; font-size: 0; gap: 0;
}
.ips-product-card__fav .yith-wcwl-wishlistaddedbrowse > a { display: none !important; }

/* Added state: the whole 30x30 slot turns sky blue with a white heart,
   replacing the neutral not-yet-added state so it reads at a glance as
   "this one's saved" rather than relying on the icon's outline-vs-filled
   difference alone. ".exists" is the class YITH itself adds to
   .yith-wcwl-add-to-wishlist once the product is confirmed in the
   wishlist. */
.ips-product-card__fav:has(.yith-wcwl-add-to-wishlist.exists) {
	background: #87ceeb !important;
	border-color: #87ceeb !important;
	color: #fff !important;
}

.ips-product-card__media { display: block !important; margin-bottom: 6px; }
.ips-product-card__img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: var(--ips-radius-sm); background: var(--ips-surface-soft); }
.ips-product-card__img--placeholder { display: flex; align-items: center; justify-content: center; color: var(--ips-faint); border: 1px dashed var(--ips-line); }
.ips-product-card__title { font-size: 13.5px; font-weight: 700 !important; line-height: 1.35; color: var(--ips-navy) !important; text-decoration: none !important; }
.ips-product-card__title:hover { color: var(--ips-blue) !important; }
.ips-product-card__sku { font-size: 11.5px; color: var(--ips-muted) !important; font-variant-numeric: tabular-nums; }
.ips-product-card__tags { font-size: 11.5px; color: var(--ips-faint) !important; }
.ips-product-card__price { font-size: 14px; font-weight: 700 !important; color: var(--ips-navy) !important; margin-top: auto; padding-top: 6px; }
.ips-product-card__cta {
	display: flex !important; align-items: center; justify-content: center; gap: 6px; margin-top: 8px !important;
	border: 1px solid var(--ips-blue) !important; border-radius: var(--ips-radius-sm) !important; background: transparent !important;
	color: var(--ips-blue) !important; font-size: 12.5px; font-weight: 600 !important; padding: 8px 10px !important;
	text-decoration: none !important; box-shadow: none !important; font-family: var(--ips-font) !important; transition: background .15s ease, color .15s ease;
}
.ips-product-card__cta:hover { background: var(--ips-blue) !important; color: #fff !important; }

/* List view: same card markup, laid out as a horizontal row via flex overrides */
.ips-product-grid.is-list-view { display: flex; flex-direction: column; gap: 10px; }
.ips-product-grid.is-list-view .ips-product-card { flex-direction: row !important; align-items: center; gap: 16px; padding: 12px 16px !important; }
.ips-product-grid.is-list-view .ips-product-card__media { flex: 0 0 84px; margin-bottom: 0; }
.ips-product-grid.is-list-view .ips-product-card__img { width: 84px; height: 84px; }
.ips-product-grid.is-list-view .ips-product-card__title,
.ips-product-grid.is-list-view .ips-product-card__sku,
.ips-product-grid.is-list-view .ips-product-card__tags { flex: 1 1 auto; }
.ips-product-grid.is-list-view .ips-product-card__price,
.ips-product-grid.is-list-view .ips-product-card__cta { margin-top: 0 !important; flex: 0 0 auto; }
.ips-product-grid.is-list-view .ips-product-card__fav { position: static; margin-left: auto; order: 5; }

/* ================= empty state ================= */
.ips-empty-state { grid-column: 1 / -1; text-align: center; padding: 56px 24px; background: var(--ips-surface-soft); border-radius: var(--ips-radius); }
.ips-empty-state__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--ips-navy); }
.ips-empty-state__desc { margin: 0 0 18px; font-size: 14px; color: var(--ips-muted); }
.ips-empty-state__clear {
	display: inline-block !important; background: var(--ips-blue) !important; color: #fff !important; border: none !important;
	border-radius: var(--ips-radius-sm) !important; padding: 10px 20px !important; font-size: 13.5px; font-weight: 600 !important;
	cursor: pointer; box-shadow: none !important; font-family: var(--ips-font) !important;
}
.ips-empty-state__clear:hover { background: var(--ips-navy) !important; }

/* ================= skeleton loaders ================= */
.ips-skeleton { background: linear-gradient(90deg, var(--ips-line-soft) 25%, #e2e6ea 37%, var(--ips-line-soft) 63%); background-size: 400% 100%; animation: ips-shimmer 1.4s ease infinite; border-radius: var(--ips-radius-sm); }
@keyframes ips-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.ips-skeleton-card { border: 1px solid var(--ips-line); border-radius: var(--ips-radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ips-skeleton--img { aspect-ratio: 1; width: 100%; }
.ips-skeleton--line { height: 11px; }
.ips-skeleton-facet { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.ips-skeleton-facet .ips-skeleton--line { height: 12px; }

/* ================= pagination ================= */
.ips-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.ips-pagination__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ips-pagination__summary { font-size: 12.5px; color: var(--ips-muted); white-space: nowrap; }
.ips-pagination__page {
	border: 1px solid var(--ips-line) !important; background: var(--ips-surface) !important; color: var(--ips-navy) !important;
	padding: 7px 13px !important; border-radius: var(--ips-radius-sm) !important; box-shadow: none !important; cursor: pointer;
	font-size: 13px; font-family: var(--ips-font) !important; line-height: normal; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ips-pagination__page:hover { border-color: var(--ips-blue) !important; color: var(--ips-blue) !important; }
.ips-pagination__page.is-current { background: var(--ips-blue) !important; color: #fff !important; border-color: var(--ips-blue) !important; font-weight: 600 !important; }
.ips-pagination__page[disabled] { opacity: .4; cursor: not-allowed; }
.ips-pagination__nav { font-weight: 600 !important; color: var(--ips-navy) !important; }
.ips-pagination__ellipsis { padding: 7px 4px; color: var(--ips-faint); font-size: 13px; }

/* ================= mega menu (site nav dropdown — not part of the catalog page redesign) ================= */
.ips-mega-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 30px 0; background: var(--ips-surface); }
.ips-mega-menu__col { min-width: 0; padding: 0 30px; }
.ips-mega-menu__col:not(:first-child) { border-left: 1px solid var(--ips-line); }

.ips-mega-menu__title {
	margin: 0 0 4px; padding-bottom: 10px; border-bottom: 2px solid var(--ips-navy);
	font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ips-navy); font-weight: 700;
}
.ips-mega-menu__title a { color: inherit; text-decoration: none; display: block; }
.ips-mega-menu__title a:hover { color: var(--ips-blue); }
.ips-mega-menu__meta { display: block; font-size: 11px; font-weight: 400; text-transform: none; color: var(--ips-faint); letter-spacing: 0; margin-top: 4px; }

.ips-mega-menu__col ul { list-style: none; margin: 10px 0; padding: 0; }
.ips-mega-menu__col li a {
	display: block; padding: 6px 0 6px 2px; font-size: 13px; color: var(--ips-black); text-decoration: none;
	border-left: 2px solid transparent; transition: border-color .15s ease, color .15s ease, padding-left .15s ease;
}
.ips-mega-menu__col li a:hover { color: var(--ips-blue); border-left-color: var(--ips-blue); padding-left: 8px; }

.ips-mega-menu__brand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.ips-mega-menu__view-all {
	display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
	font-size: 12px; color: var(--ips-blue); text-decoration: none; font-weight: 700;
	transition: gap .15s ease;
}
.ips-mega-menu__view-all:hover { gap: 8px; color: var(--ips-navy); }

.ips-mega-menu__alpha { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 14px; }
.ips-mega-menu__alpha a {
	display: flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; font-size: 11px; font-weight: 600;
	color: var(--ips-muted); background: var(--ips-surface-soft); text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.ips-mega-menu__alpha a:hover { background: var(--ips-navy); color: #fff; }

.ips-mega-menu__note { margin-top: 20px; padding: 14px 16px; background: var(--ips-surface-soft); border-left: 3px solid var(--ips-blue); }
.ips-mega-menu__note strong { display: block; font-size: 12.5px; color: var(--ips-navy); margin-bottom: 6px; }
.ips-mega-menu__note p { margin: 0 0 12px; font-size: 12px; line-height: 1.55; color: var(--ips-muted); }
.ips-mega-menu__note-btn {
	display: inline-block; background: var(--ips-navy); color: #fff; text-decoration: none;
	font-size: 12.5px; font-weight: 600; padding: 9px 14px;
	transition: background .15s ease;
}
.ips-mega-menu__note-btn:hover,
.ips-mega-menu__note-btn:focus,
.ips-mega-menu__note-btn:active { background: var(--ips-blue) !important; color: #fff !important; }

@media (max-width: 900px) {
	.ips-mega-menu { grid-template-columns: 1fr 1fr; }
	.ips-mega-menu__col:nth-child(2n+1) { border-left: none; }
}

.ips-mega-menu-panel {
	position: absolute; left: 0; right: 0; z-index: 9998;
	border-top: 3px solid var(--ips-blue);
	box-shadow: var(--ips-shadow);
	animation: ips-mega-menu-in .15s ease;
}
.ips-mega-menu-panel .ips-mega-menu { max-width: 1280px; margin: 0 auto; }
@keyframes ips-mega-menu-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ================= responsive ================= */
/* Tablet: sidebar becomes non-sticky (still visible, just collapsible via
   its own accordions) and the grid drops to 2 columns. */
@media (max-width: 1023px) {
	.ips-product-grid { grid-template-columns: repeat(2, 1fr); }
	.ips-filters { position: static; max-height: none; }
}

/* Mobile: sidebar becomes a slide-in drawer triggered by "Filter & Sort";
   grid drops to 1 column. */
@media (max-width: 767px) {
	.ips-catalog { padding: 0 16px 40px; }
	.ips-catalog__title { font-size: 24px; }
	.ips-mobile-filter-trigger { display: flex !important; }
	.ips-product-grid { grid-template-columns: 1fr; }
	.ips-results-bar { flex-direction: column; align-items: flex-start; }

	.ips-catalog-layout { display: block; }
	.ips-filters {
		position: fixed !important; top: 0; right: -100%; bottom: 0; left: auto;
		width: 86%; max-width: 360px; max-height: none;
		border-radius: 0; border: none; z-index: 10001;
		transition: right .25s ease;
	}
	.ips-filters.is-drawer-open { right: 0; }
	.ips-filters__drawer-close { display: flex !important; align-items: center; justify-content: center; width: 30px; height: 30px; background: none !important; border: none !important; font-size: 22px; color: var(--ips-navy) !important; cursor: pointer; box-shadow: none !important; }
	.ips-filters__drawer-footer { display: block; padding: 14px 18px; border-top: 1px solid var(--ips-line); }
	.ips-filters__apply {
		display: block !important; width: 100% !important; padding: 12px !important; background: var(--ips-blue) !important;
		color: #fff !important; border: none !important; border-radius: var(--ips-radius) !important; font-size: 14px;
		font-weight: 600 !important; cursor: pointer; box-shadow: none !important; font-family: var(--ips-font) !important;
	}

	.ips-filters-overlay {
		display: none; position: fixed; inset: 0; background: rgba(15, 37, 72, .5); z-index: 10000;
	}
	.ips-filters.is-drawer-open ~ .ips-filters-overlay,
	.ips-catalog-layout:has(.ips-filters.is-drawer-open) .ips-filters-overlay { display: block; }

	body.ips-no-scroll { overflow: hidden; }

	.ips-product-grid.is-list-view .ips-product-card { flex-direction: column !important; align-items: stretch; }
	.ips-product-grid.is-list-view .ips-product-card__media { flex: none; }
	.ips-product-grid.is-list-view .ips-product-card__img { width: 100%; height: auto; }
}