/* ============================================================
   KNOW YOUR PRODUCTS — page-specific styles
   Loaded in addition to assets/style.css (shares its :root tokens)
   ============================================================ */

/* ── Category colour system ──────────────────────────────────
   Any category name is hashed client-side to one of 10 slots, so new
   categories introduced later automatically get a consistent colour
   without touching this stylesheet. */
.pc-kyp-cat-0 { --cat: #179d86; }
.pc-kyp-cat-1 { --cat: #1e6bdb; }
.pc-kyp-cat-2 { --cat: #123d5f; }
.pc-kyp-cat-3 { --cat: #c17a1f; }
.pc-kyp-cat-4 { --cat: #7a5cc4; }
.pc-kyp-cat-5 { --cat: #c1485a; }
.pc-kyp-cat-6 { --cat: #3f8f5b; }
.pc-kyp-cat-7 { --cat: #5c6b7a; }
.pc-kyp-cat-8 { --cat: #c2632a; }
.pc-kyp-cat-9 { --cat: #6a3fb5; }

/* ── Hero ─────────────────────────────────────────────────── */
.pc-kyp-hero {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 55%, var(--teal) 130%);
    color: #fff;
    padding: 3.6rem 0 3rem;
}
.pc-kyp-hero-inner { text-align: center; max-width: 760px; }
.pc-kyp-hero h1 { color: #fff; font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin: .8rem 0 1rem; }
.pc-kyp-hero-sub { color: rgba(255,255,255,.86); font-size: 1rem; max-width: 620px; margin: 0 auto 1.8rem; }
.pc-kyp-back { padding: .55rem 1rem; font-size: .82rem; }

/* ── Selector card ────────────────────────────────────────── */
.pc-kyp-selector { padding: 2.4rem 0 1rem; background: #fff; }
.pc-kyp-search-card {
    max-width: 640px; margin: -3.6rem auto 0; position: relative; z-index: 2;
    background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(16,35,62,.14); padding: 1.8rem 2rem 2rem;
}
.pc-kyp-search-label { display: block; font-size: .84rem; font-weight: 700; color: var(--navy); margin-bottom: .6rem; }
.pc-kyp-search-box { position: relative; }
.pc-kyp-search-ico { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
#kyp2-search {
    width: 100%; height: 52px; padding: 0 2.75rem 0 2.75rem; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); font-size: .95rem; font-family: inherit; color: var(--ink);
    background: var(--silver-xs); outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
#kyp2-search:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(23,157,134,.14); background: #fff; }
.pc-kyp-clear-btn {
    position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); width: 28px; height: 28px;
    border-radius: 50%; background: var(--silver-xs); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.pc-kyp-clear-btn:hover { background: var(--border); }

.pc-kyp-suggestions {
    position: absolute; z-index: 20; left: 20px; right: 20px; margin-top: .4rem;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: 0 18px 40px rgba(16,35,62,.16); max-height: 280px; overflow-y: auto;
    list-style: none; padding: .4rem;
}
.pc-kyp-suggestions li {
    padding: .68rem .9rem; border-radius: 10px; cursor: pointer; font-size: .9rem; color: var(--ink);
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
}
.pc-kyp-suggestions li mark { background: rgba(23,157,134,.18); color: var(--navy); border-radius: 3px; padding: 0 1px; }
.pc-kyp-suggestions li span.pc-kyp-sugg-tag { font-size: .72rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.pc-kyp-suggestions li:hover,
.pc-kyp-suggestions li.is-active { background: var(--silver-xs); }
.pc-kyp-suggestions .pc-kyp-sugg-empty { color: var(--muted); cursor: default; font-size: .85rem; }

.pc-kyp-or { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0 1rem; color: var(--muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pc-kyp-or::before, .pc-kyp-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.pc-kyp-select-wrap { position: relative; }
.pc-kyp-select-wrap select {
    width: 100%; height: 52px; padding: 0 2.75rem 0 1rem; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); font-size: .92rem; font-family: inherit; color: var(--ink);
    background: var(--silver-xs); appearance: none; cursor: pointer; outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.pc-kyp-select-wrap select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(23,157,134,.14); background: #fff; }
.pc-kyp-sel-arrow { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

/* ── Empty / not-found states ─────────────────────────────── */
.pc-kyp-state { padding: 2.6rem 0 4rem; background: #fff; }
.pc-kyp-state-inner { max-width: 560px; margin: 0 auto; text-align: center; }
.pc-kyp-state-icon {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1.2rem; background: var(--silver-xs);
    display: flex; align-items: center; justify-content: center; color: var(--teal);
    animation: kyp2-float 3.6s ease-in-out infinite;
}
.pc-kyp-state-icon-warn { color: #b3261e; background: var(--error-bg); animation: none; }
.pc-kyp-state h2 { font-size: 1.5rem; margin-bottom: .6rem; }
.pc-kyp-state p { font-size: .95rem; }
.pc-kyp-state p a { color: var(--teal); font-weight: 700; text-decoration: underline; }
.pc-kyp-quickpicks { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.4rem; }
.pc-kyp-chip {
    padding: .55rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--border); background: #fff;
    color: var(--navy); font-weight: 700; font-size: .84rem; cursor: pointer; font-family: inherit;
    transition: border-color .2s, background .2s, transform .15s;
}
.pc-kyp-chip:hover { border-color: var(--teal); background: var(--silver-xs); transform: translateY(-2px); }

/* ── Results ──────────────────────────────────────────────── */
.pc-kyp-results { padding: 1rem 0 4.5rem; background: var(--silver-xs); }

.pc-kyp-flow {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.2rem;
    margin: 1.6rem 0 2.2rem;
}
.pc-kyp-flow-node {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 1.4rem 1.6rem; box-shadow: 0 10px 26px rgba(16,35,62,.06);
    animation: kyp2-fadeInUp .5s ease both;
}
.pc-kyp-flow-label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--teal); margin-bottom: .4rem; }
.pc-kyp-flow-node strong { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--navy); margin-bottom: .3rem; }
.pc-kyp-flow-node p { font-size: .84rem; margin: 0; }
.pc-kyp-flow-raw { border-left: 4px solid var(--teal); }
.pc-kyp-flow-products { border-left: 4px solid var(--accent); }

.pc-kyp-flow-arrow { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.pc-kyp-flow-arrow::before {
    content: ''; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent var(--teal); order: 2;
}
.pc-kyp-flow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); opacity: .35; animation: kyp2-flowPulse 1.4s ease-in-out infinite; }
.pc-kyp-flow-dot:nth-child(2) { animation-delay: .2s; }
.pc-kyp-flow-dot:nth-child(3) { animation-delay: .4s; }

.pc-kyp-results-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.4rem; }
.pc-kyp-results-header h2 { font-size: 1.4rem; margin: 0; }
.pc-kyp-results-header h2 span { color: var(--teal); }
.pc-kyp-reset-btn {
    display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1.5px solid var(--border);
    border-radius: 999px; padding: .5rem 1rem; font-size: .82rem; font-weight: 700; color: var(--muted);
    cursor: pointer; transition: border-color .2s, color .2s; white-space: nowrap; font-family: inherit;
}
.pc-kyp-reset-btn:hover { border-color: var(--teal); color: var(--teal); }

.pc-kyp-cat-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.pc-kyp-cat-filter {
    padding: .45rem .95rem; border-radius: 999px; border: 1.5px solid var(--border); background: #fff;
    font-size: .8rem; font-weight: 700; color: var(--navy); cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: .4rem; transition: all .18s ease;
}
.pc-kyp-cat-filter::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cat, var(--teal)); }
.pc-kyp-cat-filter:hover { border-color: var(--cat, var(--teal)); }
.pc-kyp-cat-filter.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.pc-kyp-cat-filter.is-active::before { background: #fff; }

.pc-kyp-group { margin-bottom: 2rem; }
.pc-kyp-group-title {
    display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: 1.1rem;
    color: var(--navy); margin-bottom: 1rem;
}
.pc-kyp-group-title::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--cat, var(--teal)); }
.pc-kyp-group-title span { font-family: var(--font-body); font-weight: 600; font-size: .78rem; color: var(--muted); }

.pc-kyp-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem;
}
.pc-kyp-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 1.3rem 1.2rem 1.4rem; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    animation: kyp2-fadeInUp .5s ease both;
}
.pc-kyp-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(16,35,62,.12); border-color: var(--cat, var(--teal)); }

.pc-kyp-icon-wrap {
    width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--cat, var(--teal)) 12%, #fff); color: var(--cat, var(--teal));
    margin-bottom: .9rem; animation: kyp2-float 4.5s ease-in-out infinite;
}
.pc-kyp-card:hover .pc-kyp-icon-wrap { animation-duration: 1.6s; transform: scale(1.06); }
.pc-kyp-icon-wrap svg { width: 26px; height: 26px; }

.pc-kyp-card-tag {
    display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--cat, var(--teal)); background: color-mix(in srgb, var(--cat, var(--teal)) 10%, #fff);
    padding: .22rem .6rem; border-radius: 999px; margin-bottom: .55rem;
}
.pc-kyp-card h3 { font-size: 1.02rem; margin: 0 0 .4rem; color: var(--navy); }
.pc-kyp-card p { font-size: .84rem; margin: 0 0 .6rem; }
.pc-kyp-card-use { font-size: .78rem; color: var(--navy); font-weight: 600; border-top: 1px dashed var(--border); padding-top: .6rem; margin: 0; }
.pc-kyp-card-use b { color: var(--cat, var(--teal)); font-weight: 700; }

/* stagger card entrance without JS having to compute unique delays per card */
.pc-kyp-cards .pc-kyp-card:nth-child(1) { animation-delay: .02s; }
.pc-kyp-cards .pc-kyp-card:nth-child(2) { animation-delay: .06s; }
.pc-kyp-cards .pc-kyp-card:nth-child(3) { animation-delay: .10s; }
.pc-kyp-cards .pc-kyp-card:nth-child(4) { animation-delay: .14s; }
.pc-kyp-cards .pc-kyp-card:nth-child(5) { animation-delay: .18s; }
.pc-kyp-cards .pc-kyp-card:nth-child(6) { animation-delay: .22s; }
.pc-kyp-cards .pc-kyp-card:nth-child(n+7) { animation-delay: .26s; }

/* ── CTA banner (reuses index.php visual language) ───────── */
.pc-kyp-cta-banner {
    margin-top: 2.2rem; background: var(--navy); border-radius: var(--radius-lg); padding: 2rem 2.2rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap;
}
.pc-kyp-cta-copy h3 { color: #fff; font-size: 1.15rem; margin: 0 0 .4rem; }
.pc-kyp-cta-copy p { color: rgba(255,255,255,.68); font-size: .88rem; margin: 0; max-width: 460px; }
.pc-kyp-cta-btns { margin: 0; }
.pc-kyp-wa-btn { border-color: rgba(255,255,255,.5); }

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes kyp2-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes kyp2-fadeInUp { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes kyp2-flowPulse { 0%, 100% { opacity: .3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }

@media (prefers-reduced-motion: reduce) {
    .pc-kyp-state-icon, .pc-kyp-icon-wrap, .pc-kyp-flow-dot, .pc-kyp-flow-node, .pc-kyp-card {
        animation: none !important;
    }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .pc-kyp-flow { grid-template-columns: 1fr; }
    .pc-kyp-flow-arrow { flex-direction: row; transform: rotate(90deg); margin: -.4rem 0; }
    .pc-kyp-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 560px) {
    .pc-kyp-search-card { margin-top: -2.4rem; padding: 1.4rem 1.2rem 1.6rem; }
    .pc-kyp-hero { padding: 2.6rem 0 5.2rem; }
    .pc-kyp-cards { grid-template-columns: 1fr 1fr; gap: .8rem; }
    .pc-kyp-cta-banner { flex-direction: column; align-items: stretch; text-align: center; }
    .pc-kyp-cta-btns { justify-content: center; }
}
@media (max-width: 400px) {
    .pc-kyp-cards { grid-template-columns: 1fr; }
}