/* FUDISE products: /products page and home showcase.
   Colors come from the theme variables, so night mode works without overrides. */

.fp-logo {
    --fp-accent: #2563eb;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: color-mix(in srgb, var(--fp-accent) 12%, var(--colorWhite));
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), inset 0 0 0 1px rgba(15, 23, 42, .06);
}
.fp-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-logo span {
    font-family: var(--headingFont);
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: var(--fp-accent);
}
.fp-logo--sm { width: 44px; height: 44px; border-radius: 13px; }
.fp-logo--sm span { font-size: 15px; }
.fp-logo--lg { width: 64px; height: 64px; border-radius: 18px; }

.fp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.fp-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fp-badge--live { color: #15803d; background: rgba(22, 163, 74, .12); }
.fp-badge--beta { color: #1d4ed8; background: rgba(37, 99, 235, .12); }
.fp-badge--soon { color: #b45309; background: rgba(245, 158, 11, .16); }
.night-mode .fp-badge--live, .active-dark-mode .fp-badge--live { color: #4ade80; }
.night-mode .fp-badge--beta, .active-dark-mode .fp-badge--beta { color: #93c5fd; }
.night-mode .fp-badge--soon, .active-dark-mode .fp-badge--soon { color: #fbbf24; }

/* ---------- Product cards (page + home) ---------- */
.fp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
.fp-card {
    --fp-accent: #2563eb;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
    padding: 26px;
    border-radius: 24px;
    background: var(--colorWhite);
    border: 1px solid var(--borderColor);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fp-card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--fp-accent);
    opacity: .9;
}
a.fp-card:hover,
.fp-card.is-link:hover,
.fp-card.has-page:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--fp-accent) 45%, var(--borderColor));
    box-shadow: 0 22px 48px rgba(15, 23, 42, .12);
}
.fp-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fp-card__name {
    font-family: var(--headingFont);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--colorBlack);
    margin: 0 0 6px;
}
.fp-card__category {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--paraColor);
    margin-bottom: 6px;
}
.fp-grid__item[hidden] { display: none; }
.fp-card__tagline { font-size: 15.5px; font-weight: 500; color: var(--colorBlack); margin: 0 0 8px; }
.fp-card__desc { font-size: 14.5px; line-height: 1.6; color: var(--paraColor); margin: 0; }
.fp-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fp-card__open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    color: #fff !important;
    background: var(--fp-accent);
    transition: filter .2s;
}
.fp-card__open:hover { filter: brightness(1.08); }
.fp-card__host { font-size: 13px; color: var(--paraColor); }
.fp-card__stores { display: flex; gap: 8px; }
.fp-card__store {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--borderColor);
    color: var(--colorBlack) !important;
    font-size: 17px;
}
.fp-card__store:hover { background: var(--lightBg); }
.fp-card.is-soon { background: color-mix(in srgb, var(--colorWhite) 92%, var(--lightBg)); }
.fp-card.is-soon .fp-logo { filter: saturate(.7); }
.fp-card__soon-note { font-size: 13.5px; color: var(--paraColor); }

/* ---------- /products page ---------- */
.fp-page { padding: 40px 0 110px; }
.fp-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 36px;
}
.fp-filter button {
    border: 1px solid var(--borderColor);
    background: var(--colorWhite);
    color: var(--colorBlack);
    border-radius: 999px;
    padding: 9px 18px;
    font-weight: 600;
    font-size: 14px;
    transition: background .2s, color .2s, border-color .2s;
}
.fp-filter button:hover { border-color: var(--colorPrimary); }
.fp-filter button.is-active { background: var(--colorBlack); border-color: var(--colorBlack); color: var(--colorWhite); }

/* ---------- Home showcase ---------- */
.fp-showcase { padding: 110px 0 40px; position: relative; }
.fp-showcase__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
}
.fp-showcase__eyebrow {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--colorPrimary);
    margin-bottom: 10px;
}
.fp-showcase__title {
    font-family: var(--headingFont);
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.12;
    color: var(--colorBlack);
    margin: 0;
}
.fp-showcase__lead { max-width: 560px; color: var(--paraColor); margin: 12px 0 0; font-size: 17px; }
.fp-showcase__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 999px;
    border: 1px solid var(--colorBlack);
    font-weight: 600;
    color: var(--colorBlack) !important;
    transition: background .2s, color .2s;
}
.fp-showcase__more:hover { background: var(--colorBlack); color: var(--colorWhite) !important; }

/* Home showcase is a single row: 4 / 3 / 2 cards, a swipeable strip on phones. */
.fp-grid--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199.98px) {
    .fp-grid--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fp-grid--row > :nth-child(n+4) { display: none; }
}
@media (max-width: 991.98px) {
    .fp-grid--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fp-grid--row > :nth-child(n+3) { display: none; }
}
@media (max-width: 767.98px) {
    .fp-grid--row {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
        margin-right: -12px;
        scrollbar-width: none;
    }
    .fp-grid--row::-webkit-scrollbar { display: none; }
    .fp-grid--row > * { display: block !important; flex: 0 0 80%; scroll-snap-align: start; }
}

@media (max-width: 767.98px) {
    .fp-showcase { padding-top: 70px; }
    .fp-card { padding: 22px; border-radius: 20px; }
    .fp-grid { gap: 16px; }
}

/* ---------- Cards open their product page ---------- */
.fp-card__name a { color: inherit; }
.fp-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.fp-card__foot { position: relative; z-index: 1; }

/* ---------- /products/{slug}: one product ---------- */
.fpp { --fp-accent: #2563eb; padding: 130px 0 110px; } /* no breadcrumb here: room for the fixed header */
.fpp-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--paraColor) !important;
    margin-bottom: 22px;
}
.fpp-back:hover { color: var(--fp-accent) !important; }

.fpp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 48px;
    align-items: center;
    padding: 44px;
    border-radius: 32px;
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--fp-accent) 22%, transparent), transparent 60%),
        radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, var(--fp-accent) 10%, transparent), transparent 60%),
        var(--colorWhite);
    border: 1px solid var(--borderColor);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.fpp-hero__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.fpp-hero__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fpp-hero__category { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--paraColor); }
.fpp-hero__title {
    font-family: var(--headingFont);
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--colorBlack);
    margin: 0 0 14px;
}
.fpp-hero__lead { font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: var(--paraColor); margin: 0 0 28px; max-width: 34ch; }
.fpp-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fpp-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    transition: transform .2s, filter .2s, background .2s;
}
.fpp-btn:hover { transform: translateY(-2px); }
.fpp-btn--primary { color: #fff !important; background: var(--fp-accent); box-shadow: 0 12px 28px color-mix(in srgb, var(--fp-accent) 35%, transparent); }
.fpp-btn--primary:hover { filter: brightness(1.08); }
.fpp-btn--store { color: var(--colorBlack) !important; background: var(--colorWhite); border: 1px solid var(--borderColor); }
.fpp-btn--store i { font-size: 18px; }
.fpp-soon { font-size: 15px; font-weight: 600; color: var(--paraColor); }

.fpp-hero__art { position: relative; display: grid; place-items: center; min-height: 360px; }
.fpp-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--fp-accent) 35%, transparent);
    animation: fpp-spin 18s linear infinite;
}
.fpp-ring--a { width: 340px; height: 340px; border-style: dashed; }
.fpp-ring--b { width: 250px; height: 250px; animation-direction: reverse; animation-duration: 24s; }
@keyframes fpp-spin { to { transform: rotate(360deg); } }
.fpp-device {
    position: relative;
    width: min(260px, 70%);
    aspect-ratio: 9 / 17;
    border-radius: 38px;
    padding: 10px;
    background: #0b1220;
    box-shadow: 0 30px 60px rgba(15, 23, 42, .28), inset 0 0 0 2px rgba(255, 255, 255, .08);
    animation: fpp-float 6s ease-in-out infinite;
}
.fpp-device img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 29px; display: block; }
.fpp-hero__logo { position: relative; transform: scale(2.4); animation: fpp-float 6s ease-in-out infinite; }
@keyframes fpp-float { 50% { translate: 0 -10px; } }

.fpp-section { margin-top: 72px; }
.fpp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.fpp-eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fp-accent); margin-bottom: 6px; }
.fpp-h2 { font-family: var(--headingFont); font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.01em; color: var(--colorBlack); margin: 0; }
.fpp-arrows { display: flex; gap: 10px; }
.fpp-arrows button {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--borderColor);
    background: var(--colorWhite);
    color: var(--colorBlack);
    transition: background .2s, color .2s;
}
.fpp-arrows button:hover { background: var(--fp-accent); color: #fff; border-color: transparent; }

.fpp-gallery {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 6px 2px 18px;
    scrollbar-width: thin;
}
.fpp-shot {
    flex: 0 0 auto;
    height: clamp(360px, 52vw, 520px);
    padding: 0;
    border: 1px solid var(--borderColor);
    border-radius: 24px;
    overflow: hidden;
    background: var(--lightBg);
    scroll-snap-align: start;
    cursor: zoom-in;
    box-shadow: var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}
.fpp-shot:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(15, 23, 42, .14); }
.fpp-shot img { height: 100%; width: auto; max-width: 86vw; object-fit: cover; object-position: top; display: block; }

.fpp-about { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: start; }
.fpp-about__text p { font-size: 17px; line-height: 1.75; color: var(--paraColor); margin: 16px 0 0; }
.fpp-features {
    padding: 30px;
    border-radius: 24px;
    background: var(--colorWhite);
    border: 1px solid var(--borderColor);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.fpp-features::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--fp-accent); }
.fpp-features h3 { font-family: var(--headingFont); font-size: 20px; font-weight: 700; color: var(--colorBlack); margin: 0 0 18px; }
.fpp-features ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fpp-features li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--colorBlack); }
.fpp-features li i {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    color: #fff;
    background: var(--fp-accent);
    margin-top: 1px;
}

.fpp-lightbox {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(5, 9, 20, .92);
    display: none;
    place-items: center;
}
.fpp-lightbox[open] { display: grid; }
.fpp-lightbox::backdrop { background: transparent; }
.fpp-lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 18px; object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.fpp-lightbox button {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    font-size: 18px;
    transition: background .2s;
}
.fpp-lightbox button:hover { background: rgba(255, 255, 255, .22); }
.fpp-lightbox__close { top: 20px; right: 20px; }
.fpp-lightbox__nav { top: 50%; transform: translateY(-50%); }
.fpp-lightbox__nav.is-prev { left: 20px; }
.fpp-lightbox__nav.is-next { right: 20px; }
.fpp-lightbox__count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .8); font-size: 14px; font-weight: 600; }

@media (max-width: 991px) {
    .fpp-hero { grid-template-columns: 1fr; padding: 28px 22px; gap: 28px; }
    .fpp-hero__art { min-height: 300px; }
    .fpp-ring--a { width: 280px; height: 280px; }
    .fpp-ring--b { width: 200px; height: 200px; }
    .fpp-about { grid-template-columns: 1fr; gap: 28px; }
    .fpp-section { margin-top: 56px; }
}
@media (max-width: 575px) {
    .fpp { padding-top: 100px; }
    .fpp-actions .fpp-btn { flex: 1 1 auto; justify-content: center; }
    .fpp-arrows { display: none; }
    .fpp-shot { height: 440px; }
    .fpp-lightbox__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .fpp-ring, .fpp-device, .fpp-hero__logo { animation: none; }
}