/* =========================================================================
   BeAutos /dealer-tools — dashboard hero mockup: fit & position.
   Loaded AFTER dealer-tools.css and scoped to this page only.
   The source used width:min(1380px,118vw) + scale(1.04) => ~123vw wide,
   which clipped the mockup on any screen narrower than ~1450px. These
   rules keep it fully inside the viewport and raise it toward the navbar.
   ========================================================================= */

/* Fit the mockup inside the viewport (was min(1380px, 118vw)). */
.dealer-tools-page .fd-scene {
    width: min(1380px, 93vw);
}

/* Same entrance/float motion, but scale(1) and a higher resting position
   (was scale(1.04) + translateY(26px) -> too big and sat too low). */
@keyframes fdIn {
    from { opacity: 0; transform: rotateX(16deg) translateY(70px) scale(1); }
    to   { opacity: 1; transform: rotateX(13deg) translateY(-12px) scale(1); }
}
@keyframes fdFloat {
    0%, 100% { transform: rotateX(13deg) translateY(-12px) scale(1); }
    50%      { transform: rotateX(12deg) translateY(-24px) scale(1); }
}

/* Tablet (sidebar + right rail hidden): a touch narrower + raised. */
@media (max-width: 1024px) {
    .dealer-tools-page .fd-scene {
        width: min(680px, 90vw);
    }
}
@keyframes fdInM {
    from { opacity: 0; transform: rotateX(8deg) translateY(46px) scale(1); }
    to   { opacity: 1; transform: rotateX(7deg) translateY(-6px) scale(1); }
}
@keyframes fdFloatM {
    0%, 100% { transform: rotateX(7deg) translateY(-6px) scale(1); }
    50%      { transform: rotateX(6deg) translateY(-14px) scale(1); }
}

/* Short viewports (landscape tablets / small laptops): scale the mockup
   down so it sits fully below the fixed navbar instead of clipping. */
@media (max-height: 700px) and (min-width: 768px) {
    .dealer-tools-page .fd-scene {
        animation: none !important;
        transform: rotateX(10deg) translateY(-4px) scale(0.8);
    }
}

/* Reduced motion: static, no float, same raised position. */
@media (prefers-reduced-motion: reduce) {
    .dealer-tools-page .fd-scene {
        animation: none !important;
        transform: rotateX(13deg) translateY(-12px) scale(1);
    }
}

/* Uniform, clean background — no pink orbs/glows, no per-section tints. */
.dealer-tools-page .orb { display: none; }
.dealer-tools-page .fd-stage::before { display: none; }
.dealer-tools-page .section-alt { background: transparent; }
.dealer-tools-page .section-gradient { background: transparent; }
.dealer-tools-page .cta-section { background: transparent; }

/* BETA tag: match the primary "other tags" style instead of amber. */
.dealer-tools-page .beta-pill {
    color: var(--primary);
    background: var(--primary-soft);
    border: 1px solid rgba(255, 77, 61, 0.3);
}

/* Parts & Kits: render the tiles like BeAutos listing cards (image/name/price). */
.dealer-tools-page .pk-parts-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dealer-tools-page .pk-tile { padding: 0; overflow: hidden; }
.dealer-tools-page .pk-tile-photo { width: 100%; aspect-ratio: 4/3; background: var(--bg-alt); border-bottom: 1px solid var(--border); color: var(--text-faint); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.dealer-tools-page .pk-tile-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.dealer-tools-page .pk-tile-name { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dealer-tools-page .pk-tile-price { font-size: 0.95rem; }

/* CTA: stack + center so the primary "Start with BeDealer" button is centered. */
.dealer-tools-page .cta-actions { flex-direction: column; align-items: center; gap: 14px; }