/* Floor Visualizer Pro v4 */
.fvp-root *, .fvp-root *::before, .fvp-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fvp-root { font-family: inherit; width: 100%; }

/* ── CAROUSEL ── */
.fvp-carousel-outer { position: relative; }
.fvp-carousel-viewport { overflow: hidden; position: relative; }
.fvp-carousel { display: flex; flex-wrap: nowrap; align-items: center; transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94); }

/* ── THUMBNAILS ── */
.fvp-thumb {
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    background: #f0ece8;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, border-color 0.2s ease, opacity 0.3s ease;
}
.fvp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.fvp-thumb.active { z-index: 2; box-shadow: 0 10px 32px rgba(0,0,0,0.2); }
.fvp-thumb-label { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-weight: 600; line-height: 1.3; }

/* ── ARROWS ── */
.fvp-arrow {
    position: absolute; top: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 20; border: none; outline: none;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    line-height: 1; text-decoration: none;
}
.fvp-arrow-prev { left: 0; transform: translateY(-50%) translateX(-50%); }
.fvp-arrow-next { right: 0; transform: translateY(-50%) translateX(50%); }
.fvp-arrow:hover { opacity: 0.88; box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important; }

/* ── DOTS ── */
.fvp-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.fvp-dot { border-radius: 50%; cursor: pointer; border: none; outline: none; padding: 0; display: block; transition: transform 0.2s, background 0.2s; }
.fvp-dot.active { transform: scale(1.5); }
.fvp-dot:hover  { transform: scale(1.25); }

/* ── COMPARISON ── */
.fvp-comparison-section { margin-top: 24px; }
.fvp-floor-title { text-align: center; }

.fvp-compare-wrap {
    position: relative; width: 100%; overflow: hidden;
    user-select: none; touch-action: pan-y; cursor: ew-resize; background: #e0dbd5;
}
/* Both images — IDENTICAL size, NEVER zoom */
.fvp-compare-wrap .fvp-before-img,
.fvp-compare-wrap .fvp-after-img {
    position: absolute; top: 0; left: 0;
    width: 100% !important; height: 100% !important;
    object-fit: cover; display: block; pointer-events: none;
    max-width: none !important; margin: 0 !important; padding: 0 !important;
}
.fvp-compare-wrap .fvp-after-img {
    clip-path: inset(0 50% 0 0);
    -webkit-clip-path: inset(0 50% 0 0);
    z-index: 2; will-change: clip-path;
}

/* ── DIVIDER & HANDLE ── */
.fvp-divider { position: absolute; top: 0; height: 100%; transform: translateX(-50%); cursor: ew-resize; z-index: 10; left: 50%; }
.fvp-handle {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: ew-resize; z-index: 11;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    transition: box-shadow 0.2s, transform 0.15s;
}
.fvp-handle:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.35); transform: translate(-50%,-50%) scale(1.1); }

/* ── LABELS ── */
.fvp-clabel { position: absolute; bottom: 14px; font-weight: 700; z-index: 12; pointer-events: none; }
.fvp-clabel-before { left: 14px; }
.fvp-clabel-after  { right: 14px; }

/* ── SKELETON ── */
.fvp-skeleton {
    position: absolute; top:0; left:0; right:0; bottom:0; z-index: 20;
    background: linear-gradient(90deg, #e8e3de 25%, #f2ede9 50%, #e8e3de 75%);
    background-size: 300% 100%;
    animation: fvpShimmer 1.6s ease infinite;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.35s ease;
}
.fvp-skeleton.hidden { opacity: 0; pointer-events: none; }
.fvp-skeleton-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0.35; }
@keyframes fvpShimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .fvp-arrow-prev { left: 4px !important; transform: translateY(-50%) !important; }
    .fvp-arrow-next { right: 4px !important; transform: translateY(-50%) !important; }
    .fvp-clabel { font-size: 11px !important; padding: 4px 10px !important; bottom: 8px; }
}
@media (max-width: 480px) {
    .fvp-clabel { display: none !important; }
}