/* =========================================================================
   ez-ffimprint-v2.css — sand-imprint overlay on the flip-flop preview.

   The overlay is an absolutely-positioned layer filling .flipflop-preview,
   holding one SVG that stretches to the photo's box. The marks inside are
   placed in viewBox units by FF_POS, so the layer just has to cover the same
   rectangle as the photo — CSS does no positioning of the marks themselves.

   Requires walker_tokens.css only for the tune rig colours.
   ========================================================================= */

.flipflop-preview{position:relative;}   /* the overlay's containing block */

.ff-imprint{
  position:absolute;
  inset:0;
  pointer-events:none;     /* clicks fall through to the row beneath */
  z-index:2;               /* over the photo, under any loader/placeholder */
}
.ff-imprint-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  overflow:visible;        /* a mark nudged past the edge during tuning still shows */
}
/* the pressed-sand look: a soft highlight/shadow so the fill reads as an
   impression rather than flat paint. Cheap, and it survives any fill colour. */
.ff-imprint-svg .sole-mark{
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.35)) drop-shadow(0 -1px 1px rgba(0,0,0,.22));
}

/* =========================================================================
   TUNE RIG — only present when FF_TUNE is on. Never shipped to a buyer.
   ========================================================================= */
.ff-tune{
  margin-top:10px;
  padding:10px 12px;
  border:1px dashed var(--accent, #3695ab);
  border-radius:8px;
  background:#fff;
  font-family:var(--sans, sans-serif);
  font-size:12px;
  color:var(--ink, #16212c);
  max-width:280px;
}
.ff-tune-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-weight:600; margin-bottom:8px;
}
.ff-tune-foot{
  margin-left:auto; padding:2px 9px; border:1px solid var(--hairline,#ddd3bf);
  border-radius:4px; background:#fff; cursor:pointer; font:inherit; text-transform:capitalize;
}
.ff-tune-foot.on{background:var(--accent,#3695ab); border-color:var(--accent,#3695ab); color:#fff;}
.ff-tune-foot + .ff-tune-foot{margin-left:6px;}

.ff-tune-row{display:flex; align-items:center; gap:6px; margin:5px 0;}
.ff-tune-row > span{width:34px; color:var(--ink-soft,#45433c);}
.ff-tune-row button{
  width:26px; height:26px; line-height:1; border:1px solid var(--hairline,#ddd3bf);
  background:#fff; border-radius:4px; cursor:pointer; font:inherit;
}
.ff-tune-row input{
  width:64px; text-align:center; padding:4px; font:inherit;
  border:1px solid var(--hairline,#ddd3bf); border-radius:4px;
}
.ff-tune-out{
  width:100%; margin-top:8px; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px; border:1px solid var(--hairline,#ddd3bf); border-radius:4px; padding:6px;
}