/* ============================================================================
   kd-demo-fab.css · Floating "view demo webshop" pill on the homepage
   ----------------------------------------------------------------------------
   Bottom-right fixed pill that links to /peaknetwork/. Hidden site-wide by
   flipping KD_DEMO_FAB to false in the inline config block in homepage.html
   (or per-visit via ?demo=off in the URL). Styled like a stencil tab so it
   sits with the rest of the kHouse military aesthetic without screaming.
   ============================================================================ */

.kd-demo-fab {
    position: fixed;
    right: clamp(16px, 2vw, 24px);
    bottom: clamp(16px, 2vw, 24px);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    background: var(--kd-fg);
    color: var(--kd-bg);
    text-decoration: none;
    border: 1px solid var(--kd-fg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: transform var(--kd-dur) var(--kd-ease), box-shadow var(--kd-dur) var(--kd-ease);
}
.kd-demo-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

.kd-demo-fab__eyebrow {
    font-family: var(--kd-font-mono);
    font-size: 9px;
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    opacity: 0.7;
}
.kd-demo-fab__label {
    font-family: 'Allerta Stencil', var(--kd-font-mono);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[data-kd-demo-fab="off"] .kd-demo-fab { display: none; }

@media (max-width: 600px) {
    .kd-demo-fab { padding: 8px 12px; }
    .kd-demo-fab__label { font-size: 12px; }
}