/* ---------------------------------------------------------------------------
 * cheap3dprinting.com — site-wide theme
 *
 * Single accent (#35c3d3) over a white-and-grey palette. We override a small
 * set of Bootstrap 5 CSS variables so the existing components (buttons, links,
 * focus rings, badges) inherit the brand color automatically, then add a few
 * bespoke classes prefixed `c3p-` for the navbar / hero / cards / carousel.
 * ------------------------------------------------------------------------- */

:root {
    --c3p-accent: #35c3d3;
    --c3p-accent-dark: #279bab;
    --c3p-accent-darker: #1f7a86;
    --c3p-accent-soft: #e8f8fa;

    --c3p-ink: #1f2937;
    --c3p-ink-soft: #4b5563;
    --c3p-muted: #6b7280;

    --c3p-surface: #ffffff;
    --c3p-surface-soft: #f6f7f9;
    --c3p-border: #e5e7eb;
    --c3p-border-strong: #d1d5db;

    /* Distance from the viewport edge to where Bootstrap's `.container` content
     * actually starts — used by full-bleed sections (e.g. the homepage carousel)
     * to align their captions / controls with the rest of the page content even
     * though the section spans 100vw. The breakpoints mirror Bootstrap 5's
     * container max-widths. */
    --c3p-content-pad: 1rem;

    /* Bootstrap variable overrides — components that pull from these inherit
       the brand automatically. We keep `secondary` neutral grey. */
    --bs-primary: #35c3d3;
    --bs-primary-rgb: 53, 195, 211;
    --bs-link-color: var(--c3p-accent-dark);
    --bs-link-color-rgb: 39, 155, 171;
    --bs-link-hover-color: var(--c3p-accent-darker);
}
@media (min-width: 576px)  { :root { --c3p-content-pad: max(1rem, calc((100vw - 540px)  / 2)); } }
@media (min-width: 768px)  { :root { --c3p-content-pad: max(1rem, calc((100vw - 720px)  / 2)); } }
@media (min-width: 992px)  { :root { --c3p-content-pad: max(1rem, calc((100vw - 960px)  / 2)); } }
@media (min-width: 1200px) { :root { --c3p-content-pad: max(1rem, calc((100vw - 1140px) / 2)); } }
@media (min-width: 1400px) { :root { --c3p-content-pad: max(1rem, calc((100vw - 1320px) / 2)); } }

html { font-size: 14px; min-height: 100%; position: relative; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
    background: var(--c3p-surface);
    color: var(--c3p-ink);
    -webkit-font-smoothing: antialiased;
}

/* Focus rings use the accent. */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--c3p-accent);
}
.form-control:focus, .form-select:focus { border-color: var(--c3p-accent); }

/* Floating-label tweak from the default template. */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }

/* Bootstrap primary -> accent. Keep contrast on hover/disabled. */
.btn-primary {
    --bs-btn-bg: var(--c3p-accent);
    --bs-btn-border-color: var(--c3p-accent);
    --bs-btn-hover-bg: var(--c3p-accent-dark);
    --bs-btn-hover-border-color: var(--c3p-accent-dark);
    --bs-btn-active-bg: var(--c3p-accent-darker);
    --bs-btn-active-border-color: var(--c3p-accent-darker);
    --bs-btn-disabled-bg: var(--c3p-accent);
    --bs-btn-disabled-border-color: var(--c3p-accent);
}
.btn-outline-primary {
    --bs-btn-color: var(--c3p-accent-dark);
    --bs-btn-border-color: var(--c3p-accent);
    --bs-btn-hover-bg: var(--c3p-accent);
    --bs-btn-hover-border-color: var(--c3p-accent);
    --bs-btn-active-bg: var(--c3p-accent-dark);
    --bs-btn-active-border-color: var(--c3p-accent-dark);
}
a { color: var(--c3p-accent-dark); }
a:hover { color: var(--c3p-accent-darker); }

/* ---------- Navbar ---------- */
.c3p-nav {
    background: var(--c3p-surface);
    border-bottom: 1px solid var(--c3p-border);
    padding: .5rem 1rem;
}
.c3p-nav .navbar-brand {
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--c3p-ink);
    font-size: 1.15rem;
}
.c3p-nav .navbar-brand .accent { color: var(--c3p-accent); }
.c3p-nav .nav-link {
    color: var(--c3p-ink-soft);
    font-weight: 500;
    padding-left: .85rem;
    padding-right: .85rem;
    transition: color .12s ease;
}
.c3p-nav .nav-link:hover,
.c3p-nav .nav-link:focus { color: var(--c3p-accent-dark); }
.c3p-nav .nav-link.admin-link { color: var(--c3p-accent-dark); font-weight: 600; }

/* ---------- Navbar: icon actions (cart + account) ---------- */
.c3p-nav-actions { flex: 0 0 auto; }
.c3p-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
    height: 2.25rem; min-width: 2.25rem; padding: 0 .45rem;
    border: 1px solid transparent; border-radius: .5rem; background: none;
    color: var(--c3p-ink-soft); text-decoration: none;
    transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}
.c3p-icon-btn:hover, .c3p-icon-btn:focus-visible, .c3p-icon-btn.show {
    color: var(--c3p-accent-dark); background: rgba(53, 195, 211, .09); border-color: rgba(53, 195, 211, .3);
}
.c3p-icon-btn:focus { outline: none; }
.c3p-cart-badge {
    position: absolute; top: -.15rem; right: -.15rem;
    min-width: 1.05rem; height: 1.05rem; padding: 0 .22rem;
    border-radius: 999px; background: var(--c3p-accent-dark); color: #fff;
    font-size: .65rem; font-weight: 700; line-height: 1.05rem; text-align: center;
}
.c3p-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.7rem; height: 1.7rem; border-radius: 50%;
    background: var(--c3p-accent); color: #fff;
    font-size: .8rem; font-weight: 700; line-height: 1; text-transform: uppercase;
}
.c3p-user-btn .c3p-caret { opacity: .65; }
.c3p-user-btn::after { display: none; }
.c3p-user-menu { min-width: 13rem; padding: .35rem; border-radius: .6rem; }
.c3p-user-menu .dropdown-item { border-radius: .35rem; padding: .4rem .6rem; }
.c3p-user-menu form { margin: 0; }
.c3p-user-menu .admin-link { color: var(--c3p-accent-dark); font-weight: 600; }
.c3p-user-head { padding: .35rem .6rem .15rem; display: flex; flex-direction: column; line-height: 1.25; }
.c3p-user-head-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c3p-ink-soft); }
.c3p-user-head-name { font-size: .85rem; font-weight: 600; color: var(--c3p-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c3p-learn-menu { border-radius: .6rem; padding: .35rem; min-width: 11rem; }
.c3p-learn-menu .dropdown-item { border-radius: .35rem; padding: .4rem .6rem; }
/* Current section (the Gallery dropdown marks itself + its item on gallery pages). */
.c3p-nav .nav-link.active, .c3p-nav .nav-link.show { color: var(--c3p-accent-dark); }
.c3p-learn-menu .dropdown-item.active,
.c3p-learn-menu .dropdown-item:active { background: var(--c3p-accent-soft); color: var(--c3p-accent-darker); font-weight: 600; }


.c3p-beta-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
    padding: 0.2em 0.5em;
    margin-left: 0.4em;
    border-radius: 0.25rem;
    background: var(--c3p-accent-soft);
    color: var(--c3p-accent-darker);
    border: 1px solid rgba(53, 195, 211, 0.35);
    line-height: 1;
}
.c3p-nav .nav-link .c3p-beta-badge,
.footer-col a .c3p-beta-badge {
    font-size: 0.55rem;
    padding: 0.15em 0.4em;
    margin-left: 0.35em;
    vertical-align: 0.12em;
}
h1 .c3p-beta-badge {
    font-size: 0.45em;
    margin-left: 0.5em;
}

/* ---------- Hero ---------- */
.c3p-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 2.25rem 1.5rem 2rem;
    margin: .5rem 0 1.25rem;
    border-radius: 1.25rem;
    background:
        radial-gradient(1200px 400px at 80% -10%, rgba(53,195,211,.18), transparent 60%),
        radial-gradient(900px 350px at 0% 110%, rgba(53,195,211,.10), transparent 65%),
        linear-gradient(180deg, #fff 0%, #fbfdfe 100%);
    border: 1px solid var(--c3p-border);
}
.c3p-hero h1 {
    font-weight: 800;
    letter-spacing: -.025em;
    margin-bottom: .65rem;
    color: var(--c3p-ink);
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
}
.c3p-hero h1 .accent { color: var(--c3p-accent); }
.c3p-hero p.lead {
    color: var(--c3p-ink-soft);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
    margin-bottom: 0;
}
.c3p-hero .hero-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: center;
    margin-top: 1rem;
}
.c3p-hero .btn { padding: .55rem 1.2rem; font-weight: 600; border-radius: .6rem; }

/* ---------- Homepage carousel (continuous strip) ----------
 * A single marquee track of gallery models rather than discrete slides: the
 * track is translated by JS every frame (no CSS animation, so it can be paused
 * mid-pixel without a jump), and the item list is duplicated so the seam wraps
 * invisibly. Interacting with a card's 3D viewer pauses the whole strip.
 *
 * The `.c3p-fullbleed` modifier breaks out of the bootstrap `.container`
 * (which is what wraps RenderBody) to span the entire viewport width.
 */
.c3p-fullbleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border-radius: 0;
}

.c3p-strip {
    position: relative;
    border-top: 1px solid var(--c3p-border);
    border-bottom: 1px solid var(--c3p-border);
    background: var(--c3p-surface-soft);
    overflow: hidden;
    margin-bottom: 2rem;
    padding: 1rem 0;
    /* Fade the cards into the page edges so cards entering/leaving the strip
     * don't pop at the viewport boundary. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
}

/* Intro above the marquee. Lives inside the normal container (NOT fullbleed)
   so it lines up with the hero; the links sit to the right on desktop and
   stack under the copy on a phone. */
.c3p-strip-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    flex-wrap: wrap;
    margin: 1.75rem 0 .9rem;
}
.c3p-strip-head-text { min-width: 0; flex: 1 1 30rem; }
.c3p-strip-head-text .c3p-section-title { margin-bottom: .35rem; }
.c3p-strip-head-text .c3p-section-sub { margin-left: 0; max-width: 46rem; }
/* "You can buy the file" note under the gallery intro. Tinted card rather than
   another paragraph, so it reads as an offer and not as more body copy. */
.c3p-strip-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: .85rem 0 0;
    padding: .7rem .9rem;
    max-width: 46rem;
    background: var(--c3p-accent-soft);
    border: 1px solid rgba(53, 195, 211, .35);
    border-radius: .7rem;
    color: var(--c3p-ink-soft);
    font-size: .925rem;
    line-height: 1.5;
}
.c3p-strip-note strong { color: var(--c3p-ink); }
.c3p-strip-note-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: .5rem;
    background: #fff;
    color: var(--c3p-accent-dark);
    border: 1px solid rgba(53, 195, 211, .35);
}
.c3p-strip-note a {
    color: var(--c3p-accent-dark);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.c3p-strip-note a:hover { color: var(--c3p-accent-darker); text-decoration: underline; }
.c3p-strip-head-links {
    display: flex;
    align-items: center;
    gap: .5rem 1rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
    padding-bottom: .15rem;
}
.c3p-strip-head-links .btn { font-weight: 600; border-radius: .6rem; white-space: nowrap; }
.c3p-strip-head-link {
    font-size: .9rem;
    font-weight: 600;
    color: var(--c3p-accent-dark);
    text-decoration: none;
    white-space: nowrap;
}
.c3p-strip-head-link:hover { color: var(--c3p-accent-darker); text-decoration: underline; }
@media (max-width: 575.98px) {
    .c3p-strip-head { margin-top: 1.25rem; }
    .c3p-strip-head-links { width: 100%; }
    .c3p-strip-head-links .btn { flex: 1 1 auto; text-align: center; }
}

.c3p-strip-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    will-change: transform;
}

.c3p-strip-card {
    flex: 0 0 auto;
    /* ~3 cards visible on a desktop viewport, 1 on a phone. */
    width: clamp(250px, 30vw, 380px);
    height: clamp(240px, 26vw, 320px);
    background: var(--c3p-surface);
    border: 1px solid var(--c3p-border);
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.c3p-strip-card:hover { border-color: var(--c3p-accent); box-shadow: 0 .75rem 1.25rem rgba(15,23,42,.07); }
.c3p-strip-card.is-held { border-color: var(--c3p-accent); box-shadow: 0 .75rem 1.5rem rgba(15,23,42,.12); }

.c3p-strip-viewer {
    flex: 1 1 auto;
    position: relative;
    min-height: 0;
    background: linear-gradient(180deg, #fff 0%, #f0f4f6 100%);
    cursor: grab;
}
.c3p-strip-viewer:active { cursor: grabbing; }
.c3p-strip-viewer canvas { display: block; width: 100%; height: 100%; }

.c3p-strip-status {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    color: var(--c3p-muted); font-size: .82rem;
    pointer-events: none;
}

/* Hint that the model is draggable; hidden once the user grabs it. */
.c3p-strip-hint {
    position: absolute; left: .6rem; top: .6rem;
    font-size: .68rem; color: var(--c3p-muted);
    background: rgba(255,255,255,.85);
    border: 1px solid var(--c3p-border);
    border-radius: 999px;
    padding: .05rem .5rem;
    pointer-events: none;
    opacity: 1;
    transition: opacity .2s ease;
}
.c3p-strip-card.is-held .c3p-strip-hint { opacity: 0; }

/* The duplicate half of the track is a still frame of the same viewer (see the
   poster capture in Views/Home/Index.cshtml), so it must not advertise dragging
   and must not offer the grab cursor. */
.c3p-strip-card[data-clone="1"] .c3p-strip-hint { display: none; }
.c3p-strip-card[data-clone="1"] .c3p-strip-viewer { cursor: default; }

.c3p-strip-meta {
    flex: 0 0 auto;
    border-top: 1px solid var(--c3p-border);
    padding: .5rem .75rem .6rem;
    background: var(--c3p-surface);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.c3p-strip-meta-text { min-width: 0; flex: 1 1 auto; }
.c3p-strip-meta h3 {
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
    color: var(--c3p-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c3p-strip-tags {
    margin: .15rem 0 0;
    display: flex; gap: .25rem; flex-wrap: nowrap; overflow: hidden;
}
.c3p-strip-tags span {
    font-size: .68rem; background: #f1f5f9; color: #475569;
    padding: .05rem .45rem; border-radius: 999px; white-space: nowrap;
}
.c3p-strip-meta .btn { flex: 0 0 auto; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    /* JS also checks this and leaves the track parked. */
    .c3p-strip { overflow-x: auto; }
}

/* ---------- kit strip (sits directly on top of the model strip) ---------- */
.c3p-strip-note--kits { margin-top: .6rem; }
.c3p-kitstrip {
    margin-bottom: 0;
    border-bottom: 0;
    padding: 1rem 0 .25rem;
}
.c3p-kitstrip + .c3p-strip { border-top: 0; padding-top: .75rem; }
.c3p-kitcard {
    flex: 0 0 auto;
    width: clamp(240px, 24vw, 320px);
    display: flex;
    flex-direction: column;
    background: var(--c3p-surface);
    border: 1px solid var(--c3p-border);
    border-radius: 1rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.c3p-kitcard:hover, .c3p-kitcard:focus-visible {
    border-color: var(--c3p-accent); color: inherit; outline: none;
    box-shadow: 0 .75rem 1.25rem rgba(15,23,42,.08); transform: translateY(-2px);
}
.c3p-kitcard-img { position: relative; display: block; aspect-ratio: 16 / 10; background: linear-gradient(180deg, #fff 0%, #f0f4f6 100%); }
.c3p-kitcard-img img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
.c3p-kitcard-badge {
    position: absolute; left: .6rem; top: .6rem;
    font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: .12rem .5rem; border-radius: 999px; background: var(--c3p-ink); color: #fff;
}
.c3p-kitcard-meta { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .75rem .6rem; border-top: 1px solid var(--c3p-border); }
.c3p-kitcard-title { font-size: .92rem; font-weight: 700; color: var(--c3p-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c3p-kitcard-sub { font-size: .76rem; color: var(--c3p-accent-dark); font-weight: 600; }

/* ---------- CTA cards (the two below the carousel) ---------- */
.c3p-card {
    display: block;
    height: 100%;
    background: var(--c3p-surface);
    border: 1px solid var(--c3p-border);
    border-radius: 1.1rem;
    padding: 1.75rem 1.75rem 1.5rem;
    text-decoration: none;
    color: var(--c3p-ink);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.c3p-card:hover, .c3p-card:focus-visible {
    color: var(--c3p-ink);
    transform: translateY(-3px);
    box-shadow: 0 1.25rem 1.75rem rgba(15,23,42,.07);
    border-color: var(--c3p-accent);
}
.c3p-card .icon-circle {
    width: 56px; height: 56px;
    background: var(--c3p-accent-soft);
    color: var(--c3p-accent-dark);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1rem;
}
.c3p-card h3 { font-weight: 700; margin: 0 0 .35rem; }
.c3p-card p { color: var(--c3p-muted); margin: 0; font-size: .95rem; }
.c3p-card .arrow {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--c3p-accent-dark);
    font-weight: 600;
    margin-top: 1rem;
}

/* ---------- Auth (Login / Register) ---------- */
.c3p-auth {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0 3rem;
}
.c3p-auth-card {
    width: 100%;
    max-width: 440px;
    background:
        radial-gradient(600px 200px at 90% -20%, rgba(53,195,211,.14), transparent 60%),
        linear-gradient(180deg, #fff 0%, #fbfdfe 100%);
    border: 1px solid var(--c3p-border);
    border-radius: 1.25rem;
    padding: 2rem 1.75rem 1.75rem;
    box-shadow: 0 1.25rem 2.5rem rgba(15,23,42,.06);
}
.c3p-auth-title {
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--c3p-ink);
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    margin-bottom: .35rem;
}
.c3p-auth-sub {
    color: var(--c3p-ink-soft);
    font-size: .95rem;
    margin-bottom: 1.5rem;
}
.c3p-auth .form-floating > label { color: var(--c3p-muted); }
.c3p-auth .form-control {
    border-radius: .65rem;
    border-color: var(--c3p-border-strong);
}
.c3p-auth-submit {
    padding: .65rem 1.2rem;
    font-weight: 600;
    border-radius: .65rem;
    margin-top: .25rem;
}
.c3p-auth-error:not(:empty) {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
    padding: .65rem .85rem;
    border-radius: .65rem;
    font-size: .9rem;
    margin-bottom: 1rem;
}
.c3p-auth-error ul { margin: 0; padding-left: 1.1rem; }
.c3p-auth-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    align-items: center;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--c3p-border);
    font-size: .9rem;
    color: var(--c3p-muted);
}
.c3p-auth-links a {
    font-weight: 600;
    text-decoration: none;
}
.c3p-auth-links a:hover { text-decoration: underline; }

/* ---------- Marketing pages & homepage long-form sections ----------
 * Shared design language for everything below the hero/carousel/cards on
 * the home page, and for /how-it-works, /materials, /pricing, /faq, /about.
 * Keeps the same accent + rounded-card + soft-grey palette as the rest of
 * the site so the marketing surface doesn't look bolted on.
 */

/* Page header used at the top of /how-it-works, /pricing, etc. */
.c3p-page-header {
    text-align: center;
    padding: 1.75rem 0 1.25rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--c3p-border);
}
.c3p-page-eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--c3p-accent-dark);
    background: var(--c3p-accent-soft);
    padding: .3rem .7rem;
    border-radius: 999px;
    margin-bottom: .85rem;
}
.c3p-page-title {
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--c3p-ink);
    font-size: clamp(1.85rem, 3.6vw, 2.6rem);
    margin: 0 0 .65rem;
    line-height: 1.15;
}
.c3p-page-title .accent { color: var(--c3p-accent); }
.c3p-page-lead {
    color: var(--c3p-ink-soft);
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.55;
}

/* Section header used inside a page (h2 + optional eyebrow + sub) */
.c3p-section { margin: 2rem 0; }
.c3p-section-header { text-align: center; margin-bottom: 1.5rem; }
.c3p-section-header.left { text-align: left; }
.c3p-eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--c3p-accent-dark);
    margin-bottom: .5rem;
}
.c3p-section-title {
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--c3p-ink);
    font-size: clamp(1.4rem, 2.6vw, 1.95rem);
    margin: 0 0 .5rem;
    line-height: 1.2;
    /* Even out the lines instead of letting the last one keep a single
       hanging word ("…on the same / canvas"). */
    text-wrap: balance;
}
.c3p-section-sub {
    color: var(--c3p-ink-soft);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.55;
    text-wrap: pretty;   /* no one-word last line */
}
.c3p-section-header.left .c3p-section-sub { margin-left: 0; }

/* Inline long-form copy (used inside .c3p-panel and on marketing pages) */
.c3p-prose { max-width: 760px; }
.c3p-prose p { color: var(--c3p-ink-soft); line-height: 1.65; margin-bottom: 1rem; }
.c3p-prose h2 {
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--c3p-ink);
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    margin: 2rem 0 .75rem;
}
.c3p-prose h3 {
    font-weight: 700;
    color: var(--c3p-ink);
    font-size: 1.15rem;
    margin: 1.25rem 0 .35rem;
}
.c3p-prose ul { color: var(--c3p-ink-soft); line-height: 1.65; padding-left: 1.25rem; }
.c3p-prose ul li { margin-bottom: .35rem; }
.c3p-prose ul li strong { color: var(--c3p-ink); }
.c3p-prose code {
    background: var(--c3p-surface-soft);
    border: 1px solid var(--c3p-border);
    padding: .05rem .35rem;
    border-radius: .35rem;
    font-size: .88em;
    color: var(--c3p-ink);
}

/* Panel — a soft card that wraps prose or grids to give them visual weight. */
.c3p-panel {
    background:
        radial-gradient(600px 200px at 100% -20%, rgba(53,195,211,.08), transparent 60%),
        var(--c3p-surface);
    border: 1px solid var(--c3p-border);
    border-radius: 1.25rem;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    margin-bottom: 2rem;
}
.c3p-panel.soft {
    background:
        radial-gradient(900px 320px at 0% 110%, rgba(53,195,211,.08), transparent 65%),
        var(--c3p-surface-soft);
}
.c3p-panel > h2:first-child,
.c3p-panel > .c3p-section-header:first-child { margin-top: 0; }

/* 3-step / how-it-works row (used on the home page and /how-it-works) */
.c3p-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}
.c3p-step {
    background: var(--c3p-surface);
    border: 1px solid var(--c3p-border);
    border-radius: 1.1rem;
    padding: 1.4rem 1.3rem 1.25rem;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.c3p-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 1rem 1.5rem rgba(15,23,42,.06);
    border-color: var(--c3p-accent);
}
.c3p-step .num {
    display: inline-flex;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--c3p-accent-soft);
    color: var(--c3p-accent-dark);
    align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: .75rem;
    border: 1px solid color-mix(in srgb, var(--c3p-accent) 25%, transparent);
}
.c3p-step h3 {
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 .35rem;
    color: var(--c3p-ink);
    letter-spacing: -.01em;
}
.c3p-step p { color: var(--c3p-ink-soft); margin: 0; font-size: .94rem; line-height: 1.55; }

/* Checklist — "Why us" style list with accent check marks. */
.c3p-checklist {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .85rem;
}
.c3p-checklist li {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: var(--c3p-surface);
    border: 1px solid var(--c3p-border);
    border-radius: .9rem;
    padding: .85rem 1rem;
    line-height: 1.5;
    color: var(--c3p-ink-soft);
}
.c3p-checklist li::before {
    content: "";
    flex: 0 0 22px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--c3p-accent);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M6.173 11.293 2.88 8 1.467 9.413l4.706 4.707L15.467 4.827l-1.414-1.414z'/></svg>");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: .15rem;
}
.c3p-checklist li strong { color: var(--c3p-ink); font-weight: 700; display: block; margin-bottom: .1rem; }

/* FAQ list — homepage mini-FAQ + /faq page. Card per question. */
.c3p-faq {
    display: grid;
    gap: .75rem;
    margin: 0;
}
.c3p-faq dt {
    font-weight: 700;
    color: var(--c3p-ink);
    background: var(--c3p-surface);
    border: 1px solid var(--c3p-border);
    border-bottom: 0;
    border-radius: .85rem .85rem 0 0;
    padding: .85rem 1.1rem .5rem;
    position: relative;
    padding-left: 2.5rem;
}
.c3p-faq dt::before {
    content: "?";
    position: absolute;
    left: .85rem; top: .85rem;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--c3p-accent-soft);
    color: var(--c3p-accent-dark);
    font-weight: 800;
    font-size: .85rem;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
}
.c3p-faq dd {
    color: var(--c3p-ink-soft);
    background: var(--c3p-surface);
    border: 1px solid var(--c3p-border);
    border-top: 0;
    border-radius: 0 0 .85rem .85rem;
    padding: 0 1.1rem .9rem 2.5rem;
    margin: 0;
    line-height: 1.6;
}

/* Pricing cards (AI credit packs). */
.c3p-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .85rem;
    margin: .75rem 0 0;
}
.c3p-pricing-card {
    background: var(--c3p-surface);
    border: 1px solid var(--c3p-border);
    border-radius: 1rem;
    padding: 1.1rem 1.1rem 1rem;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.c3p-pricing-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .85rem 1.4rem rgba(15,23,42,.06);
    border-color: var(--c3p-accent);
}
.c3p-pricing-card .credits {
    font-weight: 800;
    color: var(--c3p-ink);
    font-size: 1.5rem;
    letter-spacing: -.02em;
}
.c3p-pricing-card .price {
    color: var(--c3p-accent-dark);
    font-weight: 700;
    font-size: 1.05rem;
    margin-top: .35rem;
}
.c3p-pricing-card .per {
    color: var(--c3p-muted);
    font-size: .82rem;
    margin-top: .25rem;
}

/* The credit-pack cards are the buy buttons — the whole card submits its Stripe
   checkout. `.c3p-pack-form` is the grid item and stretches, so the button fills
   the cell and every card stays the same height regardless of label length. */
.c3p-pack-form {
    margin: 0;
    display: flex;
}
.c3p-pricing-card--buy {
    display: block;
    width: 100%;
    height: 100%;
    font: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.c3p-pricing-card--buy .credits,
.c3p-pricing-card--buy .price,
.c3p-pricing-card--buy .per,
.c3p-pricing-card--buy .buy {
    display: block;
}
.c3p-pricing-card--buy .buy {
    margin-top: .75rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c3p-accent-dark);
}
.c3p-pricing-card--buy:focus-visible {
    outline: 2px solid var(--c3p-accent);
    outline-offset: 2px;
}
.c3p-pricing-note {
    color: var(--c3p-muted);
    font-size: .85rem;
    margin: .7rem 0 0;
}

/* Materials grid — colored swatch + name + blurb. */
.c3p-material-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .85rem;
    margin: .75rem 0 0;
}
.c3p-material {
    background: var(--c3p-surface);
    border: 1px solid var(--c3p-border);
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    transition: transform .15s ease, border-color .15s ease;
}
.c3p-material:hover { transform: translateY(-2px); border-color: var(--c3p-accent); }
.c3p-material .swatch {
    display: inline-block;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--c3p-accent), var(--c3p-accent-darker));
    margin-bottom: .55rem;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}
.c3p-material .name {
    font-weight: 700;
    color: var(--c3p-ink);
    font-size: 1.05rem;
    letter-spacing: -.01em;
}
.c3p-material .blurb {
    color: var(--c3p-ink-soft);
    font-size: .9rem;
    margin-top: .25rem;
    line-height: 1.5;
}

/* Side-by-side card pair (used for "Two ways to get a model" etc.) */
.c3p-card-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

/* Final CTA banner above the footer on marketing pages. */
.c3p-cta {
    text-align: center;
    margin: 3rem 0 1rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: 1.25rem;
    border: 1px solid var(--c3p-border);
    background:
        radial-gradient(800px 280px at 80% -20%, rgba(53,195,211,.22), transparent 60%),
        radial-gradient(700px 260px at 0% 120%, rgba(53,195,211,.16), transparent 65%),
        linear-gradient(180deg, #fff 0%, #fbfdfe 100%);
}
.c3p-cta h2 {
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--c3p-ink);
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    margin: 0 0 .45rem;
}
.c3p-cta p {
    color: var(--c3p-ink-soft);
    max-width: 560px;
    margin: 0 auto 1.1rem;
}
.c3p-cta .hero-actions { margin-top: 0; }

/* ---------- Footer ---------- */
.footer {
    margin-top: 3rem;
    background:
        linear-gradient(180deg, var(--c3p-surface) 0%, var(--c3p-surface-soft) 100%);
    border-top: 1px solid var(--c3p-border);
    color: var(--c3p-ink-soft);
    font-size: .92rem;
    position: relative;
}
.footer::before {
    content: "";
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--c3p-accent) 25%,
        var(--c3p-accent-darker) 50%,
        var(--c3p-accent) 75%,
        transparent 100%);
    opacity: .55;
}
.footer-main {
    padding: 2.25rem 0 1.5rem;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(0, 1fr));
}
@media (max-width: 767px) {
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
    .footer-brand { grid-column: 1 / -1; }
}
.footer-brand .brand {
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--c3p-ink);
    font-size: 1.15rem;
    text-decoration: none;
    display: inline-block;
    margin-bottom: .65rem;
}
.footer-brand .brand .accent { color: var(--c3p-accent); }
.footer-brand .tagline {
    color: var(--c3p-ink-soft);
    line-height: 1.55;
    max-width: 320px;
    margin: 0 0 1rem;
}
.footer-brand .footer-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .95rem;
    border-radius: .65rem;
    background: var(--c3p-accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    font-size: .9rem;
    transition: background .15s ease, transform .15s ease;
}
.footer-brand .footer-cta:hover {
    background: var(--c3p-accent-dark);
    color: #fff;
    transform: translateY(-1px);
}

.footer-col h6 {
    font-size: .72rem;
    font-weight: 700;
    color: var(--c3p-muted);
    text-transform: uppercase;
    letter-spacing: .14em;
    margin: 0 0 .85rem;
}
.footer-col ul {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: .5rem;
}
.footer-col a {
    color: var(--c3p-ink-soft);
    text-decoration: none;
    font-weight: 500;
    transition: color .15s ease;
    /* The contact address is one unbreakable 196px token and the narrowest footer
       column is ~121px — at exactly 768px (iPad portrait, 4-column footer) it
       overflowed its minmax(0,1fr) track and pushed the document 46px wide, which
       makes phones/tablets fit-to-width zoom the whole page out. Let it break. */
    overflow-wrap: anywhere;
}
.footer-col a:hover { color: var(--c3p-accent-dark); }

.footer-bottom {
    border-top: 1px solid var(--c3p-border);
    padding: .95rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .85rem;
    color: var(--c3p-muted);
}
.footer-bottom .brand-mini .accent { color: var(--c3p-accent); }
.footer-bottom .legal { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-bottom .legal a {
    color: var(--c3p-muted);
    text-decoration: none;
}
.footer-bottom .legal a:hover { color: var(--c3p-accent-dark); text-decoration: underline; }


/* ---------------------------------------------------------------------------
 * Homepage: Designer showcase
 * ------------------------------------------------------------------------- */
.c3p-designer {
    margin-top: 1.5rem; margin-bottom: 1rem;   /* side margins come from .c3p-fullbleed */
    padding: 3rem 0 2.5rem;
    background:
        radial-gradient(900px 420px at 15% 0%, rgba(53,195,211,.16), transparent 60%),
        radial-gradient(700px 380px at 95% 100%, rgba(53,195,211,.12), transparent 65%),
        linear-gradient(180deg, #0f172a 0%, #111c33 100%);
    color: #e5e7eb;
}
.c3p-designer-inner { width: min(1500px, 84vw); margin: 0 auto; }
.c3p-designer-head { text-align: center; max-width: 760px; margin: 0 auto 2rem; }
.c3p-designer .c3p-eyebrow { color: var(--c3p-accent); }
.c3p-designer .c3p-section-title { color: #fff; }
.c3p-designer .c3p-section-sub { color: #cbd5e1; }
.c3p-designer-frame {
    border-radius: 1rem; overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(53,195,211,.15);
    background: #fff;
}
.c3p-designer-frame-bar {
    display: flex; align-items: center; gap: .4rem; padding: .5rem .8rem;
    background: #1e293b; border-bottom: 1px solid rgba(255,255,255,.08);
}
.c3p-designer-frame-bar span { width: 10px; height: 10px; border-radius: 50%; background: #475569; }
.c3p-designer-frame-bar span:nth-child(1) { background: #f87171; }
.c3p-designer-frame-bar span:nth-child(2) { background: #fbbf24; }
.c3p-designer-frame-bar span:nth-child(3) { background: #34d399; }
.c3p-designer-frame-bar em { margin-left: .6rem; font-style: normal; font-size: .75rem; color: #94a3b8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.c3p-designer-frame img { display: block; width: 100%; height: auto; }
.c3p-designer-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem;
}
.c3p-designer-tile {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 1rem; overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .2s ease, border-color .2s ease;
}
.c3p-designer-tile:hover { transform: translateY(-3px); border-color: rgba(53,195,211,.5); }
.c3p-designer-tile img { display: block; width: 100%; height: 260px; object-fit: cover; object-position: top center; background: #f6f7f9; }
/* Narrow panel crops: show them at natural width on a soft backdrop instead of blowing them up. */
.c3p-designer-tile img.fit { object-fit: contain; padding: .75rem .75rem 0; }
.c3p-designer-tile > div { padding: 1rem 1.1rem 1.2rem; }
.c3p-designer-tile h3 { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0 0 .35rem; }
.c3p-designer-tile p { color: #cbd5e1; font-size: .93rem; margin: 0; }
.c3p-designer-facts {
    list-style: none; padding: 0; margin: 2rem auto 1.5rem;
    display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem;
    color: #cbd5e1; font-size: .95rem;
}
.c3p-designer-facts li::before { content: "✓"; color: var(--c3p-accent); font-weight: 700; margin-right: .45rem; }
.c3p-designer-facts strong { color: #fff; }
.c3p-designer .hero-actions { display: flex; justify-content: center; }
@media (max-width: 991px) {
    .c3p-designer-grid { grid-template-columns: 1fr; }
    .c3p-designer-tile img { height: 200px; }
}

/* ---- "verify your email" reminder ---------------------------------------
   A banner, not a modal: verifying is optional (it only unlocks the welcome
   credit), so this must never block what the customer came to do. Dismissal
   is per browser session — see _VerifyEmailBanner.cshtml. */
.verify-banner {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    margin: 1rem 0 1.25rem; padding: .7rem .9rem;
    border: 1px solid #bfe9ef; border-radius: .75rem;
    background: #f2fbfc; color: #0f172a; font-size: .9rem;
}
.verify-banner[hidden] { display: none; }
.verify-banner-text { flex: 1 1 18rem; min-width: 0; }
.verify-banner-action {
    flex: 0 0 auto; font-weight: 600; text-decoration: none;
    color: #0e7f8c; white-space: nowrap;
}
.verify-banner-action:hover { text-decoration: underline; color: #0e7f8c; }
.verify-banner-close {
    flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
    font-size: 1.35rem; line-height: 1; color: #64748b; padding: 0 .15rem;
    border-radius: .3rem;
}
.verify-banner-close:hover { color: #0f172a; background: rgba(15,23,42,.06); }

/* Hero footnote marker for the free-credit offer. */
.hero-note { display: block; margin-top: .85rem; font-size: .85rem; color: var(--c3p-muted, #64748b); }
.hero-note .star { color: var(--c3p-accent, #35c3d3); font-weight: 700; }

/* Footnote in the footer that the hero asterisk points at. */
.footer-note {
    margin: .75rem 0 0; font-size: .78rem; color: var(--c3p-muted, #94a3b8);
    line-height: 1.5;
}
.footer-note .star { color: var(--c3p-accent, #35c3d3); font-weight: 700; }
/* The safety-critical footnote carries a link to /terms; a muted footnote colour
   would swallow it, so give it the accent and keep the underline. */
.footer-note.safety-note a { color: var(--c3p-accent, #35c3d3); }
.footer-note.safety-note a:hover { color: var(--c3p-accent-darker, #0e7f8c); }
/* Jumping to #safetyNote must not tuck the paragraph under the sticky navbar. */
.footer-note.safety-note { scroll-margin-top: 5rem; }

/* ---- Collapsed navbar: keep the account menu on screen --------------------
   Under 576px the navbar collapses and .c3p-nav-actions (cart + avatar) lands at
   the bottom-LEFT of the open panel. The menu is `dropdown-menu-end`, i.e. anchored
   to the avatar's right edge, so it ran off the left of the viewport — measured
   left = -66px at 390px wide, which clipped "SIGNED IN AS / thadpinch@gmail.com"
   and the item labels. Make the panel the positioned ancestor and let the menu
   anchor to the panel's right edge instead, so it lands inside the viewport at any
   collapsed width. Desktop (>= 576px) is untouched: the avatar is on the right
   there, where the original anchor is correct. */
@media (max-width: 575.98px) {
    .c3p-nav .navbar-collapse { position: relative; }
    .c3p-nav .navbar-collapse .c3p-nav-actions .dropdown { position: static; }
    .c3p-nav .navbar-collapse .c3p-user-menu { left: auto; right: .85rem; max-width: calc(100vw - 1.5rem); }

    /* Collapsed nav: right-align the link text (brand stays left, like desktop).
       Text-align only — the <li>s stay full width, so Learn's submenu keeps the
       panel width it gets from Bootstrap's static .navbar-nav .dropdown-menu.
       Shrinking the <li>s (align-items: flex-end) squeezes that submenu instead. */
    .c3p-nav .navbar-collapse .navbar-nav .nav-link { text-align: right; }
    /* The open Gallery / Learn submenus follow the same right-hand column; the
       extra right padding lands the item text on the toggle's text edge
       (menu inset + item padding = the link's own .85rem + the menu's offset). */
    .c3p-nav .navbar-collapse .navbar-nav .dropdown-item { text-align: right; padding-right: 1.15rem; }
    /* ...and the cart + avatar under it, so the panel is one right-hand column.
       The padding matches .nav-link's own .85rem, which puts the avatar's right
       edge (354 at 390) exactly on the link text's right edge; the menu uses the
       same offset so an open menu lines up with the avatar instead of the raw
       panel edge. */
    .c3p-nav .navbar-collapse .c3p-nav-actions { justify-content: flex-end; padding-right: .85rem; }
}

/* ---- gallery kits: card shared by /Gallery/Kits and the strip on /Gallery ---- */
.kit-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.kit-card { display: flex; flex-direction: column; min-width: 0; background: var(--c3p-surface); border: 1px solid var(--c3p-border);
    border-radius: 1rem; overflow: hidden; color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.kit-card:hover, .kit-card:focus-visible { transform: translateY(-2px); box-shadow: 0 .75rem 1.25rem rgba(15,23,42,.07); border-color: var(--c3p-accent); color: inherit; outline: none; }
.kit-img { aspect-ratio: 4 / 3; background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); position: relative; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: #94a3b8; }
.kit-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-badge { position: absolute; top: .6rem; left: .6rem; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .15rem .55rem; border-radius: 999px; }
.kit-badge.done { background: var(--c3p-accent); color: #fff; }
.kit-badge.wip { background: #fff7e6; color: #8a5a00; border: 1px solid #f3d9a4; }
.kit-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.kit-body h2 { font-size: 1.05rem; font-weight: 650; margin: 0; }
.kit-body p { margin: 0; color: var(--c3p-muted); font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kit-meta { font-size: .8rem; color: var(--c3p-muted); display: flex; align-items: center; gap: .5rem; }
.kit-bar { flex: 1 1 auto; height: .35rem; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.kit-bar i { display: block; height: 100%; background: var(--c3p-accent); border-radius: 999px; }
.kit-thumbs { display: flex; gap: .3rem; margin-top: .2rem; }
.kit-thumbs img { width: 2.6rem; height: 1.95rem; object-fit: cover; border-radius: .35rem; border: 1px solid var(--c3p-border); background: #f8fafc; }
.kit-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .1rem; }
.kit-tags span { font-size: .7rem; background: #f1f5f9; color: #475569; padding: .08rem .45rem; border-radius: 999px; }
.kit-empty { border: 1px dashed var(--c3p-border); border-radius: 1rem; padding: 2.5rem 1rem; text-align: center; color: var(--c3p-muted); }