@import url('https://fonts.googleapis.com/css2?family=Istok+Web:wght@400;700&family=Vollkorn:wght@400;500;600;700;800;900&display=swap');

/* ── Tokens ── */
.kfi-pg, .kfi-sl-wrap {
	--kfi-blue:      #0B4DA2;
	--kfi-blue-dk:   #083D82;
	--kfi-blue-lt:   #E8F0FD;
	--kfi-gold:      #B87C00;
	--kfi-red:       #C8102E;
	--kfi-green:     #0A7A45;
	--kfi-ink:       #0F172A;
	--kfi-sub:       #64748B;
	--kfi-border:    #E2E8F0;
	--kfi-border-h:  #BAD0F5;
	--kfi-bg-card:   #FFFFFF;
	--kfi-r:         18px;
	font-family: 'Istok Web', system-ui, sans-serif;
	box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

/* ═══════════════════════════════════════════════
   GRID
═══════════════════════════════════════════════ */
.kfi-pg {
	max-width: 1400px;
	margin: 0 auto;
	padding: 48px 24px 60px;
}

.kfi-grid {
	display: grid;
	grid-template-columns: repeat(var(--kfi-pc-columns, 4), 1fr);
	gap: 24px;
	min-height: 120px;
}
.kfi-grid.kfi-pc-loading { opacity: .4; pointer-events: none; }
.kfi-pc-empty { grid-column:1/-1; text-align:center; padding:60px 20px; color:#aaa; font-size:14px; }

/* ═══════════════════════════════════════════════
   CARD  —  Premium Design v3.1.0
═══════════════════════════════════════════════ */
.kfi-pc {
	background: var(--kfi-bg-card);
	border-radius: var(--kfi-r);
	border: 1px solid var(--kfi-border);
	box-shadow: 0 2px 8px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.03);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	position: relative;
	transition: box-shadow .3s ease, transform .3s ease, border-color .25s;
}

/* Lift + premium shadow on hover */
.kfi-pc:hover {
	border-color: var(--kfi-border-h);
	box-shadow: 0 16px 48px rgba(11,77,162,.16), 0 4px 16px rgba(15,23,42,.07);
	transform: translateY(-5px);
}

/* ✅ FIX 1: Top accent line — ALWAYS visible (not hover-only) */
.kfi-pc::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--kfi-blue) 0%, #4D93E8 100%);
	border-radius: var(--kfi-r) var(--kfi-r) 0 0;
	opacity: 1;              /* ALWAYS on */
	z-index: 10;
}
/* Intensify on hover */
.kfi-pc:hover::before {
	background: linear-gradient(90deg, #0B4DA2 0%, #6BAAF5 50%, #4D93E8 100%);
	height: 4px;
}

/* ── Image ── */
.kfi-img-wrap {
	position: relative;
	height: 260px;
	overflow: hidden;
	background: linear-gradient(145deg, #f4f8ff 0%, #eaf0fb 100%);
	flex-shrink: 0;
}

.kfi-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	padding: 0;
	display: block;
	transition: transform .5s cubic-bezier(.23,1,.32,1), opacity .35s ease;
}

.kfi-pc:not(.has-hover):hover .img-main {
	transform: scale(1.06);
}

.kfi-img-wrap .img-main  { opacity:1; position:relative; z-index:1; }
.kfi-pc.has-hover:hover .img-main  { opacity:0; }
.kfi-img-wrap .img-hover {
	position:absolute; inset:0; opacity:0; z-index:2;
	width:100%; height:100%;
	object-fit: cover; object-position: center; padding: 0;
}
.kfi-pc.has-hover:hover .img-hover { opacity:1; }

/* Soft fade at image bottom */
.kfi-img-wrap::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 36px;
	background: linear-gradient(to top, rgba(234,240,251,.55) 0%, transparent 100%);
	pointer-events: none;
	z-index: 3;
}

/* ── Badges top-left ── */
.kfi-badge-wrap { position:absolute; top:12px; left:12px; display:flex; gap:5px; z-index:5; }
.kfi-tag {
	font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
	padding:3px 10px; border-radius:100px;
	-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
	box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.kfi-tag.blue { background:rgba(224,236,255,.93); color:var(--kfi-blue); }
.kfi-tag.gold { background:rgba(255,246,210,.93); color:var(--kfi-gold); }
.kfi-tag.red  { background:rgba(255,235,238,.93); color:var(--kfi-red);  }
.kfi-tag.new  { background:rgba(220,253,236,.93); color:var(--kfi-green);}

/* ── Stock pill top-right ── */
.kfi-stock-pill {
	position:absolute; top:12px; right:12px;
	display:flex; align-items:center; gap:4px;
	font-size:10.5px; font-weight:700;
	padding:4px 11px; border-radius:100px;
	-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
	z-index:5;
	box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.kfi-stock-pill.yes { background:rgba(220,252,231,.96); color:var(--kfi-green); }
.kfi-stock-pill.no  { background:rgba(255,232,234,.96); color:var(--kfi-red);   }
.kfi-stock-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.kfi-stock-pill.yes .kfi-stock-dot { background:var(--kfi-green); }
.kfi-stock-pill.no  .kfi-stock-dot { background:var(--kfi-red);   }

/* ── Body ── */
.kfi-body { padding:18px 20px 20px; display:flex; flex-direction:column; flex-grow:1; }

/* Title */
.kfi-title {
	font-family:'Vollkorn',serif; font-size:20px; font-weight:900;
	color:var(--kfi-ink); margin:0 0 8px; line-height:1.28;
	letter-spacing:-.01em;
}

/* Description — 3 lines max */
.kfi-desc {
	font-family:'Istok Web',sans-serif; font-size:13px; line-height:1.65;
	color:var(--kfi-sub); margin:0 0 14px;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

/* ── Varieties — Glass Morphism pills (title ke neeche) ── */
.kfi-varieties {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
}
.kfi-variety-pill {
	font-family: 'Istok Web', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	padding: 4px 12px;
	border-radius: 100px;
	line-height: 1;
	/* Glass effect */
	background: rgba(255,255,255,0.55);
	-webkit-backdrop-filter: blur(10px) saturate(180%);
	backdrop-filter: blur(10px) saturate(180%);
	border: 1px solid rgba(255,255,255,0.75);
	box-shadow: 0 1px 6px rgba(11,77,162,.10), inset 0 1px 0 rgba(255,255,255,.8);
	color: var(--kfi-blue);
	transition: box-shadow .2s, transform .15s, background .2s;
	cursor: default;
}
.kfi-variety-pill:hover {
	background: rgba(255,255,255,0.82);
	box-shadow: 0 3px 12px rgba(11,77,162,.18), inset 0 1px 0 rgba(255,255,255,.9);
	transform: translateY(-1px);
}
/* Color variants matching badge color */
.kfi-varieties-blue .kfi-variety-pill {
	color: var(--kfi-blue);
	border-color: rgba(11,77,162,.18);
	background: rgba(232,240,253,0.65);
}
.kfi-varieties-gold .kfi-variety-pill {
	color: var(--kfi-gold);
	border-color: rgba(184,124,0,.18);
	background: rgba(255,248,225,0.65);
}
.kfi-varieties-red .kfi-variety-pill {
	color: var(--kfi-red);
	border-color: rgba(200,16,46,.18);
	background: rgba(255,238,241,0.65);
}

/* Weight pills — pinned to bottom above footer */
.kfi-weights {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: auto;
	margin-bottom: 16px;
}
.kfi-weight-pill {
	font-family:'Istok Web',sans-serif; font-size:11.5px; font-weight:600;
	padding:4px 13px; border-radius:100px; letter-spacing:.05px; line-height:1;
	transition: box-shadow .18s;
}
.kfi-weight-pill:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.kfi-weights-blue .kfi-weight-pill { color:var(--kfi-blue); background:#EBF1FD; border:1px solid #C5D9F8; }
.kfi-weights-gold .kfi-weight-pill { color:var(--kfi-gold); background:#FFF6DC; border:1px solid #F0D78A; }
.kfi-weights-red  .kfi-weight-pill { color:var(--kfi-red);  background:#FFEEF1; border:1px solid #F5B8C4; }

/* Footer */
.kfi-footer {
	margin-top: auto; padding-top: 16px;
	border-top: 1px solid var(--kfi-border);
}
.kfi-weights + .kfi-footer {
	margin-top: 0;
}

/* Button */
.kfi-btn {
	font-family:'Istok Web',sans-serif; font-size:13.5px; font-weight:600;
	padding:12px 22px; border-radius:10px; border:none; cursor:pointer;
	text-decoration:none; display:flex; align-items:center; justify-content:center; gap:7px;
	white-space:nowrap; line-height:1; width:100%;
	letter-spacing:.01em;
	transition: filter .2s, box-shadow .2s, transform .15s;
}
.kfi-btn:hover   { filter:brightness(1.09); box-shadow: 0 8px 22px rgba(0,0,0,.2); transform:translateY(-1px); }
.kfi-btn:active  { filter:brightness(.95); transform:translateY(0); }
.kfi-btn.blue { background:linear-gradient(135deg,#1462C4 0%,#083D82 100%); color:#fff; box-shadow:0 3px 10px rgba(11,77,162,.28); }
.kfi-btn.gold { background:linear-gradient(135deg,#D4960A 0%,#9A6800 100%); color:#fff; box-shadow:0 3px 10px rgba(184,124,0,.28); }
.kfi-btn.red  { background:linear-gradient(135deg,#D9102E 0%,#A00D25 100%); color:#fff; box-shadow:0 3px 10px rgba(200,16,46,.28); }
.kfi-btn-arrow { flex-shrink:0; transition:transform .2s; }
.kfi-btn:hover .kfi-btn-arrow { transform:translateX(4px); }

/* ── Pagination ── */
.kfi-pagination { display:flex; justify-content:center; align-items:center; gap:7px; margin-top:44px; }
.kfi-pag-btn {
	width:38px; height:38px; border-radius:10px;
	border:1.5px solid var(--kfi-border); background:#fff;
	cursor:pointer; font-size:15px; font-weight:500; color:#555;
	display:flex; align-items:center; justify-content:center;
	transition:all .18s; font-family:'Istok Web',sans-serif;
}
.kfi-pag-btn:hover:not(:disabled) { border-color:var(--kfi-blue); color:var(--kfi-blue); box-shadow:0 2px 10px rgba(11,77,162,.16); }
.kfi-pag-btn.active { background:var(--kfi-blue); color:#fff; border-color:var(--kfi-blue); box-shadow:0 4px 12px rgba(11,77,162,.28); }
.kfi-pag-btn:disabled { opacity:.3; cursor:default; }
.kfi-count { font-size:13px; color:#bbb; text-align:center; margin-top:10px; }

/* ═══════════════════════════════════════════════
   SLIDER  —  v3.1.0 (1-by-1 infinite + category pills)
═══════════════════════════════════════════════ */

/* ── Category Filter Pills ── */
.kfi-sl-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-bottom: 28px;
}
.kfi-sl-cat-pill {
	font-family: 'Istok Web', sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	padding: 7px 18px;
	border-radius: 100px;
	border: 1.5px solid var(--kfi-border);
	background: #fff;
	color: var(--kfi-sub);
	cursor: pointer;
	letter-spacing: .03em;
	transition: all .2s;
	white-space: nowrap;
}
.kfi-sl-cat-pill:hover {
	border-color: var(--kfi-blue-lt);
	background: var(--kfi-blue-lt);
	color: var(--kfi-blue);
}
.kfi-sl-cat-pill.active {
	background: var(--kfi-blue);
	color: #fff;
	border-color: var(--kfi-blue);
	box-shadow: 0 3px 10px rgba(11,77,162,.25);
}
.kfi-sl-cat-pill.cat-all     { }
.kfi-sl-cat-pill.cat-featured.active { background: linear-gradient(135deg,#D4960A,#9A6800); border-color:#B87C00; box-shadow:0 3px 10px rgba(184,124,0,.28); }
.kfi-sl-cat-pill.cat-new.active      { background: linear-gradient(135deg,#12A05C,#0A7A45); border-color:#0A7A45; box-shadow:0 3px 10px rgba(10,122,69,.28); }
.kfi-sl-cat-pill.cat-best_choice.active { background: linear-gradient(135deg,#D9102E,#A00D25); border-color:#C8102E; box-shadow:0 3px 10px rgba(200,16,46,.28); }

.kfi-sl-wrap {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 60px;
}

.kfi-sl-track-wrap {
	overflow: hidden;
	padding: 12px 4px 20px;
	margin: -12px -4px -20px;
}

/* ✅ FIX 2: Track holds cloned items for infinite loop — no transition during reposition */
.kfi-sl-track {
	display: flex;
	align-items: stretch;
	gap: 24px;
	transition: transform .5s cubic-bezier(.22,1,.36,1);
	will-change: transform;
}
.kfi-sl-track.no-anim {
	transition: none !important;
}

.kfi-sl-item {
	flex: 0 0 calc((100% - (var(--kfi-sl-cols,3) - 1) * 24px) / var(--kfi-sl-cols,3));
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* Prev/Next buttons */
.kfi-sl-btn {
	position: absolute; top: 42%; transform: translateY(-50%);
	width: 48px; height: 48px;
	background: #fff; border: 1.5px solid var(--kfi-border);
	border-radius: 50%; cursor: pointer; z-index: 10;
	font-size: 24px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	color: var(--kfi-blue);
	box-shadow: 0 4px 16px rgba(11,77,162,.14);
	transition: background .2s, color .2s, box-shadow .2s, transform .2s;
}
.kfi-sl-btn:hover {
	background: var(--kfi-blue); color: #fff;
	box-shadow: 0 6px 24px rgba(11,77,162,.32);
	transform: translateY(-50%) scale(1.06);
}
.kfi-sl-prev { left: 4px; }
.kfi-sl-next { right: 4px; }
.kfi-sl-btn:disabled { opacity: .3; cursor: default; }

/* Dots */
.kfi-sl-dots { display:flex; justify-content:center; gap:7px; margin-top:24px; }
.kfi-sl-dot {
	width:8px; height:8px; border-radius:50%;
	background: var(--kfi-border); border:none; cursor:pointer; padding:0;
	transition: background .25s, width .25s; flex-shrink:0;
}
.kfi-sl-dot.active { background: var(--kfi-blue); width:28px; border-radius:4px; }

/* ── Responsive ── */
@media (max-width:1100px) {
	.kfi-grid { grid-template-columns:repeat(min(3,var(--kfi-pc-columns,4)),1fr); }
	.kfi-img-wrap { height:240px; }
}
@media (max-width:820px) {
	.kfi-grid { grid-template-columns:repeat(2,1fr); gap:18px; }
	.kfi-img-wrap { height:220px; }
	.kfi-sl-item { --kfi-sl-cols:2 !important; }
	.kfi-sl-wrap { padding:0 48px; }
}
@media (max-width:560px) {
	.kfi-grid { grid-template-columns:1fr; }
	.kfi-pg { padding:28px 14px 44px; }
	.kfi-img-wrap { height:260px; }
	.kfi-sl-item { --kfi-sl-cols:1 !important; }
	.kfi-sl-wrap { padding:0 38px; }
	.kfi-sl-cats { gap:6px; }
	.kfi-sl-cat-pill { font-size:11.5px; padding:6px 14px; }
}
@media (prefers-reduced-motion:reduce) {
	.kfi-pc, .kfi-img-wrap img, .kfi-btn, .kfi-sl-track, .kfi-pc::before { transition:none !important; }
}