/* Base */
:root{--kkpb-accent:#00C2A8;--kkpb-hover:#111}
.kkpb-wrap{max-width:1100px;margin:0 auto;padding:8px 12px 24px}
.kkpb-banner{position:relative;border-radius:16px;overflow:hidden;margin:8px 0 16px}
.kkpb-banner img{width:100%;height:190px;object-fit:cover;display:block}
.kkpb-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.0) 30%, rgba(0,0,0,.45) 100%)}
.kkpb-banner .kkpb-banner-title{position:absolute;left:16px;bottom:12px;color:#fff;font-weight:700;font-size:22px;text-shadow:0 2px 10px rgba(0,0,0,.35)}

/* Toolbar */
.kkpb-toolbar{display:flex;gap:8px;align-items:center;padding:6px 2px;margin:4px 0 10px}
.kkpb-toolbar input[type=search]{flex:1;border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px;font-size:14px}
.kkpb-toolbar select{border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px;font-size:14px;background:#fff}

/* Sticky filter pills */
.kkpb-pills{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(6px);padding:8px 4px;border-bottom:1px solid rgba(0,0,0,.06);margin-bottom:10px}
.kkpb-pills .kkpb-track{display:flex;gap:8px;overflow:auto;scroll-snap-type:x proximity;padding:2px 6px}
.kkpb-pills .pill{scroll-snap-align:start;white-space:nowrap;border-radius:999px;border:1px solid var(--kkpb-accent);padding:8px 14px;font-weight:600;font-size:14px;color:#111;flex:0 0 auto;background:#fff;transition:background .2s ease, color .2s ease}
.kkpb-pills .pill.is-active{background:var(--kkpb-accent);color:#fff}

/* Cards */
.kkpb-card{position:relative;background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.06);overflow:hidden;border:1px solid rgba(0,0,0,.06);transition:transform .2s ease, box-shadow .2s ease,border-color .2s ease}
.kkpb-card:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.10)}
.kkpb-card .hero{position:relative;height:120px;background:#f4f4f5;overflow:hidden}
.kkpb-card .hero img{width:100%;height:100%;object-fit:cover;display:block}
/* Logo inside the hero */
.kkpb-card .logo{position:absolute;left:12px;bottom:8px;width:56px;height:56px;border-radius:999px;border:3px solid #fff;overflow:hidden;box-shadow:0 6px 14px rgba(0,0,0,.18)}
.kkpb-card .logo img{width:100%;height:100%;object-fit:cover}
.kkpb-card .meta{padding:12px 12px 12px}
.kkpb-card .brand{font-size:16px;font-weight:700;margin-bottom:2px}
.kkpb-card .cats{opacity:.75;font-size:12px}
.kkpb-card a.kkpb-hit{position:absolute;inset:0;text-indent:-9999px}

/* Per-card accent + glow loop */
.kkpb-card{--kkpb-card-accent: var(--kkpb-accent,#00C2A8)}
.kkpb-card:hover{border-color: var(--kkpb-card-accent)}
.kkpb-card .glow{content:"";position:absolute;inset:-2px;border-radius:16px;background:conic-gradient(from 0deg, var(--kkpb-card-accent), transparent 30%, var(--kkpb-card-accent) 60%, transparent 85%);filter: blur(10px);opacity:0;pointer-events:none;transition:opacity .25s ease;animation:kkpb-rot 6s linear infinite}
.kkpb-card:hover .glow{opacity:.45}
@keyframes kkpb-rot{to{transform:rotate(1turn)}}

/* Product strip */
.kkpb-strip{display:grid;grid-auto-flow:column;grid-auto-columns:28%;gap:8px;overflow:auto;padding:10px 12px 14px}
.kkpb-strip .tile{background:#fafafa;border-radius:12px;border:1px solid rgba(0,0,0,.06);overflow:hidden}
.kkpb-strip .tile img{width:100%;height:100px;object-fit:cover;display:block}

/* Grid */
.kkpb-grid{display:grid;gap:12px}
@media (max-width: 480px){.kkpb-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width: 481px) and (max-width: 820px){.kkpb-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width: 821px){.kkpb-grid{grid-template-columns:repeat(4,1fr)}}


/* v2.5.4 mobile full-bleed sticky tabs + single-column and show-more */
.kkpb-fullbleed{ margin-left:-12px; margin-right:-12px; padding-left:12px; padding-right:12px; }
@media (max-width:639px){
  .kkpb-pills{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(6px); border-bottom:1px solid rgba(0,0,0,.06); }
  .kkpb-pills .kkpb-track{ padding:8px 2px; }
  .kkpb-pills .pill{ border:none; background:transparent; border-radius:0; font-weight:800; font-size:16px; color:#6b7280; padding:10px 14px; position:relative; }
  .kkpb-pills .pill.is-active{ color:#111; }
  .kkpb-pills .pill.is-active::after{ content:""; position:absolute; left:10px; right:10px; bottom:-6px; height:3px; border-radius:3px; background:var(--kkpb-accent,#00C2A8); }
  .kkpb-grid{ grid-template-columns:1fr !important; }
  .kkpb-card.is-collapsed{ display:none !important; }
}
.kkpb-more-wrap{ display:none; text-align:center; margin:8px 0 24px; }
.kkpb-more-toggle{ border:1px solid #e5e7eb; background:#fff; padding:10px 16px; border-radius:999px; font-weight:700; }
@media (max-width:639px){ .kkpb-more-wrap{ display:block; } }