/* =========================================================================
   KeepSeal Neo — Product archive (modern cards + grid + pagination)
   Card styles: elevated | classic | overlay | compact. Light & dark via tokens.
   ========================================================================= */
.ksn-pgrid-wrap { width: 100%; }

/* whole-widget background (light / dark / custom) */
.ksn-pgrid-wrap--filled {
	padding: 32px;
	border-radius: calc(var(--ksn-radius) + 12px);
}
.ksn-pgrid-wrap--light { background: var(--ksn-bg); }
.ksn-pgrid-wrap--dark { background: var(--ksn-primary-dark); }
.ksn-pgrid {
	--ksn-cols: 4;
	--ksn-gap: 22px;
	display: grid;
	grid-template-columns: repeat(var(--ksn-cols), minmax(0, 1fr));
	gap: var(--ksn-gap);
}
.ksn-pgrid__empty { padding: 40px; text-align: center; color: var(--ksn-muted); }

/* =========================================================================
   Base card
   ========================================================================= */
.ksn-pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: calc(var(--ksn-radius) + 8px);
	background: var(--ksn-surface);
	transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease;
}
.ksn-pcard:hover { transform: translateY(-8px); }

/* ---- media ---- */
.ksn-pcard__media {
	position: relative;
	aspect-ratio: 1;
	border-radius: calc(var(--ksn-radius) + 8px);
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 50% 12%, rgba(var(--ksn-primary-rgb), .06), transparent 70%),
		var(--ksn-surface-2);
}
.ksn-dark .ksn-pcard__media,
html.ksn-dark .ksn-pcard__media {
	background-color: var(--ksn-surface-2);
	background-image:
		linear-gradient(rgba(120,160,220,.11) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120,160,220,.11) 1px, transparent 1px),
		radial-gradient(120% 90% at 50% 12%, rgba(120,160,220,.14), transparent 70%);
	background-size: 26px 26px, 26px 26px, auto;
}
.ksn-pcard__imglink { display: block; width: 100%; height: 100%; position: relative; }
.ksn-pcard__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.ksn-pcard--hover-zoom:hover .ksn-pcard__img { transform: scale(1.07); }
.ksn-pcard__img--second { position: absolute; inset: 0; opacity: 0; }
.ksn-pcard--hover-second:hover .ksn-pcard__img:not(.ksn-pcard__img--second) { opacity: 0; }
.ksn-pcard--hover-second:hover .ksn-pcard__img--second { opacity: 1; }

/* shine sweep on hover */
.ksn-pcard__shine {
	position: absolute; inset: 0;
	background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.25) 50%, transparent 60%);
	background-size: 250% 100%;
	background-position: 160% 0;
	transition: background-position .7s ease;
	pointer-events: none;
}
.ksn-pcard:hover .ksn-pcard__shine { background-position: -160% 0; }

/* ---- wishlist heart ---- */
.ksn-pcard__fav {
	position: absolute;
	top: 12px; inset-inline-start: 12px;
	z-index: 3;
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border: none;
	border-radius: 50%;
	background: var(--ksn-surface);
	color: var(--ksn-muted);
	cursor: pointer;
	box-shadow: 0 6px 16px -8px rgba(13,27,52,.4);
	transition: transform .18s ease, color .18s ease, background .18s ease;
}
.ksn-pcard__fav:hover { transform: scale(1.12); color: var(--ksn-accent); }
.ksn-pcard__fav.is-fav { color: #fff; background: var(--ksn-accent); }
.ksn-pcard__fav.is-fav svg { fill: #fff; }

/* ---- badges ---- */
.ksn-pcard__badges {
	position: absolute;
	top: 12px; inset-inline-end: 12px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}
.ksn-pcard__badges .ksn-badge {
	border-radius: 999px;
	padding: 7px 15px;
	font-size: 0.95rem;
	font-weight: 900;
	box-shadow: 0 8px 18px -8px rgba(13,27,52,.45);
}
.ksn-badge--attr { background: var(--ksn-primary-dark); color: #fff; }
.ksn-badge--sale { background: var(--ksn-accent); color: #fff; }
.ksn-badge--feat { background: var(--ksn-heat); color: #1a0c00; }
.ksn-badge--new  { background: #1d9e75; color: #fff; }
.ksn-badge--muted { background: var(--ksn-muted); color: #fff; }

/* ---- body ---- */
.ksn-pcard__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 16px 18px;
	flex: 1;
}
.ksn-pcard__cat {
	font-size: 0.76rem;
	font-weight: 800;
	color: var(--ksn-accent);
	text-decoration: none;
}
.ksn-pcard__cat:hover { color: var(--ksn-heat); }
.ksn-pcard__title { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.6; }
.ksn-pcard__title a {
	color: var(--ksn-ink);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ksn-pcard__title a:hover { color: var(--ksn-primary); }

/* clickable attribute chips */
.ksn-pcard__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ksn-chip-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ksn-muted);
	background: var(--ksn-surface-2);
	border: 1px solid var(--ksn-line);
	border-radius: 999px;
	text-decoration: none;
	transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
.ksn-chip-tag:hover {
	color: #fff;
	background: var(--ksn-primary);
	border-color: transparent;
	transform: translateY(-1px);
}

.ksn-pcard__rating .star-rating { font-size: 0.86rem; color: var(--ksn-heat); margin: 2px 0; }

.ksn-pcard__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 10px;
}
.ksn-pcard__price { font-weight: 900; font-size: 1.05rem; color: var(--ksn-ink); line-height: 1.3; }
.ksn-pcard__price del { color: var(--ksn-muted); font-weight: 500; font-size: 0.8rem; margin-inline-end: 5px; }
.ksn-pcard__price ins { text-decoration: none; color: var(--ksn-accent); }
.ksn-pcard__price .amount { white-space: nowrap; }

/* ---- add to cart: text button ---- */
.ksn-pcard__cart { flex: none; }
.ksn-pcard__cart .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 44px;
	padding: 0 16px;
	font-family: var(--ksn-font);
	font-weight: 800;
	font-size: 0.85rem;
	color: #fff;
	background: var(--ksn-primary);
	border: none;
	border-radius: 13px;
	cursor: pointer;
	text-decoration: none;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ksn-pcard__cart .button:hover {
	background: var(--ksn-accent);
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -12px rgba(var(--ksn-accent-rgb), .7);
}
.ksn-pcard__cart .added_to_cart {
	display: block; margin-top: 4px;
	font-size: 0.7rem; text-align: center;
	color: var(--ksn-primary); text-decoration: none;
}

/* ---- add to cart: icon "+" button ---- */
.ksn-pcard--cart-icon .ksn-pcard__cart .button {
	position: relative;
	width: 48px; height: 48px;
	padding: 0;
	font-size: 0;
	border-radius: 15px;
}
.ksn-pcard--cart-icon .ksn-pcard__cart .button::before {
	content: "+";
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
}
.ksn-pcard--cart-icon .ksn-pcard__cart .button.loading::before { content: "…"; }
.ksn-pcard--cart-icon .ksn-pcard__cart .button.added::before { content: "✓"; font-size: 20px; }

/* =========================================================================
   Style: elevated (default) — floating image card with a gap to the body
   ========================================================================= */
.ksn-pcard--elevated { background: transparent; }
.ksn-pcard--elevated .ksn-pcard__media { box-shadow: 0 24px 50px -26px rgba(13,27,52,.5); }
.ksn-pcard--elevated .ksn-pcard__body {
	margin: -28px 12px 0;
	position: relative;
	z-index: 2;
	background: var(--ksn-surface);
	border: 1px solid var(--ksn-line);
	border-radius: calc(var(--ksn-radius) + 6px);
	box-shadow: 0 18px 40px -26px rgba(13,27,52,.45);
}
.ksn-pcard--elevated:hover .ksn-pcard__media { box-shadow: 0 30px 60px -24px rgba(var(--ksn-primary-rgb),.5); }

/* =========================================================================
   Style: classic — full-bleed card, image then body, single border
   ========================================================================= */
.ksn-pcard--classic {
	border: 1px solid var(--ksn-line);
	overflow: hidden;
}
.ksn-pcard--classic .ksn-pcard__media { border-radius: 0; }
.ksn-pcard--classic:hover { box-shadow: var(--ksn-shadow); border-color: rgba(var(--ksn-primary-rgb), .3); }
.ksn-pcard--classic .ksn-pcard__badges { inset-inline: 12px auto; align-items: flex-start; }

/* =========================================================================
   Style: overlay — body sits over the image bottom with a scrim
   ========================================================================= */
.ksn-pcard--overlay { overflow: hidden; border: 1px solid var(--ksn-line); }
.ksn-pcard--overlay .ksn-pcard__media { aspect-ratio: 3 / 4; border-radius: 0; }
.ksn-pcard--overlay .ksn-pcard__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(8,16,32,.92) 8%, rgba(8,16,32,.45) 42%, transparent 70%);
}
.ksn-pcard--overlay .ksn-pcard__body {
	position: absolute;
	inset-inline: 0; bottom: 0;
	z-index: 3;
	padding: 16px 18px 18px;
}
.ksn-pcard--overlay .ksn-pcard__title a,
.ksn-pcard--overlay .ksn-pcard__price { color: #fff; }
.ksn-pcard--overlay .ksn-chip-tag { color: #e9eefb; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); }
.ksn-pcard--overlay .ksn-pcard__cat { color: var(--ksn-heat); }

/* =========================================================================
   Style: compact — tighter padding, smaller type
   ========================================================================= */
.ksn-pcard--compact { border: 1px solid var(--ksn-line); overflow: hidden; }
.ksn-pcard--compact .ksn-pcard__media { border-radius: 0; }
.ksn-pcard--compact .ksn-pcard__body { padding: 12px 12px 14px; gap: 6px; }
.ksn-pcard--compact .ksn-pcard__title { font-size: 0.9rem; }
.ksn-pcard--compact .ksn-pcard__price { font-size: 0.95rem; }
.ksn-pcard--compact .ksn-pcard__chips { display: none; }
.ksn-pcard--compact:hover { box-shadow: var(--ksn-shadow); }

/* =========================================================================
   Pagination
   ========================================================================= */
.ksn-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 36px;
}
.ksn-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 12px;
	border-radius: 13px;
	border: 1px solid var(--ksn-line);
	background: var(--ksn-surface);
	color: var(--ksn-ink);
	font-weight: 800;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.ksn-pagination .page-numbers:hover { border-color: var(--ksn-primary); transform: translateY(-2px); }
.ksn-pagination .page-numbers.current { background: var(--ksn-primary); border-color: var(--ksn-primary); color: #fff; }
.ksn-pagination .page-numbers.dots { border: none; background: transparent; }

/* =========================================================================
   Circular attribute badges (size / compatibility) — choosable corner
   ========================================================================= */
.ksn-cbadge {
	position: absolute;
	z-index: 5;
	overflow: hidden;
	text-align: center;
	border: 2px solid var(--ksn-surface);
	box-shadow: 0 12px 26px -10px rgba(13,27,52,.6);
	--ksn-cbadge-color: var(--ksn-primary);
}
.ksn-cbadge--compat { --ksn-cbadge-color: var(--ksn-accent); }
.ksn-cbadge--tr { top: 10px; inset-inline-end: 10px; }
.ksn-cbadge--tl { top: 10px; inset-inline-start: 10px; }
.ksn-cbadge--br { bottom: 10px; inset-inline-end: 10px; }
.ksn-cbadge--bl { bottom: 10px; inset-inline-start: 10px; }

/* shared top/bot parts */
.ksn-cbadge__top,
.ksn-cbadge__bot {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.05;
}
.ksn-cbadge__top { background: #fff; color: var(--ksn-primary-dark); font-weight: 900; }
.ksn-cbadge--compat .ksn-cbadge__top { color: var(--ksn-accent); }
.ksn-cbadge__bot { background: var(--ksn-cbadge-color); color: #fff; font-weight: 900; }

/* ---------- CIRCLE shape ---------- */
.ksn-cbadge--circle { border-radius: 50%; }
.ksn-cbadge--circle.ksn-cbadge--solid {
	width: 56px; height: 56px;
	display: grid; place-items: center;
	background: var(--ksn-cbadge-color);
	color: #fff;
}
.ksn-cbadge--circle.ksn-cbadge--solid b { font-size: 1.02rem; font-weight: 900; padding: 0 4px; line-height: 1.05; }
.ksn-cbadge--circle.ksn-cbadge--split { width: 74px; height: 74px; display: flex; flex-direction: column; }
.ksn-cbadge--circle.ksn-cbadge--split .ksn-cbadge__top { flex: 1; font-size: 0.7rem; padding: 5px 4px 0; }
.ksn-cbadge--circle.ksn-cbadge--split .ksn-cbadge__bot { flex: 1; font-size: 0.92rem; padding: 0 4px 5px; }

/* ---------- RECT shape (rounded pill) ---------- */
.ksn-cbadge--rect { border-radius: 999px; }
.ksn-cbadge--rect.ksn-cbadge--solid {
	height: 38px; padding: 0 16px;
	display: grid; place-items: center;
	background: var(--ksn-cbadge-color);
	color: #fff;
}
.ksn-cbadge--rect.ksn-cbadge--solid b { font-size: 0.96rem; font-weight: 900; white-space: nowrap; }
.ksn-cbadge--rect.ksn-cbadge--split { height: 40px; display: flex; flex-direction: row; }
.ksn-cbadge--rect.ksn-cbadge--split .ksn-cbadge__top { padding: 0 12px; font-size: 0.78rem; white-space: nowrap; }
.ksn-cbadge--rect.ksn-cbadge--split .ksn-cbadge__bot { padding: 0 14px; font-size: 0.92rem; white-space: nowrap; }

/* =========================================================================
   Style: stamp — a genuinely CUT bottom corner (like the bulk-CTA bar),
   with a subtle complementary heat top-accent.
   ========================================================================= */
.ksn-pcard--stamp {
	--ksn-cut: 30px;
	background: var(--ksn-surface);
	border-top: 3px solid var(--ksn-heat);   /* subtle complementary accent */
	border-radius: 0;
	overflow: hidden;
	/* true diagonal cut on the bottom-start corner (right in RTL) */
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ksn-cut)), calc(100% - var(--ksn-cut)) 100%, 0 100%);
}
.ksn-pcard--stamp .ksn-pcard__media { border-radius: 0; }
.ksn-pcard--stamp .ksn-pcard__body { padding-bottom: 22px; }
/* drop-shadow (unlike box-shadow) follows the clip-path, so the cut card is
   clearly defined even on a light background. Four 1px directional shadows
   trace a crisp stroke along the cut edge; the soft one adds depth. */
/* a single soft drop-shadow (follows the clip-path) — cheap, defines the cut */
.ksn-pcard--stamp { filter: drop-shadow(0 10px 18px rgba(13,27,52,.18)); }
.ksn-pcard--stamp:hover { border-top-color: var(--ksn-accent); filter: drop-shadow(0 18px 30px rgba(var(--ksn-primary-rgb), .3)); }
.ksn-dark .ksn-pcard--stamp,
html.ksn-dark .ksn-pcard--stamp { filter: drop-shadow(0 14px 24px rgba(0,0,0,.5)); }

/* =========================================================================
   Style: glass — frosted translucent card (great over a coloured section bg)
   ========================================================================= */
.ksn-pcard--glass {
	background: color-mix(in srgb, var(--ksn-surface) 55%, transparent);
	border: 1px solid rgba(255,255,255,.25);
	border-radius: calc(var(--ksn-radius) + 10px);
	overflow: hidden;
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	box-shadow: 0 22px 50px -28px rgba(13,27,52,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
.ksn-pcard--glass .ksn-pcard__media { background: rgba(255,255,255,.06); }
.ksn-dark .ksn-pcard--glass,
html.ksn-dark .ksn-pcard--glass { border-color: rgba(255,255,255,.12); }
.ksn-pcard--glass:hover { box-shadow: 0 30px 60px -26px rgba(13,27,52,.6), inset 0 1px 0 rgba(255,255,255,.4); }

/* =========================================================================
   Style: aurora — soft gradient glow behind the image + floating body
   ========================================================================= */
.ksn-pcard--aurora {
	background: var(--ksn-surface);
	border: 1px solid var(--ksn-line);
	border-radius: calc(var(--ksn-radius) + 12px);
	overflow: hidden;
}
.ksn-pcard--aurora .ksn-pcard__media {
	border-radius: 0;
	background:
		radial-gradient(80% 70% at 20% 0%, rgba(var(--ksn-primary-rgb), .16), transparent 60%),
		radial-gradient(80% 70% at 100% 30%, rgba(var(--ksn-heat-rgb), .18), transparent 60%),
		var(--ksn-surface-2);
}
.ksn-pcard--aurora::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto -1px;
	height: 4px;
	background: linear-gradient(90deg, var(--ksn-primary), var(--ksn-accent), var(--ksn-heat));
	z-index: 4;
}
.ksn-pcard--aurora:hover { box-shadow: 0 28px 56px -26px rgba(var(--ksn-primary-rgb), .5); transform: translateY(-8px); }

/* =========================================================================
   "Buy" button (-> product page)
   ========================================================================= */
.ksn-pcard__buy {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	height: 44px;
	padding: 0 18px;
	font-family: var(--ksn-font);
	font-weight: 800;
	font-size: 0.88rem;
	color: #fff;
	background: var(--ksn-primary);
	border-radius: 13px;
	text-decoration: none;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ksn-pcard__buy svg { width: 18px; height: 18px; }
.ksn-pcard__buy:hover {
	background: var(--ksn-accent);
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -12px rgba(var(--ksn-accent-rgb), .7);
}

/* =========================================================================
   AJAX pagination loader
   ========================================================================= */
.ksn-pgrid-wrap { position: relative; }
.ksn-pgrid-wrap.is-loading .ksn-pgrid { opacity: .35; pointer-events: none; transition: opacity .2s ease; }
.ksn-grid-loader {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	z-index: 10;
	background: color-mix(in srgb, var(--ksn-bg) 55%, transparent);
	backdrop-filter: blur(2px);
}
@keyframes ksn-grid-spin { to { transform: rotate(360deg); } }

/* =========================================================================
   Selectable loader styles (shared by AJAX paging; chosen in settings)
   ========================================================================= */

/* waves — induction rings collapsing inward (the hero motif) */
.ksn-loader--waves { position: relative; width: 84px; height: 84px; }
.ksn-loader--waves i {
	position: absolute; inset: 0; margin: auto;
	width: 100%; height: 100%;
	border-radius: 50%;
	border: 2px solid var(--ksn-heat);
	opacity: 0;
	transform: scale(1.6);
	animation: ksn-loader-in 1.8s linear infinite;
}
.ksn-loader--waves i:nth-child(2) { animation-delay: .45s; }
.ksn-loader--waves i:nth-child(3) { animation-delay: .9s; }
.ksn-loader--waves i:nth-child(4) { animation-delay: 1.35s; }
.ksn-loader--waves::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 14px; height: 14px; border-radius: 50%;
	background: var(--ksn-heat);
	box-shadow: 0 0 14px 3px rgba(var(--ksn-heat-rgb), .7);
}
@keyframes ksn-loader-in {
	0%   { transform: scale(1.6); opacity: 0; border-width: 1px; }
	20%  { opacity: .9; }
	100% { transform: scale(.28); opacity: 0; border-width: 3px; }
}

/* waves-out — ripples expanding outward */
.ksn-loader--waves-out { position: relative; width: 84px; height: 84px; }
.ksn-loader--waves-out i {
	position: absolute; inset: 0; margin: auto;
	width: 100%; height: 100%;
	border-radius: 50%;
	border: 2px solid var(--ksn-heat);
	opacity: 0;
	transform: scale(.28);
	animation: ksn-loader-out 1.8s linear infinite;
}
.ksn-loader--waves-out i:nth-child(2) { animation-delay: .45s; }
.ksn-loader--waves-out i:nth-child(3) { animation-delay: .9s; }
.ksn-loader--waves-out i:nth-child(4) { animation-delay: 1.35s; }
.ksn-loader--waves-out::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 14px; height: 14px; border-radius: 50%;
	background: var(--ksn-heat);
	box-shadow: 0 0 14px 3px rgba(var(--ksn-heat-rgb), .7);
}
@keyframes ksn-loader-out {
	0%   { transform: scale(.28); opacity: 0; border-width: 3px; }
	20%  { opacity: .9; }
	100% { transform: scale(1.6); opacity: 0; border-width: 1px; }
}

/* waves-logo — inward rings with the site logo in the centre */
.ksn-loader--waves-logo { position: relative; width: 100px; height: 100px; }
.ksn-loader--waves-logo i {
	position: absolute; inset: 0; margin: auto;
	width: 100%; height: 100%;
	border-radius: 50%;
	border: 2px solid var(--ksn-heat);
	opacity: 0;
	transform: scale(1.5);
	animation: ksn-loader-in 1.9s linear infinite;
}
.ksn-loader--waves-logo i:nth-child(2) { animation-delay: .48s; }
.ksn-loader--waves-logo i:nth-child(3) { animation-delay: .96s; }
.ksn-loader--waves-logo i:nth-child(4) { animation-delay: 1.44s; }
.ksn-loader--waves-logo .ksn-loader__logo {
	position: absolute; inset: 0; margin: auto;
	max-width: 50px; max-height: 50px;
	object-fit: contain;
	z-index: 2;
	animation: ksn-loader-pulse 1.9s ease-in-out infinite;
}
.ksn-loader--waves-logo .ksn-loader__dot {
	position: absolute; inset: 0; margin: auto;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--ksn-heat);
	box-shadow: 0 0 16px 3px rgba(var(--ksn-heat-rgb), .8);
}

/* rings — concentric spinning rings + heat core */
.ksn-loader--rings { position: relative; width: 64px; height: 64px; }
.ksn-loader--rings i { position: absolute; inset: 0; margin: auto; border-radius: 50%; }
.ksn-loader--rings i:nth-child(1) {
	width: 64px; height: 64px;
	border: 4px solid rgba(var(--ksn-primary-rgb), .18);
	border-top-color: var(--ksn-primary);
	animation: ksn-grid-spin .9s linear infinite;
}
.ksn-loader--rings i:nth-child(2) {
	width: 44px; height: 44px;
	border: 3px solid rgba(var(--ksn-heat-rgb), .2);
	border-bottom-color: var(--ksn-heat);
	animation: ksn-grid-spin 1.3s linear infinite reverse;
}
.ksn-loader--rings i:nth-child(3) {
	width: 16px; height: 16px;
	background: var(--ksn-heat);
	box-shadow: 0 0 12px 2px rgba(var(--ksn-heat-rgb), .7);
}

/* dots — three bouncing dots */
.ksn-loader--dots { display: flex; gap: 9px; }
.ksn-loader--dots i {
	width: 13px; height: 13px; border-radius: 50%;
	background: var(--ksn-primary);
	animation: ksn-loader-bounce 1s ease-in-out infinite;
}
.ksn-loader--dots i:nth-child(2) { background: var(--ksn-heat); animation-delay: .15s; }
.ksn-loader--dots i:nth-child(3) { background: var(--ksn-accent); animation-delay: .3s; }
@keyframes ksn-loader-bounce { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-13px); opacity: 1; } }

/* pulse — a single pulsing heat disc */
.ksn-loader--pulse { position: relative; width: 56px; height: 56px; }
.ksn-loader--pulse i {
	position: absolute; inset: 0; border-radius: 50%;
	background: radial-gradient(circle at 38% 32%, #fff, var(--ksn-heat) 80%);
	box-shadow: 0 0 22px 4px rgba(var(--ksn-heat-rgb), .7);
	animation: ksn-loader-pulse 1.2s ease-in-out infinite;
}
@keyframes ksn-loader-pulse { 0%,100% { transform: scale(.7); opacity: .6; } 50% { transform: scale(1); opacity: 1; } }

/* bars — equaliser bars */
.ksn-loader--bars { display: flex; gap: 6px; align-items: center; height: 46px; }
.ksn-loader--bars i {
	width: 7px; height: 100%; border-radius: 6px;
	background: var(--ksn-primary);
	animation: ksn-loader-bars 1s ease-in-out infinite;
}
.ksn-loader--bars i:nth-child(2) { background: var(--ksn-heat); animation-delay: .15s; }
.ksn-loader--bars i:nth-child(3) { animation-delay: .3s; }
.ksn-loader--bars i:nth-child(4) { background: var(--ksn-accent); animation-delay: .45s; }
@keyframes ksn-loader-bars { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
	.ksn-loader--waves i, .ksn-loader--rings i, .ksn-loader--dots i,
	.ksn-loader--pulse i, .ksn-loader--bars i { animation-duration: 0s !important; }
}

/* =========================================================================
   "View more" footer
   ========================================================================= */
.ksn-pgrid__more { display: flex; justify-content: center; margin-top: 34px; }
.ksn-pgrid__more-btn { gap: 8px; padding: 0.95rem 2rem; }
.ksn-pgrid__more-btn svg { transition: transform .2s ease; }
.ksn-pgrid__more-btn:hover svg { transform: translateX(-4px); }
[dir="ltr"] .ksn-pgrid__more-btn svg { transform: scaleX(-1); }
[dir="ltr"] .ksn-pgrid__more-btn:hover svg { transform: scaleX(-1) translateX(-4px); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) { .ksn-pgrid { --ksn-cols: 3; } }
@media (max-width: 768px)  { .ksn-pgrid { --ksn-cols: 2; } }
@media (max-width: 420px)  { .ksn-pgrid { --ksn-cols: 1; } }

/* =========================================================================
   Sort bar — shown above the products inside the grid wrap.
   ========================================================================= */
.ksn-sort {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin: 0 0 18px; padding: 8px;
	background: var(--ksn-surface); border: 1px solid var(--ksn-line);
	border-radius: calc(var(--ksn-radius) + 4px);
	font-family: var(--ksn-font);
}
.ksn-sort__label { font-weight: 800; font-size: 0.85rem; color: var(--ksn-muted); padding: 0 8px; }
.ksn-sort__item {
	position: relative; display: inline-flex; align-items: center; gap: 5px;
	padding: 8px 14px; border-radius: 999px; cursor: pointer; user-select: none;
	font-weight: 700; font-size: 0.85rem; color: var(--ksn-ink);
	background: var(--ksn-surface-2); border: 1px solid transparent;
	text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
a.ksn-sort__item:hover,
.ksn-sort__has-sub:hover { background: rgba(var(--ksn-primary-rgb), .12); color: var(--ksn-primary); }
.ksn-sort__item.is-active {
	background: var(--ksn-primary); color: #fff; border-color: transparent;
}
.ksn-sort__item.is-active svg { color: #fff; }
.ksn-sort__has-sub svg { transition: transform .2s ease; opacity: .8; }
.ksn-sort__has-sub:hover svg,
.ksn-sort__has-sub:focus-within svg { transform: rotate(180deg); }

/* submenu (size / thickness: asc + desc) */
.ksn-sort__sub {
	position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 30;
	min-width: 150px; padding: 6px;
	background: var(--ksn-surface); border: 1px solid var(--ksn-line);
	border-radius: 14px; box-shadow: var(--ksn-shadow);
	display: flex; flex-direction: column; gap: 2px;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.ksn-sort__has-sub:hover .ksn-sort__sub,
.ksn-sort__has-sub:focus-within .ksn-sort__sub {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.ksn-sort__sub a {
	display: flex; align-items: center; gap: 8px;
	padding: 9px 12px; border-radius: 9px; text-decoration: none;
	font-weight: 700; font-size: 0.84rem; color: var(--ksn-ink);
	transition: background .15s ease, color .15s ease;
}
.ksn-sort__sub a::before {
	content: ""; width: 0; height: 0; flex: none;
	border-inline-start: 4px solid transparent; border-inline-end: 4px solid transparent;
}
.ksn-sort__sub a:first-child::before { border-bottom: 6px solid currentColor; }
.ksn-sort__sub a:last-child::before  { border-top: 6px solid currentColor; }
.ksn-sort__sub a:hover { background: rgba(var(--ksn-primary-rgb), .12); color: var(--ksn-primary); }

/* dark */
.ksn-dark .ksn-sort,
.ksn-dark .ksn-sort__sub { background: var(--ksn-surface); border-color: rgba(255,255,255,.1); }
.ksn-dark .ksn-sort__item { background: rgba(255,255,255,.06); }

@media (max-width: 600px) {
	.ksn-sort { gap: 6px; padding: 6px; }
	.ksn-sort__label { width: 100%; padding: 4px 6px 0; }
	.ksn-sort__item { padding: 7px 11px; font-size: 0.8rem; }
}