/* =========================================================================
   KeepSeal Neo — Category Showcase (vitrine)
   Styles: split | stacked | spotlight | glass.  Light & dark (black type in
   light mode). Entrance reveal via frontend.js; hover motion here.
   ========================================================================= */
.ksn-showcase {
	--cs-ink: #000;
	--cs-muted: #4b5563;
	--cs-surface: var(--ksn-surface);
	--cs-line: var(--ksn-line);
	font-family: var(--ksn-font);
	display: flex; flex-direction: column; gap: 52px;
	max-width: 1280px; margin: 0 auto;
	position: relative;
}
/* the rounded panel = each .ksn-sc block; the animated FX layer sits behind its content */
.ksn-sc--hasbg { position: relative; isolation: isolate; overflow: hidden; }
.ksn-sc > .ksn-bgfx { position: absolute; inset: 0; z-index: -1; }
.ksn-sc--hasbg > .ksn-sc__hero,
.ksn-sc--hasbg > .ksn-sc__products { position: relative; z-index: 1; }
.ksn-dark .ksn-showcase,
html.ksn-dark .ksn-showcase,
.ksn-showcase.ksn-dark { --cs-ink: #e9eef6; --cs-muted: #98a4b6; }

.ksn-sc { --cs-pcols: 4; }

/* ---- hero head ---- */
.ksn-sc__title { margin: 0; font-weight: 900; font-size: 1.6rem; color: var(--cs-ink); line-height: 1.3; }
.ksn-sc__count { color: var(--cs-muted); font-weight: 600; font-size: 0.9rem; }
.ksn-sc__btn {
	display: inline-flex; align-items: center; gap: 8px; width: max-content;
	padding: 12px 22px; border-radius: 999px; text-decoration: none; color: #fff; font-weight: 800;
	background: linear-gradient(120deg, var(--ksn-primary), var(--ksn-accent));
	box-shadow: 0 14px 28px -14px rgba(var(--ksn-primary-rgb), .6);
	transition: transform .2s ease, gap .2s ease, box-shadow .2s ease;
}
.ksn-sc__btn:hover { transform: translateY(-2px); gap: 13px; box-shadow: 0 20px 40px -16px rgba(var(--ksn-accent-rgb), .7); }
[dir="ltr"] .ksn-sc__btn svg { transform: scaleX(-1); }

/* ---- hero media ---- */
.ksn-sc__media { border-radius: 20px; overflow: hidden; background: var(--ksn-surface-2); display: grid; place-items: center; }
.ksn-sc__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.ksn-sc:hover .ksn-sc__media img { transform: scale(1.05); }

/* ---- category name (title) shapes ---- */
.ksn-showcase--title-pill .ksn-sc__title,
.ksn-showcase--title-rect .ksn-sc__title,
.ksn-showcase--title-stamp .ksn-sc__title,
.ksn-showcase--title-outline .ksn-sc__title { display: inline-block; padding: 8px 20px; line-height: 1.4; }
.ksn-showcase--title-pill .ksn-sc__title  { background: var(--ksn-primary); color: #fff; border-radius: 999px; }
.ksn-showcase--title-rect .ksn-sc__title  { background: var(--ksn-primary); color: #fff; border-radius: 10px; }
.ksn-showcase--title-stamp .ksn-sc__title { background: var(--ksn-primary); color: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.ksn-showcase--title-outline .ksn-sc__title { background: transparent; border: 2px solid currentColor; border-radius: 10px; }
.ksn-showcase--title-underline .ksn-sc__title { display: inline-block; padding-bottom: 6px; border-bottom: 3px solid var(--ksn-heat); }

/* ---- promo badges (per category) ---- */
.ksn-sc__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ksn-sc__tag { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px; font-weight: 800; font-size: 0.8rem; line-height: 1; color: #fff; }
/* colour variants */
.ksn-sc__tag--primary  { background: var(--ksn-primary); }
.ksn-sc__tag--heat     { background: var(--ksn-heat); }
.ksn-sc__tag--success  { background: #16a34a; }
.ksn-sc__tag--gradient { background: linear-gradient(120deg, var(--ksn-primary), var(--ksn-accent)); }
.ksn-sc__tag--outline  { background: transparent; color: inherit; border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent); }
.ksn-sc__tag--glass    { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
/* three customizable slots (overridden by the Style-tab colour controls) */
.ksn-sc__tag--c1 { background: #6d28d9; color: #fff; }
.ksn-sc__tag--c2 { background: #0ea5e9; color: #fff; }
.ksn-sc__tag--c3 { background: #db2777; color: #fff; }
/* shapes (chosen in settings) */
.ksn-showcase--tag-pill .ksn-sc__tag    { border-radius: 999px; }
.ksn-showcase--tag-rounded .ksn-sc__tag { border-radius: 10px; }
.ksn-showcase--tag-square .ksn-sc__tag  { border-radius: 0; }
.ksn-showcase--tag-stamp .ksn-sc__tag   { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%); }

/* ---- products grid ---- */
.ksn-sc__products { display: grid; grid-template-columns: repeat(var(--cs-pcols), minmax(0, 1fr)); gap: 16px; }
/* when using the real archive product card, give cards room to breathe */
.ksn-sc__products--archive { gap: 18px; align-items: start; }

/* ---- products horizontal scroll (slider) ---- */
.ksn-sc__products--scroll {
	display: flex; grid-template-columns: none; gap: 16px;
	overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
	padding-bottom: 12px; -webkit-overflow-scrolling: touch;
	scrollbar-width: thin; scrollbar-color: rgba(var(--ksn-primary-rgb), .5) transparent;
}
.ksn-sc__products--scroll > * { flex: 0 0 var(--cs-cardw, 235px); width: var(--cs-cardw, 235px); scroll-snap-align: start; }
.ksn-sc__products--scroll::-webkit-scrollbar { height: 8px; }
.ksn-sc__products--scroll::-webkit-scrollbar-thumb { background: rgba(var(--ksn-primary-rgb), .5); border-radius: 999px; }
.ksn-sc__products--scroll::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 600px) { .ksn-sc__products--scroll > * { flex-basis: 70vw; width: 70vw; } }

/* ---- "view all" button pinned to the (inline-end) left of the header box ---- */
.ksn-sc__head .ksn-sc__btn { margin-inline-start: auto; }
.ksn-sc__product {
	display: flex; flex-direction: column; gap: 9px; text-decoration: none; color: var(--cs-ink);
	padding: 10px; border-radius: 16px;
	transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease;
}
.ksn-sc__pimg { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--ksn-surface-2); }
.ksn-sc__pimg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.ksn-sc__pname { font-weight: 700; font-size: 0.9rem; line-height: 1.5; color: var(--cs-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ksn-sc__pprice { font-weight: 800; font-size: 0.92rem; color: var(--cs-ink); margin-top: auto; }
.ksn-sc__pprice del { color: var(--cs-muted); font-weight: 500; font-size: 0.8em; margin-inline-start: 6px; }
.ksn-sc__pprice ins { text-decoration: none; }

/* product card variants */
.ksn-showcase--pcard-soft .ksn-sc__product { background: var(--cs-surface); box-shadow: 0 10px 28px -16px rgba(13,27,52,.25); }
.ksn-dark .ksn-showcase--pcard-soft .ksn-sc__product { box-shadow: 0 12px 30px -18px rgba(0,0,0,.7); }
.ksn-showcase--pcard-bordered .ksn-sc__product { border: 1px solid var(--cs-line); }

/* hover effects */
.ksn-showcase--hover-lift .ksn-sc__product:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -22px rgba(13,27,52,.4); }
.ksn-dark .ksn-showcase--hover-lift .ksn-sc__product:hover { box-shadow: 0 26px 50px -22px rgba(0,0,0,.8); }
.ksn-showcase--hover-zoom .ksn-sc__product:hover .ksn-sc__pimg img { transform: scale(1.09); }
.ksn-showcase--hover-tilt .ksn-sc__product:hover { transform: translateY(-4px) rotate(-1.2deg); }

/* =========================== STYLE: split ============================ */
.ksn-showcase--split .ksn-sc { display: grid; grid-template-columns: 330px 1fr; gap: 30px; align-items: center; }
.ksn-showcase--split .ksn-sc__hero { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ksn-showcase--split .ksn-sc__media { width: 100%; aspect-ratio: 4 / 3; }
.ksn-showcase--split .ksn-sc__title { font-size: 1.75rem; }

/* =========================== STYLE: stacked ========================== */
.ksn-showcase--stacked .ksn-sc { display: flex; flex-direction: column; gap: 22px; }
.ksn-showcase--stacked .ksn-sc__hero {
	position: relative; isolation: isolate; display: flex; align-items: flex-end;
	min-height: 200px; padding: 26px; border-radius: 22px; overflow: hidden;
	background: linear-gradient(135deg, var(--ksn-primary), var(--ksn-accent));
}
.ksn-showcase--stacked .ksn-sc__media { position: absolute; inset: 0; z-index: -2; border-radius: 0; background: transparent; }
.ksn-showcase--stacked .ksn-sc__hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(7,11,18,.85), rgba(7,11,18,.15)); }
.ksn-showcase--stacked .ksn-sc__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; width: 100%; }
.ksn-showcase--stacked .ksn-sc__title { color: #fff; font-size: 1.9rem; }
.ksn-showcase--stacked .ksn-sc__count { color: rgba(255,255,255,.85); }

/* =========================== STYLE: spotlight ======================== */
.ksn-showcase--spotlight .ksn-sc {
	position: relative; isolation: isolate; color: #fff;
	padding: 34px; border-radius: 26px; overflow: hidden;
}
.ksn-showcase--spotlight .ksn-sc__media { position: absolute; inset: 0; z-index: -2; border-radius: 0; background: transparent; }
.ksn-showcase--spotlight .ksn-sc--hasimg::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(7,11,18,.9), rgba(7,11,18,.5)); }
.ksn-showcase--spotlight .ksn-sc__hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.ksn-showcase--spotlight .ksn-sc__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ksn-showcase--spotlight .ksn-sc__title { color: #fff; font-size: 1.9rem; }
.ksn-showcase--spotlight .ksn-sc__count { color: rgba(255,255,255,.82); }
.ksn-showcase--spotlight .ksn-sc__product { background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ksn-showcase--spotlight .ksn-sc__pname,
.ksn-showcase--spotlight .ksn-sc__pprice { color: #fff; }
.ksn-showcase--spotlight .ksn-sc__pprice del { color: rgba(255,255,255,.6); }

/* =========================== STYLE: glass ============================ */
.ksn-showcase--glass .ksn-sc {
	position: relative; isolation: isolate;
	padding: 26px; border-radius: 26px; overflow: hidden;
}

/* default panel colour (low specificity via :where so the panel-bg control,
   classic colour OR gradient, always overrides it) */
:where(.ksn-showcase--glass, .ksn-showcase--spotlight) .ksn-sc { background-color: #0f1b30; }
.ksn-showcase--glass .ksn-sc__media { position: absolute; inset: 0; z-index: -2; border-radius: 0; background: transparent; }
.ksn-showcase--glass .ksn-sc--hasimg::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8,12,20,.32); }
.ksn-showcase--glass .ksn-sc__hero {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 22px;
	padding: 16px 20px; border-radius: 18px; color: #fff;
	background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
	border: 1px solid rgba(255,255,255,.25);
}
.ksn-showcase--glass .ksn-sc__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ksn-showcase--glass .ksn-sc__title { color: #fff; }
.ksn-showcase--glass .ksn-sc__count { color: rgba(255,255,255,.85); }
.ksn-showcase--glass .ksn-sc__product { background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.2); }
.ksn-showcase--glass .ksn-sc__pname,
.ksn-showcase--glass .ksn-sc__pprice { color: #fff; }
.ksn-showcase--glass .ksn-sc__pprice del { color: rgba(255,255,255,.6); }

/* =========================== RESPONSIVE ============================== */
@media (max-width: 900px) {
	.ksn-showcase--split .ksn-sc { grid-template-columns: 1fr; gap: 20px; }
	.ksn-showcase--split .ksn-sc__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
	.ksn-showcase { gap: 36px; }
	.ksn-sc__title { font-size: 1.4rem !important; }
}

/* ---- no featured image ---- */
.ksn-showcase--noimg .ksn-sc__media { display: none; }
.ksn-showcase--noimg.ksn-showcase--split .ksn-sc { grid-template-columns: 1fr; }
/* image-driven layouts keep their brand-gradient background even without an image */

/* ---- view-all button styles ---- */
.ksn-showcase--btn-solid .ksn-sc__btn { background: var(--ksn-primary); }
.ksn-showcase--btn-outline .ksn-sc__btn { background: transparent; color: inherit; border: 2px solid currentColor; box-shadow: none; }
.ksn-showcase--btn-glass .ksn-sc__btn { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ksn-showcase--btn-stamp .ksn-sc__btn { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.ksn-showcase--btn-link .ksn-sc__btn { background: transparent; color: inherit; box-shadow: none; padding-inline: 4px; }
.ksn-showcase--btn-link .ksn-sc__btn:hover { transform: none; gap: 13px; }