.kx-wrap{width:100%;font-family:Arial,Helvetica,sans-serif;box-sizing:border-box;padding:10px 0 20px}
.kx-tabs{display:flex;gap:28px;overflow-x:auto;margin-bottom:24px;scrollbar-width:none}
.kx-tabs::-webkit-scrollbar{display:none}
.kx-tab{background:none;border:none;padding:10px 2px 14px;font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent;transition:color .2s,border-color .2s}
.kx-carousel{position:relative}
.kx-track{display:flex;gap:18px;overflow-x:auto;padding:6px 2px 10px;scrollbar-width:none}
.kx-track::-webkit-scrollbar{display:none}
.kx-arrow{position:absolute;top:40%;width:40px;height:40px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5}
.kx-prev{left:-18px}.kx-next{right:-18px}
.kx-card{flex:0 0 auto;width:230px;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.kx-card:hover{transform:translateY(-4px)}
.kx-imgbox{height:260px;padding:0;overflow:hidden;display:block;position:relative}
.kx-imgbox img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .4s}
.kx-card:hover .kx-imgbox img{transform:scale(1.06)}
.kx-icons{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;z-index:2}
.kx-icons .kxd-overlay-icon{width:46px;height:46px;border-radius:5px;background:transparent;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;text-decoration:none}
.kx-icons .kxd-overlay-icon svg{width:19px;height:19px;stroke:#0b2945;fill:none}
.kx-icons .kxd-wishlist-btn.kxd-wishlist-active svg{stroke:#b02030;fill:#b02030}
.kx-body{padding:12px 14px 14px;flex:1}
.kx-title{font-size:14px;font-weight:700;margin:0 0 4px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kx-title.kx-urdu{font-family:'Jameel Noori Nastaleeq',Arial,sans-serif;font-size:15px;line-height:1.8}
.kx-author{font-size:13px;margin:0 0 8px}
.kx-prices{font-size:14px}
.kx-old{text-decoration:line-through;margin-right:6px}
.kx-btn{display:block;width:100%;padding:13px 10px;font-size:14px;font-weight:700;text-align:center;border:none;cursor:pointer;transition:background .2s,color .2s}
.kx-btn:disabled{opacity:.7;cursor:default}
.kx-hidden{display:none!important}
.kx-msg{padding:30px 0;text-align:center;font-size:14px}
.kx-select{display:none;width:100%;padding:12px 14px;margin-bottom:20px;font-size:15px;font-weight:600;font-family:inherit;border-radius:8px;-webkit-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 14px center}
@media(max-width:600px){
  .kx-card{width:165px}.kx-imgbox{height:200px}.kx-arrow{display:none}
  .kx-tabs{display:none}.kx-select{display:block}
}
.kx-light{background:transparent}
.kx-light .kx-tabs{border-bottom:1px solid #e5e7eb}
.kx-light .kx-tab{color:#111827}
.kx-light .kx-tab:hover,.kx-light .kx-tab.kx-active{color:#14315c;border-bottom-color:#e0443e;background:transparent;border-radius:0}
.kx-light .kx-arrow{border:1px solid #e5e7eb;background:#fff;color:#14315c;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.kx-light .kx-arrow:hover{background:#14315c;color:#fff}
.kx-light .kx-card{border:1px solid #e5e7eb;background:#fff}
.kx-light .kx-card:hover{box-shadow:0 10px 26px rgba(0,0,0,.13);border-color:#e0443e}
.kx-light .kx-imgbox{background:#f3f4f6}
.kx-light .kx-title{color:#111827}
.kx-light .kx-author{color:#6b7280}
.kx-light .kx-old{color:#9ca3af}
.kx-light .kx-new{color:#14315c;font-weight:700;text-decoration:underline}
.kx-light .kx-btn{background:#14315c;color:#fff}
.kx-light .kx-btn:hover{background:#0d2244}
.kx-light .kx-msg{color:#6b7280}
.kx-light .kx-select{color:#14315c;background-color:#fff;border:1px solid #e5e7eb;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2314315c' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>")}
.kx-dark{background:transparent}
.kx-dark .kx-tabs{border-bottom:1px solid rgba(255,255,255,.14)}
.kx-dark .kx-tab{color:#fff}
.kx-dark .kx-tab:hover,.kx-dark .kx-tab.kx-active{color:#d9a53f;border-bottom-color:#d9a53f;background:transparent;border-radius:0}
.kx-dark .kx-arrow{border:1px solid rgba(255,255,255,.14);background:#14213a;color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.kx-dark .kx-arrow:hover{background:#d9a53f;color:#111;border-color:#d9a53f}
.kx-dark .kx-card{border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#14213a}
.kx-dark .kx-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.55);border-color:#d9a53f}
.kx-dark .kx-imgbox{background:#1a1a1c}
.kx-dark .kx-title{color:#fff}
.kx-dark .kx-author{color:#9aa3b2}
.kx-dark .kx-old{color:#9aa3b2}
.kx-dark .kx-new{color:#d9a53f;font-weight:700;text-decoration:underline}
.kx-dark .kx-btn{background:#0d1730;color:#fff;border-top:1px solid rgba(255,255,255,.14)}
.kx-dark .kx-btn:hover{background:#d9a53f;color:#111}
.kx-dark .kx-msg{color:#9aa3b2}
.kx-dark .kx-select{color:#fff;background-color:#14213a;border:1px solid rgba(255,255,255,.14);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d9a53f' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>")}

/* --- KitabX Core: server-rendered card structure (valid HTML, no nested links) --- */
.kx-imglink{display:block;width:100%;height:100%}
.kx-title a{color:inherit;text-decoration:none}
.kx-icons{pointer-events:none}.kx-icons>*{pointer-events:auto}
.kx-card .kx-btn{text-decoration:none;box-sizing:border-box}
.kx-panel[hidden]{display:none!important}
.kx-track{scroll-snap-type:x proximity}
.kx-card{scroll-snap-align:start}

/* --- Arrows removed; GPU marquee (no JavaScript work per frame) --- */
.kx-arrow{display:none!important}
.kx-carousel.kx-auto .kx-track{overflow:hidden;scroll-snap-type:none}
.kx-marquee{display:flex;width:max-content;will-change:transform;animation:kx-scroll var(--kx-dur,60s) linear infinite}
.kx-marquee[data-dir="right"]{animation-direction:reverse}
.kx-half{display:flex;gap:var(--kx-gap,18px);padding-right:var(--kx-gap,18px);flex:0 0 auto}
.kx-carousel.kx-auto:hover .kx-marquee,.kx-carousel.kx-auto:focus-within .kx-marquee{animation-play-state:paused}
@keyframes kx-scroll{to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.kx-marquee{animation:none}.kx-carousel.kx-auto .kx-track{overflow-x:auto}}

/* Nastaliq glyphs reach below the line box: give titles room so nothing is clipped */
.kx-title{padding:.2em 0 .5em}
.kx-title.kx-urdu{line-height:2.1}