/* The room planner ("Will it fit?"): used by the product pages, the homepage band and the /will-it-fit page.
   The drawing and controls are shared; each page frames them in its own way (see the sections below).
   Behaviour lives in assets/js/fit-planner.js. */

/* ---- shared: the planner itself ---- */
.v2-fit{
  margin:84px 0 0;padding:clamp(28px,4.5vw,60px);border-radius:32px;color:var(--warm-white);
  background:radial-gradient(120% 100% at 85% 0%,#0f5a64 0%,var(--teal) 55%,#052e34 100%);
  position:relative;overflow:hidden;
}
.v2-fit[hidden]{display:none;}
.v2-fit::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(201,169,106,.3);pointer-events:none;}
.v2-fit-head{max-width:560px;margin-bottom:34px;position:relative;z-index:1;}
.v2-fit-head .eyebrow{color:var(--gold);}
.v2-fit-head h2{font-size:clamp(28px,3.4vw,44px);margin:12px 0 12px;color:#fff;}
.v2-fit-head h2 em{font-style:italic;color:var(--gold);}
.v2-fit-head p{color:rgba(246,243,238,.8);font-size:14.5px;line-height:1.7;margin:0;}
.v2-fit-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.7fr);gap:32px;align-items:start;position:relative;z-index:1;}
.v2-room-pick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.v2-room-pick button{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 16px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(246,243,238,.25);background:rgba(246,243,238,.06);color:#fff;font:inherit;text-align:left;
  transition:background .3s,border-color .3s,color .3s;
}
.v2-room-pick button strong{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;}
.v2-room-pick button span{font-size:12px;opacity:.75;}
.v2-room-pick button:hover{border-color:var(--gold);}
.v2-room-pick button.on{background:var(--gold);border-color:var(--gold);color:#05282d;}
.v2-room-pick button:focus-visible{outline:2px solid #fff;outline-offset:3px;}
@keyframes v2Blocked{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.v2-piece.blocked .v2-body{animation:v2Blocked .38s ease;stroke:#e0a39a;stroke-width:3;}
.v2-plan{width:100%;display:block;margin:0 auto;border-radius:20px;background:rgba(5,40,46,.55);border:1px solid rgba(246,243,238,.14);touch-action:none;}
.v2-floor{fill:#f5efe4;}
.v2-grid{stroke:rgba(7,63,70,.09);stroke-width:1;}
.v2-walls{fill:none;stroke:var(--gold);stroke-width:5;}
.v2-wall-label{fill:rgba(246,243,238,.75);font-family:var(--font-sans);letter-spacing:.06em;}
.v2-scale{stroke:rgba(246,243,238,.8);stroke-width:3;}
.v2-piece{cursor:grab;outline:none;}
.v2-piece:active{cursor:grabbing;}
.v2-body{stroke:rgba(5,40,46,.55);stroke-width:2;filter:drop-shadow(0 6px 8px rgba(7,20,22,.28));transition:stroke .2s;}
.v2-body.footprint{fill-opacity:.88;stroke-dasharray:9 6;}
.v2-back{fill:rgba(0,0,0,.2);pointer-events:none;}
.v2-piece.sel .v2-body,.v2-piece:focus-visible .v2-body{stroke:var(--gold);stroke-width:4;stroke-dasharray:none;}
.v2-piece-label{fill:#fff;font-weight:600;font-family:var(--font-sans);pointer-events:none;paint-order:stroke;stroke:rgba(5,40,46,.5);stroke-width:3px;}
.v2-piece-label.dark{fill:#05282d;stroke:rgba(255,255,255,.55);}
.v2-gap{stroke:#0e5560;stroke-width:2;stroke-dasharray:5 5;pointer-events:none;}
.v2-gap-label{fill:#0e5560;font-weight:600;font-family:var(--font-sans);paint-order:stroke;stroke:#f5efe4;stroke-width:3px;pointer-events:none;}
.v2-fit-side{display:flex;flex-direction:column;gap:18px;}
.v2-fit-custom{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.v2-fit-custom label{display:flex;flex-direction:column;gap:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,243,238,.7);}
.v2-unit{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:14px;color:#fff;}
.v2-unit input{width:100%;min-width:0;padding:11px 12px;border-radius:12px;border:1px solid rgba(246,243,238,.3);background:rgba(246,243,238,.08);color:#fff;font:inherit;font-size:15px;}
.v2-unit input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.v2-fit-verdict{padding:16px 18px;border-radius:16px;font-size:14px;line-height:1.55;border:1px solid rgba(246,243,238,.2);background:rgba(246,243,238,.07);}
.v2-fit-verdict strong{display:block;font-family:var(--font-serif);font-weight:400;font-size:20px;margin-bottom:3px;}
.v2-fit-verdict.ok{border-color:rgba(201,169,106,.6);}
.v2-fit-verdict.ok strong{color:var(--gold);}
.v2-fit-verdict.bad{border-color:#e7a08a;background:rgba(231,160,138,.12);}
.v2-fit-verdict.bad strong{color:#f2b9a6;}
.v2-fit-gaps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.v2-fit-gaps li{padding:11px 14px;border-radius:12px;background:rgba(246,243,238,.07);display:flex;flex-direction:column;gap:2px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(246,243,238,.65);}
.v2-fit-gaps strong{font-size:17px;letter-spacing:0;text-transform:none;color:#fff;font-weight:600;font-variant-numeric:tabular-nums;}
.v2-fit-tools{display:flex;gap:10px;}
.v2-fit-tools button{flex:1;padding:13px 16px;border-radius:999px;border:1px solid rgba(246,243,238,.4);background:transparent;color:#fff;font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:background .3s,color .3s,border-color .3s;}
.v2-fit-tools button:hover{background:var(--gold);border-color:var(--gold);color:#05282d;}
.v2-fit-tools button:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.v2-fit-note{margin:0;font-size:12px;line-height:1.6;color:rgba(246,243,238,.6);}


@media(max-width:1023px){
  .v2-fit-body{grid-template-columns:1fr;}
}
@media(max-width:767px){
  .v2-fit{margin-top:56px;border-radius:24px;padding:26px 18px;}
  .v2-room-pick button{flex:1;}
}

.v2-fit-open{display:inline-block;margin-top:2px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--gold);border-bottom:1px solid rgba(201,169,106,.5);padding-bottom:4px;width:fit-content;transition:color .3s,border-color .3s;}
.v2-fit-open:hover{color:#fff;border-color:#fff;}
.v2-fit-open:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}

/* ======================================================================
   HOMEPAGE BAND: a dark section between the two light ones around it.
   ====================================================================== */
.fh{background:radial-gradient(120% 100% at 80% 0%,#0f5a64 0%,var(--teal) 55%,#052e34 100%);color:var(--warm-white);padding:var(--space-xl,96px) 0;position:relative;overflow:hidden;}
.fh::after{content:"";position:absolute;left:-90px;bottom:-90px;width:300px;height:300px;border-radius:50%;border:1px solid rgba(201,169,106,.28);pointer-events:none;}
.fh-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center;position:relative;z-index:1;}
.fh .eyebrow{color:var(--gold);}
.fh h2{font-size:clamp(30px,3.8vw,50px);color:#fff;margin:14px 0 14px;line-height:1.08;}
.fh h2 em{font-style:italic;color:var(--gold);}
.fh-copy > p{color:rgba(246,243,238,.82);font-size:15px;line-height:1.75;max-width:440px;margin:0 0 22px;}
.fh-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;}
.fh-chip{
  display:flex;align-items:center;gap:9px;padding:5px 15px 5px 5px;border-radius:999px;cursor:pointer;font:inherit;color:#fff;
  border:1px solid rgba(246,243,238,.28);background:rgba(246,243,238,.07);font-size:12.5px;min-height:48px;
  transition:background .3s,border-color .3s,color .3s;
}
.fh-chip img{width:38px;height:38px;border-radius:50%;object-fit:contain;background:rgba(245,239,228,.92);padding:4px;flex:none;}
.fh-chip:hover{border-color:var(--gold);}
.fh-chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#05282d;}
.fh-chip:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.fh .v2-fit-verdict{margin-bottom:22px;}
.fh-cta{display:flex;gap:16px 22px;align-items:center;flex-wrap:wrap;}
.fh-cta .btn-primary{background:var(--gold);border-color:var(--gold);color:#05282d;}
.fh-cta .btn-primary:hover{background:#fff;border-color:#fff;color:var(--teal);}
.fh-stage{min-width:0;}
.fh-stage .v2-room-pick{margin-bottom:14px;}
.fh-tools{display:flex;gap:10px;margin-top:12px;}
.fh-tools button{padding:11px 18px;border-radius:999px;border:1px solid rgba(246,243,238,.4);background:transparent;color:#fff;font:inherit;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:background .3s,color .3s,border-color .3s;}
.fh-tools button:hover{background:var(--gold);border-color:var(--gold);color:#05282d;}
.fh-hint{margin:12px 0 0;font-size:12px;color:rgba(246,243,238,.6);}
@media(max-width:1023px){.fh-grid{grid-template-columns:1fr;}}
@media(max-width:767px){.fh{padding:64px 0;}}

/* ======================================================================
   /will-it-fit : the dedicated room-planner page
   ====================================================================== */
.fp-hero{background:radial-gradient(120% 140% at 85% 0%,#0f5a64 0%,var(--teal) 58%,#052e34 100%);color:var(--warm-white);padding:clamp(44px,7vw,84px) 0 clamp(36px,5vw,60px);}
.fp-hero .eyebrow{color:var(--gold);}
.fp-hero h1{font-size:clamp(34px,5vw,62px);color:#fff;margin:14px 0 14px;line-height:1.05;}
.fp-hero h1 em{font-style:italic;color:var(--gold);}
.fp-hero p{max-width:560px;color:rgba(246,243,238,.82);font-size:15.5px;line-height:1.75;margin:0;}
.fp{background:var(--warm-white);padding:clamp(34px,5vw,60px) 0 var(--space-xl,96px);}
.fp-step{display:flex;align-items:center;gap:12px;font-family:var(--font-sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:600;margin:0;}
.fp-step span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--teal);color:var(--gold);font-size:12px;letter-spacing:0;}
.fp-bar{display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap;margin-bottom:18px;}
.fp-filter{display:flex;gap:8px;flex-wrap:wrap;}
.fp-filter button{padding:10px 16px;border-radius:999px;border:1px solid var(--stone);background:transparent;color:var(--charcoal);font:inherit;font-size:12px;cursor:pointer;min-height:40px;transition:background .3s,color .3s,border-color .3s;}
.fp-filter button:hover{border-color:var(--gold);}
.fp-filter button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--warm-white);}
.fp-filter button:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.fp-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:12px;margin-bottom:clamp(30px,4vw,48px);}
.fp-sofa{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:10px 10px 14px;border-radius:18px;text-align:left;cursor:pointer;font:inherit;color:var(--charcoal);
  border:1px solid var(--stone);background:var(--cream);transition:border-color .3s,box-shadow .3s,transform .3s var(--ease-soft);
}
.fp-sofa[hidden]{display:none;}
.fp-sofa:hover{border-color:var(--gold);transform:translateY(-2px);}
.fp-sofa[aria-pressed="true"]{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal),0 18px 30px -22px rgba(7,63,70,.5);}
.fp-sofa:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.fp-sofa .pic{aspect-ratio:4/3;border-radius:12px;background:radial-gradient(70% 80% at 50% 55%,rgba(7,63,70,.9) 0 42%,transparent 43%),var(--warm-white);display:grid;place-items:center;overflow:hidden;}
.fp-sofa .pic img{width:92%;height:92%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(7,20,22,.22));}
.fp-sofa strong{font-size:13px;line-height:1.25;font-weight:600;padding:0 4px;}
.fp-sofa small{font-size:11.5px;color:var(--muted);padding:0 4px;font-variant-numeric:tabular-nums;}
.fp-work{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);gap:28px;padding:clamp(22px,3.5vw,44px);border-radius:32px;color:var(--warm-white);
  background:radial-gradient(120% 100% at 85% 0%,#0f5a64 0%,var(--teal) 55%,#052e34 100%);align-items:start;}
.fp-work .fp-step{color:#fff;margin-bottom:14px;}
.fp-work .fp-step span{background:var(--gold);color:#05282d;}
.fp-canvas{min-width:0;}
.fp-side{display:flex;flex-direction:column;gap:16px;min-width:0;}
.fp-card{border-radius:20px;background:rgba(246,243,238,.08);border:1px solid rgba(246,243,238,.18);overflow:hidden;}
.fp-card .shot{aspect-ratio:16/10;background:radial-gradient(60% 75% at 50% 56%,rgba(245,239,228,.95) 0 48%,rgba(245,239,228,.18) 49%),transparent;display:grid;place-items:center;padding:14px;}
.fp-card .shot img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(7,20,22,.35));transition:opacity .25s;}
.fp-card .shot img.swap{opacity:.25;}
.fp-card .meta{padding:14px 18px 18px;}
.fp-card h3{font-family:var(--font-serif);font-weight:400;font-size:22px;line-height:1.15;color:#fff;margin:0 0 4px;}
.fp-card .dims{font-size:12.5px;color:rgba(246,243,238,.72);margin:0 0 12px;}
.fp-swatches{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.fp-swatches button{width:30px;height:30px;border-radius:50%;border:2px solid rgba(246,243,238,.35);cursor:pointer;padding:0;position:relative;transition:transform .25s var(--ease-soft),border-color .25s;}
.fp-swatches button::after{content:"";position:absolute;inset:-8px;border-radius:50%;}
.fp-swatches button:hover{transform:scale(1.12);}
.fp-swatches button[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 2px #0b4c55;}
.fp-swatches button:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.fp-colour-name{font-size:12px;color:rgba(246,243,238,.8);margin:-6px 0 12px;}
.fp-links{display:flex;gap:12px 18px;align-items:center;flex-wrap:wrap;}
.fp-links .price{font-family:var(--font-serif);font-size:22px;color:var(--gold);}
.fp-links a.btn{padding:12px 20px;font-size:11.5px;}
.fp-links .btn-primary{background:var(--gold);border-color:var(--gold);color:#05282d;}
.fp-links .btn-primary:hover{background:#fff;border-color:#fff;}
.fp-work .v2-plan{max-width:620px;}
@media(max-width:1023px){.fp-work{grid-template-columns:1fr;}}
@media(max-width:767px){
  .fp-work{border-radius:24px;padding:20px 16px;}
  .fp-picker{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fp-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);}
  .fp-filter::-webkit-scrollbar{display:none;}
  .fp-filter button{flex:none;}
}
@media(prefers-reduced-motion:reduce){.fp-sofa,.fp-swatches button,.fh-chip,.fp-card .shot img{transition:none;}}

/* the keyboard hint under the planner: arrow keys and R, shown to everyone (the pieces are focusable) */
.v2-fit-keys,.fh-keys{margin:0;font-size:12px;line-height:1.9;color:rgba(246,243,238,.6);}
.v2-fit-keys kbd,.fh-keys kbd{display:inline-block;min-width:22px;padding:0 6px;font:600 11px/20px var(--font-sans);text-align:center;color:var(--gold);background:rgba(246,243,238,.08);border:1px solid rgba(201,169,106,.4);border-radius:6px;}

/* touch screens: the finger-twist hint replaces the keyboard one */
.fit-touch{display:none;margin:0;font-size:12px;line-height:1.7;color:rgba(246,243,238,.7);}
.fit-touch b{color:var(--gold);font-weight:600;}
@media(pointer:coarse){
  .fit-touch{display:block;}
  .v2-fit-keys,.fh-keys{display:none;}
}