/* ==========================================================================
   Layout kit: Bloom — playful, for handmade / gifts / kids / crafts /
   flowers / sweets. Balsamiq Sans + Nunito, thick ink outlines with offset
   «sticker» shadows, pastel tiles, squiggle underlines, scalloped footer.
   Extends core.css.
   ========================================================================== */

:root {
    --k-font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --k-font-display: 'Balsamiq Sans', 'Nunito', system-ui, sans-serif;
    --k-display-weight: 700;
    --k-display-tracking: -0.01em;
    --k-ink: var(--text-heading, #1f1a17);
    --k-bg: color-mix(in srgb, var(--color-primary) 4%, #fffaf2);
    --k-surface: #fff;
    --k-surface-2: color-mix(in srgb, var(--color-primary) 10%, #fff);
    --k-line: color-mix(in srgb, var(--k-ink) 14%, transparent);
    --k-radius-sm: 14px;
    --k-radius: 22px;
    --k-radius-lg: 30px;
    --k-radius-btn: 999px;
    --k-shadow: 4px 4px 0 var(--k-ink);
    --k-shadow-hover: 7px 7px 0 var(--k-ink);
    --k-title-size: clamp(1.45rem, 2.6vw, 2.05rem);
    --bl-border: 2px solid var(--k-ink);
    --bl-p1: color-mix(in srgb, var(--color-primary) 22%, #fff);
    --bl-p2: color-mix(in srgb, var(--color-secondary, #e11d48) 16%, #fff);
    --bl-p3: color-mix(in srgb, var(--color-success, #10b981) 18%, #fff);
    --bl-p4: color-mix(in srgb, #8b5cf6 16%, #fff);
}

/* Outlined «sticker» primitive */
.bl-sticker, .kx .kx-btn, .kx-chip-btn, .kx-select select, .kx .kx-more {
    border: var(--bl-border) !important;
    box-shadow: 3px 3px 0 var(--k-ink);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.kx .kx-btn:hover, .kx-chip-btn:hover, .kx .kx-more:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--k-ink); }
.kx .kx-btn:active, .kx-chip-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--k-ink); }
.kx-btn { font-family: var(--k-font-display); font-weight: 700; }
.kx-btn--light, .kx-btn--ghost { background: #fff; color: var(--k-ink) !important; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.bl-header { padding: 12px 0 6px; background: transparent; }
.bl-header.is-scrolled { box-shadow: none; }
.bl-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 64px;
    padding: 6px 8px 6px 18px;
    border: var(--bl-border);
    border-radius: 999px;
    background: var(--color-nav-bg, #fff);
    box-shadow: 4px 4px 0 var(--k-ink);
}
.bl-bar .kx-logo img { height: 40px; }
.bl-nav { display: flex; align-items: center; gap: .35rem; flex: 1; min-width: 0; justify-content: center; }
.bl-nav-item { position: relative; }
.kx .bl-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 40px;
    padding: 0 1rem;
    border: 2px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-nav, var(--k-ink));
    font-family: var(--k-font-display);
    font-size: .86rem;
    font-weight: 700;
    white-space: nowrap;
    transition: all .15s ease;
}
.kx .bl-pill:hover, .bl-nav-item.is-open > .bl-pill, .kx .bl-pill.is-current { border-color: var(--k-ink); background: var(--bl-p1); color: var(--k-ink); }
.kx .bl-pill--all { border-color: var(--k-ink); background: var(--k-accent); color: var(--k-accent-ink); }
.kx .bl-pill--sale { color: var(--color-secondary, #e11d48); }
.kx .bl-pill--sale span { display: inline-block; animation: bl-spin 6s linear infinite; }
@keyframes bl-spin { to { transform: rotate(360deg); } }
@media (max-width: 1299.98px) { .bl-cat-link:nth-of-type(n+3) { display: none !important; } }
@media (max-width: 1099.98px) { .bl-cat-link { display: none !important; } }
.bl-bar .kx-icons { gap: 6px; margin-left: auto; }
.bl-bar .kx-icon { width: 46px; height: 46px; border: var(--bl-border); border-radius: 50%; background: #fff; color: var(--k-ink); font-size: 1.1rem; }
.bl-bar .kx-icon:hover { background: var(--bl-p1); color: var(--k-ink); }
.bl-bar .kx-count { top: -6px; right: -6px; border: 2px solid var(--k-ink); line-height: 15px; }
@media (max-width: 991.98px) {
    .bl-header { padding: 8px 0 4px; }
    .bl-bar { min-height: 56px; padding: 4px 6px 4px 14px; }
    .bl-bar .kx-logo img { height: 34px; }
    .bl-bar .kx-icon { width: 40px; height: 40px; min-width: 40px; padding: 0; }
}

.bl-drop {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    z-index: 1070;
    display: grid;
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    gap: 1rem 1.5rem;
    width: max-content;
    max-width: min(760px, 80vw);
    padding: 1.25rem 1.4rem;
    border: var(--bl-border);
    border-radius: 24px;
    background: #fff;
    box-shadow: 6px 6px 0 var(--k-ink);
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px) rotate(-.6deg);
    transition: all .18s ease;
}
.bl-nav-item.is-open > .bl-drop { visibility: visible; opacity: 1; transform: none; }
.bl-nav-item::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.kx .bl-drop a { display: block; padding: .18rem 0; color: var(--k-body); font-size: .9rem; }
.kx .bl-drop a.bl-drop-h { margin-bottom: .3rem; color: var(--k-ink); font-family: var(--k-font-display); font-weight: 700; }
.kx .bl-drop a:hover { color: var(--k-accent); }

/* ── Headings: squiggle underline ───────────────────────────────────────── */
.ks .kx-title { position: relative; padding-bottom: .55rem; }
.ks .kx-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 96px;
    height: 10px;
    background: var(--k-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 10'%3E%3Cpath d='M2 6c8-6 14 4 22 0s14-6 22 0 14 4 22 0 14-6 22 0' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 10'%3E%3Cpath d='M2 6c8-6 14 4 22 0s14-6 22 0 14 4 22 0 14-6 22 0' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}
.kx-text--center .kx-title::after { left: 50%; transform: translateX(-50%); }
.kx .kx-more { padding: .45rem 1rem; border-radius: 999px; background: #fff; color: var(--k-ink); font-family: var(--k-font-display); font-size: .82rem; }
.kx .kx-more:hover { color: var(--k-ink); background: var(--bl-p1); }
@media (max-width: 575.98px) { .kx .kx-more { padding: .35rem .75rem; box-shadow: 2px 2px 0 var(--k-ink); } }

/* ── Card ───────────────────────────────────────────────────────────────── */
.bl-card { height: 100%; padding: 10px; border: var(--bl-border); border-radius: var(--k-radius); background: var(--k-surface); box-shadow: var(--k-shadow); transition: transform .18s ease, box-shadow .18s ease; }
.bl-card:hover { transform: translate(-3px, -3px); box-shadow: var(--k-shadow-hover); }
.bl-card-top { position: relative; }
.bl-card-media { aspect-ratio: 1; border: var(--bl-border); border-radius: 16px; background: var(--bl-p1); }
:nth-child(4n+2) > .bl-card .bl-card-media, :nth-child(4n+2) > .bl-card-media { background: var(--bl-p2); }
:nth-child(4n+3) > .bl-card .bl-card-media { background: var(--bl-p3); }
:nth-child(4n+4) > .bl-card .bl-card-media { background: var(--bl-p4); }
.bl-card-media img { padding: 0; }
.bl-burst {
    position: absolute;
    top: -12px;
    left: -12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--k-ink);
    clip-path: polygon(50% 0%, 61% 13%, 77% 6%, 80% 23%, 97% 25%, 90% 41%, 100% 54%, 86% 63%, 90% 80%, 72% 80%, 64% 96%, 50% 87%, 36% 96%, 28% 80%, 10% 80%, 14% 63%, 0% 54%, 10% 41%, 3% 25%, 20% 23%, 23% 6%, 39% 13%);
    transform: rotate(-12deg);
}
.bl-burst::before {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--color-secondary, #e11d48);
    clip-path: inherit;
}
.bl-burst span { position: relative; color: #fff; font-family: var(--k-font-display); font-size: .7rem; font-weight: 700; line-height: 1; text-align: center; }
.bl-burst--muted::before { background: #9ca3af; }
.bl-burst--muted span { font-size: .55rem; }
.bl-label { position: absolute; left: 10px; bottom: 10px; z-index: 3; padding: .2rem .65rem; border: var(--bl-border); border-radius: 999px; background: #fff; color: var(--k-ink); font-size: .7rem; font-weight: 800; transform: rotate(-3deg); }
.bl-wish { position: absolute; top: 8px; right: 8px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: var(--bl-border); border-radius: 50%; background: #fff; color: color-mix(in srgb, var(--k-ink) 25%, #fff); font-size: .9rem; transition: transform .15s ease, color .15s ease; }
.bl-wish:hover { color: var(--color-secondary, #e11d48); transform: scale(1.12) rotate(-8deg); }
.bl-card-body { display: flex; flex-direction: column; flex: 1; gap: .3rem; padding: .75rem .25rem .1rem; }
.kx .bl-card-name { font-size: .95rem; font-weight: 700; line-height: 1.3; }
.bl-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
.bl-price strong { color: var(--k-ink); font-family: var(--k-font-display); font-size: 1.1rem; font-weight: 700; }
.bl-price strong.is-sale { color: var(--color-secondary, #e11d48); }
.bl-price s { color: var(--k-muted); font-size: .8rem; }
.bl-card-meta { display: flex; flex-wrap: wrap; gap: .2rem .6rem; color: var(--k-muted); font-size: .76rem; font-weight: 600; }
.bl-add {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    margin-top: auto;
    padding: 0 .4rem 0 1rem;
    border: var(--bl-border);
    border-radius: 999px;
    background: var(--k-accent);
    color: var(--k-accent-ink);
    font-family: var(--k-font-display);
    font-size: .82rem;
    font-weight: 700;
    transition: background-color .15s ease;
}
.bl-card-meta + .bl-add, .bl-price + .bl-add { margin-top: auto; }
.bl-card-body > .bl-add { margin-top: .5rem; }
.bl-card-body > :nth-last-child(2) { margin-bottom: auto; }
.bl-add i { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--k-ink); font-size: .85rem; }
.bl-add:hover { background: var(--k-ink); color: #fff; }

/* ── Sections ───────────────────────────────────────────────────────────── */
.kx-scroll { padding: 14px 8px 18px 14px; margin: -14px -8px -18px -14px; scroll-padding-left: 14px; }
.kx-grid { --bs-gutter-y: 1.5rem; }
.kx-cats--tiles .kx-cat { border: var(--bl-border); border-radius: var(--k-radius); box-shadow: var(--k-shadow); transition: transform .18s ease, box-shadow .18s ease; }
.kx-cats--tiles .kx-cat:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: var(--k-shadow-hover); }
.kx-cats--tiles .kx-cat::after { display: none; }
.kx-cats--tiles .kx-cat-name { left: 10px; right: 10px; bottom: 10px; padding: .45rem .7rem; border: var(--bl-border); border-radius: 999px; background: #fff; color: var(--k-ink); font-size: .88rem; text-align: center; }
.kx-cats--tiles .kx-cat-go { display: none; }
.kx-cats--circles .kx-cat-img { border: var(--bl-border); box-shadow: 3px 3px 0 var(--k-ink); }
.kx-cats--circles .kx-cat:hover .kx-cat-img { box-shadow: 5px 5px 0 var(--k-ink); transform: translate(-2px, -2px) rotate(-4deg); }
.kx-cats--chips .kx-cat { border: var(--bl-border); box-shadow: 3px 3px 0 var(--k-ink); }
.kx-banner { border: var(--bl-border); border-radius: var(--k-radius); box-shadow: var(--k-shadow); }
.kx-banner-caption { border: var(--bl-border); }
.kx-feature { border: var(--bl-border); background: #fff; box-shadow: var(--k-shadow); }
.kx-feature:nth-child(4n+1) .kx-feature-icon { background: var(--bl-p1); }
.kx-feature:nth-child(4n+2) .kx-feature-icon { background: var(--bl-p2); }
.kx-feature:nth-child(4n+3) .kx-feature-icon { background: var(--bl-p3); }
.kx-feature:nth-child(4n+4) .kx-feature-icon { background: var(--bl-p4); }
.kx-feature-icon { border: var(--bl-border); color: var(--k-ink); }
.kx-brand { border: var(--bl-border); }
.kx-news-img { border: var(--bl-border); }
.kx-rail-btn { border: var(--bl-border); box-shadow: 3px 3px 0 var(--k-ink); }
.kx .kx-subcat { border: var(--bl-border); font-family: var(--k-font-display); }
.kx .kx-subcat:hover { background: var(--bl-p1); color: var(--k-ink); border-color: var(--k-ink); }
.kx-toolbar { border-color: var(--k-ink); border-style: dashed; }
.kx-filter-panel { border: var(--bl-border) !important; background: #fff; }

/* ── Footer: scalloped top edge ─────────────────────────────────────────── */
.kx-footer { position: relative; margin-top: calc(var(--k-section-gap) + 20px); }
.kx-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -19px;
    height: 20px;
    background: radial-gradient(circle at 20px 20px, var(--color-footer-bg, #111) 19px, transparent 20px) 0 0 / 40px 40px repeat-x;
}
.kx .kx-footer-wordmark { font-size: 1.8rem; }

/* ── Stock pages in Bloom ───────────────────────────────────────────────── */
body.kit-bloom .btn { border-radius: 999px; }