/* ═══════════════════════════════════════════════════════════════════
   FREE PRODUCTS SECTION — unchanged layout helpers
═══════════════════════════════════════════════════════════════════ */
.freesec { margin-bottom: 28px; }

.freesec__row {
    display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.freesec__badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px 3px 7px; border-radius: 20px;
    background: #f0fdf4; border: 1px solid #bbf7d0;
    color: #16a34a; font-size: 11px; font-weight: 600;
    white-space: nowrap; flex-shrink: 0;
}
.freesec__badge svg { width: 13px; height: 13px; stroke-width: 2; }
body.dark-theme .freesec__badge {
    background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.20); color: #4ade80;
}
.freesec__title {
    font-size: 11px; font-weight: 600; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .1em; margin: 0;
    white-space: nowrap; user-select: none;
}
body.dark-theme .freesec__title { color: #475569; }
.freesec__line {
    flex: 1; height: 1px;
    background: linear-gradient(to right, #e2e8f0, transparent);
}
body.dark-theme .freesec__line {
    background: linear-gradient(to right, rgba(255,255,255,.07), transparent);
}
.freesec__arrows { display: flex; gap: 4px; flex-shrink: 0; }
.freesec__btn {
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid #e2e8f0; background: transparent; color: #94a3b8;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; outline: none; transition: all .18s ease;
}
.freesec__btn svg { width: 14px; height: 14px; stroke-width: 2; }
.freesec__btn:hover { background: #f8fafc; border-color: #cbd5e1; color: #334155; }
.freesec__btn:active { transform: scale(.92); }
.freesec__btn.is-off { opacity: .25; pointer-events: none; }
body.dark-theme .freesec__btn {
    background: transparent; border-color: rgba(255,255,255,.08); color: #475569;
}
body.dark-theme .freesec__btn:hover {
    background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #94a3b8;
}
.freesec__vp {
    position: relative; overflow: hidden; margin: 0 -4px; padding: 0 4px;
}
.freesec__vp::before,.freesec__vp::after {
    content:''; position:absolute; top:0; bottom:0; width:80px;
    z-index:2; pointer-events:none; transition:opacity .3s;
}
.freesec__vp::before { left:0; background:linear-gradient(to right,#f7f9fa 20%,transparent); opacity:0; }
.freesec__vp::after  { right:0; background:linear-gradient(to left,#f7f9fa 20%,transparent); }
.freesec__vp.has-fade-l::before { opacity:1; }
.freesec__vp.no-fade-r::after   { opacity:0; }
body.dark-theme .freesec__vp::before { background:linear-gradient(to right,#181818 20%,transparent); }
body.dark-theme .freesec__vp::after  { background:linear-gradient(to left,#181818 20%,transparent);  }
.freesec__track {
    display:flex; gap:14px; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; scroll-behavior:smooth; padding:6px 0 10px;
}
.freesec__track::-webkit-scrollbar { display:none; }
.freesec__track .product-card.fp-card {
    flex:0 0 200px; width:200px; min-width:200px; max-width:200px;
    height:260px; min-height:260px; border-radius:14px;
}
@media(max-width:768px){
    .freesec { margin-bottom:22px; }
    .freesec__row { margin-bottom:10px; }
    .freesec__arrows { display:none; }
    .freesec__track { gap:10px; }
    .freesec__track .product-card.fp-card {
        flex:0 0 170px; width:170px; min-width:170px; max-width:170px;
        height:230px; min-height:230px;
    }
}
@media(max-width:480px){
    .freesec__track .product-card.fp-card {
        flex:0 0 155px; width:155px; min-width:155px; max-width:155px;
        height:210px; min-height:210px;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   CATEGORY SECTION HEADER
═══════════════════════════════════════════════════════════════════ */
.catsec {
    margin-bottom: 32px;
    position: relative;
}
.catsec__row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.catsec__title {
    font-size: 10.5px;
    font-weight: 700;
    color: #b0bac8;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin: 0;
    white-space: nowrap;
    user-select: none;
}
body.dark-theme .catsec__title { color: #3d4656; }

.catsec__line {
    flex: 1;
    height: 1px;
    background: #f0f2f5;
}
body.dark-theme .catsec__line { background: rgba(255,255,255,.05); }

.catsec__arrows { display: flex; gap: 4px; flex-shrink: 0; }
.catsec__btn {
    width: 28px; height: 28px; border-radius: 7px;
    border: 1px solid #e8eaed; background: transparent; color: #adb5bd;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; outline: none;
    transition: all .18s ease;
}
.catsec__btn svg { width: 14px; height: 14px; stroke-width: 2; }
.catsec__btn:hover { background: #f8fafc; border-color: #ced4da; color: #495057; }
.catsec__btn:active { transform: scale(.88); }
.catsec__btn.is-off { opacity: .18; pointer-events: none; }
body.dark-theme .catsec__btn {
    background: transparent;
    border-color: rgba(255,255,255,.07);
    color: #3d4656;
}
body.dark-theme .catsec__btn:hover {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.12);
    color: #8892a4;
}

/* ── Viewport & Track ── */
.catsec__vp {
    position: relative;
    overflow: hidden;
    margin: 0 -6px;
    padding: 0 6px;
}
.catsec__vp::before,
.catsec__vp::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 56px;
    z-index: 2;
    pointer-events: none;
    transition: opacity .3s;
}
.catsec__vp::before {
    left: 0;
    background: linear-gradient(to right, var(--page-bg,#f7f9fa) 30%, transparent);
    opacity: 0;
}
.catsec__vp::after {
    right: 0;
    background: linear-gradient(to left, var(--page-bg,#f7f9fa) 30%, transparent);
}
.catsec__vp.has-fade-l::before { opacity: 1; }
.catsec__vp.no-fade-r::after   { opacity: 0; }
body.dark-theme .catsec__vp::before {
    background: linear-gradient(to right, #181818 30%, transparent);
}
body.dark-theme .catsec__vp::after {
    background: linear-gradient(to left, #181818 30%, transparent);
}

.catsec__track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 4px 0 10px;
}
.catsec__track::-webkit-scrollbar { display: none; }


/* ═══════════════════════════════════════════════════════════════════
   CATEGORY PILL — The star of the show
   Concept: pill chip with left-to-right sliding fill on hover.
   Icon + label only. No counts. No colours per category.
   Inspired by: Linear, Raycast, Apple HIG
═══════════════════════════════════════════════════════════════════ */
.cc {
    /* pill shape */
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px 0 11px;
    border-radius: 100px;

    /* surface */
    background: #fff;
    border: 1px solid #e8eaed;

    /* typography setup */
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;

    /* fill layer lives in ::before */
    position: relative;
    overflow: hidden;

    /* transitions */
    transition:
        border-color .28s ease,
        box-shadow   .28s ease,
        transform    .22s cubic-bezier(.34,1.56,.64,1);
}

/* Sliding fill — dark surface sweeps in from left.
   NO border-radius here; parent overflow:hidden + border-radius clips it cleanly. */
.cc::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #0c0e12;
    transform: translateX(-101%);
    transition: transform .38s cubic-bezier(.16,1,.3,1);
    z-index: 0;
}

.cc:hover {
    border-color: #0c0e12;
    box-shadow: 0 4px 16px -4px rgba(12,14,18,.22),
                0 1px 4px -1px rgba(12,14,18,.12);
    transform: translateY(-2px);
}

.cc:hover::before {
    transform: translateX(0);
}

.cc:active {
    transform: translateY(0) scale(.97);
    transition-duration: .06s;
}

/* Dark theme base */
body.dark-theme .cc {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.08);
}
body.dark-theme .cc::before {
    background: rgba(255,255,255,.94);
}
body.dark-theme .cc:hover {
    border-color: rgba(255,255,255,.6);
    box-shadow: 0 4px 20px -4px rgba(0,0,0,.5),
                0 1px 4px -1px rgba(0,0,0,.3);
}


/* ── Icon ── */
.cc__ic {
    width: 22px;
    height: 22px;
    min-width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    color: #5a6474;
    transition: color .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
    flex-shrink: 0;
}

.cc__ic svg,
.cc__ic [data-lucide] {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
    flex-shrink: 0;
}

.cc__ic img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 3px;
}

.cc:hover .cc__ic {
    color: #fff;
    transform: scale(1.12) rotate(-5deg);
}

body.dark-theme .cc__ic { color: #5a6474; }
body.dark-theme .cc:hover .cc__ic { color: #0c0e12; }


/* ── Info wrapper (we hide count, show only name) ── */
.cc__info {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

/* ── Name ── */
.cc__name {
    font-size: 13px;
    font-weight: 550;
    color: #1a2030;
    letter-spacing: -0.01em;
    line-height: 1;
    transition: color .28s ease;
    white-space: nowrap;
}

.cc:hover .cc__name { color: #fff; }

body.dark-theme .cc__name { color: #8a94a6; }
body.dark-theme .cc:hover .cc__name { color: #0c0e12; }

/* ── Count — hidden ── */
.cc__count {
    display: none;
}
.cc__count::before {
    display: none;
}

/* ── Arrow — hidden ── */
.cc__arrow {
    display: none;
}


/* ═══════════════════════════════════════════════════════════════════
   ALL CATEGORIES pill — dashed border treatment
═══════════════════════════════════════════════════════════════════ */
.cc--all {
    border-style: dashed;
    border-color: #ced4da;
    background: transparent;
}
.cc--all::before { background: #0c0e12; }
.cc--all:hover { border-style: solid; border-color: #0c0e12; }

body.dark-theme .cc--all {
    background: transparent;
    border-color: rgba(255,255,255,.12);
}
body.dark-theme .cc--all:hover { border-color: rgba(255,255,255,.55); }


/* ═══════════════════════════════════════════════════════════════════
   FREE pill — single green accent, tasteful
═══════════════════════════════════════════════════════════════════ */
.cc--free {
    border-color: #a7f3d0;
    background: #ecfdf5;
}
.cc--free::before { background: linear-gradient(135deg, #059669, #10b981); }
.cc--free .cc__ic { color: #059669; }
.cc--free .cc__name { color: #065f46; }

.cc--free:hover {
    border-color: #059669;
    box-shadow: 0 4px 16px -4px rgba(16,185,129,.30);
}
.cc--free:hover .cc__ic { color: #fff; transform: scale(1.12) rotate(-5deg); }
.cc--free:hover .cc__name { color: #fff; }

body.dark-theme .cc--free {
    background: rgba(5,150,105,.07);
    border-color: rgba(16,185,129,.18);
}
body.dark-theme .cc--free::before { background: linear-gradient(135deg, #059669, #10b981); }
body.dark-theme .cc--free .cc__ic { color: #34d399; }
body.dark-theme .cc--free .cc__name { color: #34d399; }
body.dark-theme .cc--free:hover .cc__ic  { color: #fff; }
body.dark-theme .cc--free:hover .cc__name { color: #fff; }


/* ═══════════════════════════════════════════════════════════════════
   COLOR VARIANTS — all stripped; base pill applies
═══════════════════════════════════════════════════════════════════ */
.cc--c0,.cc--c1,.cc--c2,.cc--c3,.cc--c4,.cc--c5,
.cc--c6,.cc--c7,.cc--c8,.cc--c9,.cc--c10,.cc--c11 { /* intentionally empty */ }


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .catsec { margin-bottom: 20px; }
    .catsec__row { margin-bottom: 10px; }
    .catsec__arrows { display: none; }
    .catsec__track { gap: 6px; }

    .cc {
        height: 34px;
        padding: 0 12px 0 9px;
        gap: 6px;
    }
    .cc__ic { width: 18px; height: 18px; min-width: 18px; }
    .cc__ic svg, .cc__ic [data-lucide] { width: 14px; height: 14px; }
    .cc__name { font-size: 12px; }
}

@media (max-width: 480px) {
    .cc { height: 32px; padding: 0 11px 0 8px; gap: 5px; }
    .cc__ic { width: 16px; height: 16px; min-width: 16px; }
    .cc__ic svg, .cc__ic [data-lucide] { width: 13px; height: 13px; }
    .cc__name { font-size: 11.5px; }
}


/* ═══════════════════════════════════════════════════════════════════
   ENTRANCE ANIMATION
   Blur + fade up, staggered. Much more cinematic than a slide.
═══════════════════════════════════════════════════════════════════ */
@keyframes ccAppear {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.cc {
    animation: ccAppear .5s cubic-bezier(.16,1,.3,1) both;
}

.cc:nth-child(1)  { animation-delay: .00s; }
.cc:nth-child(2)  { animation-delay: .04s; }
.cc:nth-child(3)  { animation-delay: .07s; }
.cc:nth-child(4)  { animation-delay: .10s; }
.cc:nth-child(5)  { animation-delay: .13s; }
.cc:nth-child(6)  { animation-delay: .16s; }
.cc:nth-child(7)  { animation-delay: .19s; }
.cc:nth-child(8)  { animation-delay: .22s; }
.cc:nth-child(9)  { animation-delay: .25s; }
.cc:nth-child(10) { animation-delay: .28s; }
.cc:nth-child(11) { animation-delay: .31s; }
.cc:nth-child(12) { animation-delay: .34s; }
.cc:nth-child(13) { animation-delay: .37s; }
.cc:nth-child(14) { animation-delay: .40s; }