/* ============================================================
   ASIF TRADERS — LANDING page catalogue ("Shop by Category")
   Featured-card language applied to the category rail: corner
   count chip, round arrow, photo media, serif name, description,
   "Best price via quote" + round orange button, centre card
   emphasised, arrows + dots.
   ============================================================ */
.kc-wrap{position:relative}
.kc-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:22px 4px 26px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.kc-track::-webkit-scrollbar{display:none}
.kc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;
  background:#fff;border:1px solid rgba(43,43,43,.14);color:#3A3A3A;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 10px 22px -16px rgba(43,43,43,.5);transition:.18s}
.kc-arrow:hover{background:#FC6F20;border-color:#FC6F20;color:#fff}
.kc-arrow.prev{left:-6px}
.kc-arrow.next{right:-6px}

.kc-card{position:relative;flex:0 0 312px;scroll-snap-align:center;display:flex;flex-direction:column;background:#FFFCF7;
  border:1px solid rgba(43,43,43,.08);border-radius:18px;padding:12px 12px 0;transition:transform .28s ease,box-shadow .28s ease,
  border-color .28s ease,background .28s ease}
.kc-card:hover{border-color:rgba(252,111,32,.42);box-shadow:0 24px 44px -32px rgba(43,43,43,.62)}
.kc-card.is-active{background:#fff;transform:scale(1.035);z-index:3;box-shadow:0 34px 54px -36px rgba(43,43,43,.66)}
.kc-card.is-active .kc-body{min-height:104px}

.kc-media{position:relative;height:186px;border-radius:14px;overflow:hidden;background:#FDF6EE}
.kc-media img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;padding:7px;transition:transform .45s ease}
.kc-card:hover .kc-media img{transform:scale(1.04)}
.kc-badge{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--font-d);font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;background:rgba(255,252,247,.94);color:#8A3B0C;border-radius:999px;padding:5px 10px}
.kc-go{position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;border-radius:50%;background:rgba(255,252,247,.94);
  border:1px solid rgba(43,43,43,.08);display:grid;place-items:center;color:#6B6B6B;transition:.18s}
.kc-card:hover .kc-go{background:#FC6F20;border-color:#FC6F20;color:#fff;transform:translateX(2px)}

.kc-body{padding:14px 4px 0}
.kc-kicker{font-family:var(--font-d);font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#B4450F}
.kc-name{display:block;font-family:var(--font-b);font-weight:700;font-size:16px;line-height:1.3;color:#1A1A1A;margin:7px 0 6px}
.kc-card.is-active .kc-name{font-family:"Playfair Display",Georgia,serif;font-size:19px}
.kc-desc{font-size:12px;line-height:1.5;color:#8A8A8A;min-height:36px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kc-foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding:12px 4px 14px;border-top:1px dashed rgba(43,43,43,.14);
  margin-top:14px}
.kc-count{font-family:var(--font-d);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8A8A8A}

.kc-dots{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:2px}
.kc-dots button{width:8px;height:8px;border-radius:50%;background:#E2D3BE;border:none;padding:0;cursor:pointer;transition:.2s}
.kc-dots button.on{background:#FC6F20;transform:scale(1.25)}

@media (max-width:1024px){
  .kc-card{flex:0 0 268px}
  .kc-media,.kc-card.is-active .kc-media{height:168px}
}
@media (max-width:860px){
  .kc-track{gap:14px;padding:16px 4px 20px}
  .kc-arrow{width:38px;height:38px}
  .kc-card{flex:0 0 250px;border-radius:16px}
  .kc-media,.kc-card.is-active .kc-media{height:152px}
}
@media (max-width:640px){
  .kc-track{gap:11px;padding:14px 5px 18px}
  .kc-card{flex:0 0 45vw;padding:9px 9px 0;border-radius:14px}
  .kc-card.is-active{transform:scale(1.05)}
  .kc-media,.kc-card.is-active .kc-media{height:112px;border-radius:11px}
  .kc-badge{font-size:8px;padding:3px 7px;top:7px;left:7px}
  .kc-go{width:24px;height:24px;top:7px;right:7px}
  .kc-go svg{width:11px;height:11px}
  .kc-body{padding:10px 3px 0}
  .kc-kicker{font-size:8.5px}
  .kc-name{font-size:12.5px;margin:5px 0 4px}
  .kc-card.is-active .kc-name{font-size:13.5px}
  .kc-desc{font-size:10.5px;min-height:0}
  .kc-foot{padding:9px 3px 11px;margin-top:11px}
  .kc-count{font-size:9.5px}
  .kc-arrow{display:none}
}