/* components part 8 of 11 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */


/* A panorama opens into a viewer rather than a flat image, so it has to announce
   itself before the click. This is the one mark left on a frame, and it is a
   control's affordance, not a caption. */
/* The 360 marker reads like a video thumbnail's play button: centred, large enough to
   be the first thing you see, and light rather than heavy so it sits ON the image
   instead of punching a hole in it. A corner chip said "this is tagged 360"; a centre
   disc says "this one opens and turns", which is the thing worth communicating. */
.pbadge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
        width:62px;height:62px;display:grid;place-items:center;border-radius:50%;
        pointer-events:none;background:rgba(255,255,255,.24);
        -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
        border:1.5px solid rgba(255,255,255,.7);
        box-shadow:0 2px 14px rgba(16,15,13,.22);
        color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;
        line-height:1;transition:background .25s,transform .25s,border-color .25s}
.pbadge svg{position:absolute;inset:0;width:100%;height:100%;
            fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.1}@media(prefers-reduced-motion:no-preference){
  .pbadge svg{animation:pspin 9s linear infinite}}@keyframes pspin{to{transform:rotate(360deg)}}@media(max-width:700px){.pbadge{width:50px;height:50px;font-size:10px}}
.c.pano:hover .pbadge{background:rgba(255,255,255,.34);border-color:#fff;transform:translate(-50%,-50%) scale(1.06)}

/* ---------------------------------------------------------------- controls
   Every background below is stated explicitly, including on :hover. The parent theme
   paints `button:hover{background-color:#CC3366}`, and a rule that sets only colour
   and border lets that pink through — which is exactly what happened on the chips. */

/* Sidebar beside the wall on desktop; a horizontal strip below ~1100px, where a rail
   would eat a third of the width that the images need. */
/* The rail is inset from the left, the wall is not inset from the right. The old
   inset was the page gutter (72px), which pushed the filters into the middle of
   nowhere while the images they filter ran off the edge. */
/* The site's `section{padding-block:clamp(78px,10vw,128px)}` is right for a pf-band of
   prose and wrong here: the wall IS the page, and 128px of white between the hero and
   the first frame reads as a loading gap. */
.pf{display:grid;grid-template-columns:212px minmax(0,1fr);gap:clamp(18px,2vw,32px);
    align-items:start;padding-left:clamp(16px,2.2vw,34px);padding-right:0;
    padding-block:clamp(14px,1.6vw,26px) clamp(30px,4vw,60px)}
/* ...and the line above has been silently losing the cascade since it was written.
   `<section class="pf">` is also matched by the prototype's
   `section:not([class*="elementor"]){padding-block:clamp(78px,10vw,128px)}`, and :not()
   takes the specificity of its argument — so that rule is (0,1,1) against `.pf` at (0,1,0)
   and wins on specificity no matter what the source order is. The wall opened on 128px of
   white instead of the intended 25.6px. Restate it at (0,1,1) and the tie breaks our way
   on source order, because this sheet is appended after the prototype's.
   padding-block ONLY: widening `.pf` itself would also outrank the <=1100px rule below and
   put the 34px left inset back on the wall on every phone. */
section.pf{padding-block:clamp(14px,1.6vw,26px) clamp(30px,4vw,60px)}
/* Five filter groups are taller than a laptop viewport, and a sticky rail that
   overflows just loses its bottom rows — including Clear filters. Scroll inside it. */
.pf-side{position:sticky;top:calc(var(--head-h) + 15px);display:flex;flex-direction:column;gap:20px;
         padding:4px 6px 24px 0;min-width:0;
         max-height:calc(100vh - 116px);overflow-y:auto;overscroll-behavior:contain;
         scrollbar-width:thin;scrollbar-color:var(--hair) transparent}
.pf-side::-webkit-scrollbar{width:5px}
.pf-side::-webkit-scrollbar-thumb{background:var(--hair);border-radius:3px}
.pf-side::-webkit-scrollbar-track{background:transparent}
.fgroup{display:flex;flex-direction:column;gap:4px;min-width:0}
/* The parent theme sets h3 from the Elementor kit as `.elementor-kit-5 h3`, which
   is one specificity point above a bare `.fg-t` — the rail's labels came out at
   heading size. Scoping to .pf-side wins without an !important. */
.pf-side .fg-t{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.13em;
      line-height:1.3;text-transform:uppercase;color:var(--muted)}
.f{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
   border:1px solid transparent;background:transparent;border-radius:8px;cursor:pointer;
   padding:7px 10px;font-family:var(--sans);font-size:13.5px;font-weight:600;
   color:var(--body);transition:.16s}
.fi{width:15px;height:15px;flex:0 0 15px;opacity:.62}
.ff{width:15px;flex:0 0 15px;font-size:12.5px;line-height:1;text-align:center;
    font-style:normal}
.f span:not(.ff){flex:1 1 auto;min-width:0}
.f i{font-style:normal;font-size:11.5px;color:var(--muted);
     font-variant-numeric:tabular-nums}
/* :hover AND :focus, every time. The parent theme's reset paints BOTH halves of
   button:hover/button:focus solid #CC3366; our components defended hover and forgot
   focus, so every chip flashed pink on click and stayed pink until focus moved. */
.f:hover,.f:focus{background:var(--grey);color:var(--ink)}
.f:hover .fi,.f:focus .fi{opacity:1}
.f.on:focus{background:var(--ink);color:#fff}
.f:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.f.on{background:var(--ink);border-color:var(--ink);color:#fff}
.f.on .fi{opacity:1}
.f.on i{color:rgba(255,255,255,.62)}
.f[disabled]{opacity:.3;cursor:not-allowed;background:transparent}
/* The long tail of markets, folded away until asked for. */
.fgroup .extra{display:none}
.fgroup.open .extra{display:flex}
.fg-more{align-self:flex-start;margin-top:3px;background:none;border:0;padding:6px 10px;
         cursor:pointer;font-family:var(--sans);font-size:12px;font-weight:700;
         letter-spacing:.03em;color:var(--muted);text-decoration:underline;
         text-underline-offset:3px}
.fg-more:hover,.fg-more:focus{color:var(--ink);background:none}
.fg-more:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.fg-more .mo-b,.fgroup.open .fg-more .mo-a{display:none}
.fgroup.open .fg-more .mo-b{display:inline}

/* ------------------------------------------------------------------ the rail,
   below 1100px. There was no rule here at all: `.pf` kept its `212px minmax(0,1fr)`
   grid down to every width, so on a 375px phone the sidebar took 212 of it and the
   wall was left 129px wide — every frame rendered about 55px across, which is a
   thumbnail of a thumbnail. The comment above `.pf` has described this breakpoint
   since the file was written; the breakpoint itself was never added.

   The rail becomes four horizontal scrollers, one per axis, label first. Swiping a
   row of chips is the mobile idiom for this and it costs four short rows above the
   wall instead of a full screen of stacked filters. The long-tail markets that hide
   behind "more" on desktop are simply shown here — in a scroller there is nothing
   to save by folding them, and it removes a tap. */
/* On desktop the wrapper must not exist as a box — display:contents drops it out of
   the layout entirely so the three groups stay direct flex children of the rail. */
.fg-rest{display:contents}
.fg-toggle{display:none}