/* FurnishFinder room banners. Real product photos (studio shots) are laid on a painted room with
   mix-blend-mode: multiply, so their white backgrounds disappear. Scene coordinates are 1600 x 640 units
   (see design/tools/build_banner.py); on phones the view shows the furniture part only (x >= 540).
   Uses the site's tokens from theme.css when present, with fallbacks so previews work on their own. */

.ffb {
  --ffb-ink: var(--ink, #211d17); --ffb-muted: var(--muted, #837a6c); --ffb-bg: var(--bg, #f6f2ea);
  --ffb-line: var(--line, #e6ddcd); --ffb-accent: var(--accent, #1c1a17);
  --ffb-serif: var(--serif, "Playfair Display", serif); --ffb-sans: var(--sans, "DM Sans", sans-serif);
  --ffb-sale: #9b3b2a;
  /* room paint, overridden per theme */
  --wall: #ece4d6; --wall-2: #e4dac9; --floor: #d8c5a6; --floor-2: #cdb690; --window: rgba(255, 251, 240, .75);
  position: relative; background: var(--wall); color: var(--ffb-ink); font-family: var(--ffb-sans); overflow: hidden;
}
.ffb *, .ffb *::before, .ffb *::after { box-sizing: border-box; }

/* ---------- copy ---------- */
.ffb-copy {
  position: absolute; z-index: 5; left: max(5vw, 28px); top: 50%; transform: translateY(-58%);
  width: min(29%, 400px);
}
.ffb-eyebrow { margin: 0 0 14px; text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 700; color: var(--ffb-muted); }
.ffb h1, .ffb h2 { font: 500 clamp(32px, 3.5vw, 54px)/1.05 var(--ffb-serif); letter-spacing: -.01em; margin: 0 0 16px; }
.ffb h1 em, .ffb h2 em { font-style: italic; }
.ffb-sub { margin: 0 0 24px; color: var(--ffb-muted); font-size: 15px; line-height: 1.6; max-width: 380px; }
.ffb-btn {
  display: inline-flex; align-items: center; gap: 10px; background: var(--ffb-accent); color: var(--ffb-bg);
  border-radius: 6px; padding: 13px 20px; font-size: 14px; font-weight: 600; text-decoration: none;
}
.ffb-btn:hover { background: #35312a; }
.ffb-total { margin: 18px 0 0; font-size: 12.5px; color: var(--ffb-muted); }
.ffb-total strong { color: var(--ffb-ink); }

/* ---------- scene ---------- */
.ffb-view { position: relative; width: 100%; aspect-ratio: 1600 / 640; min-height: 420px; overflow: hidden; }
.ffb-stage {
  position: absolute; inset: 0 auto 0 50%; height: 100%; aspect-ratio: 1600 / 640; transform: translateX(-50%);
  container-type: inline-size;
}
@supports not (aspect-ratio: 1) { .ffb-stage { width: 100%; left: 0; transform: none; } }
/* wide screens: the stage keeps its proportions, the wall/floor paint runs full width behind it */
.ffb-backdrop { position: absolute; inset: 0 -60vw; }
.ffb-wall {
  position: absolute; inset: 0 0 26.5% 0;
  background: radial-gradient(ellipse 45% 70% at 58% 30%, rgba(255,255,255,.35), transparent 70%),
              linear-gradient(180deg, var(--wall) 0%, var(--wall-2) 100%);
}
.ffb-floor {
  position: absolute; inset: 73.5% 0 0 0;
  background: repeating-linear-gradient(90deg, transparent 0 7.9%, rgba(80, 60, 30, .07) 7.9% 8%),
              linear-gradient(180deg, var(--floor) 0%, var(--floor-2) 100%);
  box-shadow: inset 0 3px 0 rgba(80, 60, 30, .10);
}
.ffb-window { position: absolute; display: none; }

.ffb-item { position: absolute; display: block; overflow: hidden; mix-blend-mode: multiply; }
.ffb-item img { position: absolute; max-width: none; display: block; }
.ffb-item::after { content: none; }
.ffb-rug { transform-origin: 50% 100%; transform: perspective(70cqw) rotateX(66deg); }

/* ---------- price tags ---------- */
.ffb-tags { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.ffb-tag { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; }
.ffb-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none;
  background: rgba(255, 255, 255, .94); color: var(--ffb-ink); border: 1px solid var(--ffb-line);
  border-radius: 999px; padding: 5px 10px 5px 7px; font-size: clamp(10px, 0.78cqw, 13px); font-weight: 600;
  box-shadow: 0 6px 18px rgba(33, 29, 23, .12); backdrop-filter: blur(4px);
}
.ffb-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ffb-accent); box-shadow: 0 0 0 3px rgba(28,26,23,.12); }
.ffb-off { color: var(--ffb-sale); font-weight: 700; }
.ffb-card {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); width: 230px;
  background: #fff; border: 1px solid var(--ffb-line); border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 22px 44px rgba(33, 29, 23, .16); display: grid; gap: 4px; font-size: 12px; color: var(--ffb-muted);
  opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s;
}
.ffb-left { transform: translate(-88%, -100%); }
.ffb-left .ffb-card { left: auto; right: -12px; transform: translate(0, 4px); }
.ffb-card strong { color: var(--ffb-ink); font-size: 13px; line-height: 1.3; }
.ffb-price { color: var(--ffb-ink); font-weight: 700; }
.ffb-price s { color: var(--ffb-muted); font-weight: 400; margin-left: 4px; }
.ffb-links { display: flex; gap: 12px; margin-top: 4px; }
.ffb-links a { color: var(--ffb-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ffb-tag:hover .ffb-card, .ffb-tag:focus-within .ffb-card { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.ffb-left:hover .ffb-card, .ffb-left:focus-within .ffb-card { transform: translate(0, 0); }

/* ---------- themes ----------
   Room paint must stay light, and any line or pattern must stay clear of the furniture: multiply shows the
   backdrop through the white/cream parts of a photo. Soft glows are fine; outlines are not. */
.ffb-japandi {
  --wall: #eee7da; --wall-2: #e6dccb; --floor: #dcc9a8; --floor-2: #cfb893;
}
.ffb-japandi .ffb-window {  /* paper screen */
  display: block; left: 55%; top: 14%; width: 21%; height: 44%;
  background: repeating-linear-gradient(90deg, transparent 0 24.6%, rgba(120, 95, 60, .16) 24.6% 25%),
              repeating-linear-gradient(0deg, transparent 0 19.5%, rgba(120, 95, 60, .12) 19.5% 20%),
              linear-gradient(180deg, rgba(255, 252, 244, .9), rgba(250, 244, 230, .6));
  outline: 6px solid rgba(160, 128, 88, .22);
}
.ffb-luxe {
  --wall: #f0ebe3; --wall-2: #e7e0d5; --floor: #e4ddd2; --floor-2: #d7cec0; --ffb-accent: #1f2b27;
}
.ffb-luxe .ffb-wall {  /* picture rail + dado line */
  background: linear-gradient(180deg, transparent 0 11%, rgba(176, 141, 72, .35) 11% 11.25%, transparent 11.25%),
              linear-gradient(180deg, var(--wall), var(--wall-2));
}
.ffb-luxe .ffb-floor {
  background: repeating-linear-gradient(115deg, transparent 0 3.2%, rgba(120, 100, 70, .07) 3.2% 3.3%),
              linear-gradient(180deg, var(--floor), var(--floor-2));
}
.ffb-luxe .ffb-window {  /* arched mirror glow */
  display: block; left: 52%; top: 17%; width: 22%; height: 56.5%; border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(246,240,230,.35) 60%, transparent);
}
.ffb-luxe h1 em, .ffb-luxe h2 em { color: #8a6a2c; }
.ffb-warm {
  --wall: #efe2d1; --wall-2: #e8d6c0; --floor: #dcc4a4; --floor-2: #cfb38e; --ffb-accent: #3a2a20;
}
.ffb-warm .ffb-window {  /* plaster arch */
  display: block; left: 45%; top: 6%; width: 25%; height: 60%; border-radius: 999px 999px 0 0;
  background: radial-gradient(ellipse at 50% 20%, rgba(255, 250, 240, .9), rgba(246, 232, 212, .5) 70%);
}

/* ---------- phones / narrow ---------- */
@media (max-width: 820px) {
  .ffb-copy { position: static; transform: none; width: auto; padding: 32px 16px 8px; }
  .ffb-sub { font-size: 14px; margin-bottom: 18px; }
  .ffb-view { aspect-ratio: 1060 / 640; min-height: 0; }
  /* show x = 540..1600, y = 70..640 of the scene: the furniture, a little larger */
  .ffb-view { aspect-ratio: 1060 / 570; }
  .ffb-stage { left: 0; top: -12.281%; height: 112.281%; width: 150.943%; transform: translateX(-33.75%); aspect-ratio: auto; }
  .ffb-edge { transform: translate(-12%, -100%); }
  .ffb-edge .ffb-card { left: -12px; transform: translate(0, 4px); }
  .ffb-edge:hover .ffb-card, .ffb-edge:focus-within .ffb-card { transform: translate(0, 0); }
  .ffb-pill { font-size: 10px; padding: 3px 7px 3px 5px; }
  .ffb-card { width: 190px; }
}
.ffb-turn { position: absolute; display: block; overflow: hidden; transform: rotate(90deg); }

/* ---------- photo mode: one finished room picture + hover dots (spec "mode": "photo") ---------- */
.ffp { overflow: visible; display: grid; grid-template-columns: minmax(260px, .5fr) 1.5fr; gap: 0 clamp(24px, 3vw, 48px);
       align-items: center; padding: clamp(28px, 4vw, 56px) max(5vw, 16px); background: var(--ffb-bg); }
.ffp .ffb-copy { position: static; transform: none; width: auto; }
.ffp-scene { position: relative; border-radius: 14px; overflow: visible; }
.ffp-photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.ffb-dot-tag { transform: translate(-50%, -50%); z-index: 2; }
.ffb-dot-tag:hover, .ffb-dot-tag:focus-within { z-index: 5; }
.ffb-dot {
  width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center;
  background: rgba(255, 255, 255, .45); box-shadow: 0 2px 10px rgba(33, 29, 23, .25); animation: ffb-pulse 2.4s ease-out infinite;
}
.ffb-dot i { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.ffb-dot-tag:hover .ffb-dot, .ffb-dot-tag:focus-within .ffb-dot { animation: none; background: rgba(255, 255, 255, .8); }
@keyframes ffb-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .ffb-dot { animation: none; } }
.ffb-dot-tag .ffb-card { bottom: calc(100% + 10px); }
.ffb-dot-tag.ffb-below .ffb-card { bottom: auto; top: calc(100% + 10px); }
.ffb-card img { width: 100%; height: 120px; object-fit: contain; background: #fff; margin-bottom: 4px; }
.ffb-dot-tag.ffb-left, .ffb-dot-tag.ffb-edge { transform: translate(-50%, -50%); }
.ffb-dot-tag.ffb-edge .ffb-card { left: -8px; transform: translate(0, 4px); }
.ffb-dot-tag.ffb-edge:hover .ffb-card, .ffb-dot-tag.ffb-edge:focus-within .ffb-card { transform: translate(0, 0); }
.ffp-strip { grid-column: 1 / -1; display: flex; gap: 10px; overflow-x: auto; padding: 18px 0 2px; scrollbar-width: thin; }
.ffp-item { flex: 1 0 150px; max-width: 220px; display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ffb-ink);
            background: #fff; border: 1px solid var(--ffb-line); border-radius: 10px; padding: 8px; }
.ffp-item img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.ffp-item span { display: grid; gap: 1px; min-width: 0; font-size: 12px; }
.ffp-item strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ffp-item small { color: var(--ffb-muted); }
.ffp-item em { font-style: normal; font-weight: 700; }
@media (max-width: 820px) {
  .ffp { grid-template-columns: 1fr; padding: 0 0 16px; }
  .ffp .ffb-copy { padding: 28px 16px 20px; }
  .ffp-scene, .ffp-photo { border-radius: 0; }
  .ffp-strip { padding: 14px 16px 0; }
  .ffb-dot { width: 24px; height: 24px; } .ffb-dot i { width: 11px; height: 11px; }
}