/* ============================================================
   UMBER Fit Finder — Vitruvian size study (pairs with js/fit-finder.js)
   Uses the product page tokens; fallbacks keep it standalone.
   ============================================================ */
.ff-overlay{
  position:fixed; inset:0; z-index:115;
  background:rgba(24,19,15,.5);
  display:grid; place-items:center;
  padding:clamp(12px, 3vh, 32px) clamp(12px, 3vw, 32px);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; transition:opacity .26s var(--ease-out, ease);
}
.ff-overlay.is-open{ opacity:1; }
.ff-overlay [hidden], .ff-overlay[hidden]{ display:none !important; }
.ff-panel{
  position:relative; width:min(980px, 100%);
  background:var(--bg, #F1ECE3); color:var(--ink, #2B241E);
  border:1px solid var(--line, rgba(43,36,30,.35));
  box-shadow:0 40px 90px rgba(24,19,15,.4);
  transform:translateY(14px); transition:transform .42s var(--ease-out, ease);
}
.ff-overlay.is-open .ff-panel{ transform:none; }

/* ---------- head ---------- */
.ff-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:clamp(18px, 2.6vw, 28px) clamp(18px, 3vw, 36px) 0;
}
.ff-eyebrow{
  font-family:var(--font-ui, "Geist", "Inter", sans-serif); font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim, #6E6353);
}
.ff-head h3{
  font-family:var(--font-serif, "Cormorant Garamond", Georgia, serif); font-weight:600;
  font-size:clamp(1.7rem, 2.6vw, 2.2rem); line-height:1.08; margin-top:6px;
}
.ff-close{
  background:none; border:0; cursor:pointer; font-size:1.8rem; line-height:1;
  font-family:var(--font-serif, "Cormorant Garamond", Georgia, serif);
  color:var(--ink-dim, #6E6353); padding:2px 8px; margin:-4px -8px 0 0;
}
.ff-close:hover{ color:var(--ink, #2B241E); }

/* ---------- body: figure | controls ---------- */
.ff-body{
  display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
  gap:clamp(18px, 3vw, 40px); align-items:start;
  padding:clamp(14px, 2vw, 22px) clamp(18px, 3vw, 36px) clamp(22px, 3vw, 34px);
}
.ff-figure{
  border:1px solid var(--line-soft, rgba(43,36,30,.16));
  background:
    radial-gradient(120% 90% at 50% 38%, #FBF6EC 0%, #F3EADA 70%, #EADFCB 100%);
  padding:clamp(8px, 1.2vw, 14px) clamp(8px, 1.2vw, 14px) 10px;
}
.ff-figure svg{ display:block; width:100%; height:auto; aspect-ratio:1260 / 1265; }
.ff-figure figcaption{
  font-family:var(--font-serif, "Cormorant Garamond", Georgia, serif); font-style:italic;
  font-size:.92rem; color:var(--ink-dim, #6E6353); text-align:center; margin-top:4px;
}

.ff-label{
  display:block; font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink, #2B241E);
}
.ff-intro{
  font-family:var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-size:1.15rem; line-height:1.45; color:var(--ink, #2B241E);
}
.ff-field{ margin-top:18px; }
.ff-row3{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.ff-row3 .ff-field{ margin-top:18px; }

/* segmented choices — same language as the size buttons */
.ff-seg{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:7px; }
.ff-seg-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.ff-seg button, .ff-compare-btns button{
  padding:11px 8px; cursor:pointer;
  font-family:var(--font-mono, "Courier Prime", monospace); font-size:.88rem; letter-spacing:.04em;
  background:#fff; color:var(--ink, #2B241E);
  border:1.5px solid var(--ink, #2B241E); border-radius:6px;
  transition:background .2s ease, color .2s ease, transform .2s var(--ease-back, ease);
}
.ff-seg button:hover, .ff-compare-btns button:hover{ transform:translateY(-2px); }
.ff-seg button[aria-pressed="true"], .ff-compare-btns button[aria-pressed="true"]{
  background:var(--soil, #2B241E); color:var(--cream, #F1ECE3);
}
.ff-hint{ font-size:.82rem; color:var(--ink-dim, #6E6353); margin-top:8px; min-height:1.3em; }

.ff-input{ position:relative; margin-top:7px; }
.ff-input input{
  width:100%; padding:.78rem 2.5rem .78rem .85rem;
  font-family:var(--font-mono, "Courier Prime", monospace); font-size:1.02rem;
  background:#fff; color:var(--ink, #2B241E);
  border:1.5px solid var(--ink, #2B241E); border-radius:3px;
  -moz-appearance:textfield; appearance:textfield;
}
.ff-input input::-webkit-outer-spin-button, .ff-input input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ff-input input::placeholder{ color:rgba(43,36,30,.32); }
.ff-input input[aria-invalid="true"]{ border-color:#8A3324; box-shadow:0 0 0 1px #8A3324; }
.ff-unit{
  position:absolute; right:.75rem; top:50%; transform:translateY(-50%);
  font-size:.72rem; letter-spacing:.06em; color:var(--ink-dim, #6E6353); pointer-events:none;
}
.ff-error{ color:#8A3324; font-size:.84rem; line-height:1.45; margin-top:12px; min-height:1.25em; }
.ff-error.is-note{ color:var(--ink, #2B241E); }   /* confirmations, not errors */

.ff-cta{
  width:100%; margin-top:14px; padding:1.05rem; cursor:pointer;
  font-family:var(--font-ui, "Geist", "Inter", sans-serif);
  background:var(--soil-band, #3B2F24); color:var(--cream, #F1ECE3); border:0; border-radius:2px;
  font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  transition:filter .2s ease, transform .25s var(--ease-back, ease);
}
.ff-cta:hover{ filter:brightness(1.15); transform:translateY(-2px); }
.ff-fine{ font-size:.76rem; line-height:1.55; color:var(--ink-dim, #6E6353); margin-top:12px; }

/* ---------- result ---------- */
.ff-rec{
  display:flex; align-items:center; gap:18px; margin-top:10px;
  padding-bottom:18px; border-bottom:1.5px dotted var(--line, rgba(43,36,30,.35));
}
.ff-size{
  font-family:var(--font-mono, "Courier Prime", monospace); font-weight:700;
  font-size:clamp(2.8rem, 5vw, 3.8rem); line-height:1;
  min-width:1.5em; padding:.14em .22em; text-align:center;
  background:#fff; border:1.5px solid var(--ink, #2B241E); border-radius:8px;
}
.ff-size-name{
  font-family:var(--font-serif, "Cormorant Garamond", Georgia, serif); font-weight:600;
  font-size:1.6rem; line-height:1.1;
}
.ff-size-name em{ display:block; font-weight:400; font-size:1.08rem; color:var(--ink-dim, #6E6353); margin-top:2px; }

.ff-rows-title{
  font-family:var(--font-ui, "Geist", "Inter", sans-serif); font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim, #6E6353); margin-top:16px;
}
.ff-rows{ list-style:none; margin:4px 0 0; padding:0; }
.ff-rows li{
  display:grid; grid-template-columns:1.3em minmax(0, 1fr) auto; column-gap:10px; row-gap:3px;
  align-items:baseline; padding:10px 0; border-bottom:1px dotted var(--line, rgba(43,36,30,.35));
}
.ff-key{ font-family:var(--font-serif, "Cormorant Garamond", Georgia, serif); font-style:italic; font-size:1.25rem; line-height:1; }
.ff-zone{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.ff-verdict{ font-family:var(--font-mono, "Courier Prime", monospace); font-size:.88rem; }
.ff-note{ grid-column:2 / -1; font-size:.84rem; color:var(--ink-dim, #6E6353); }
/* overflow-x:clip: the translated .ff-mark track would otherwise widen the panel on phones */
.ff-meter{ grid-column:2 / -1; display:flex; align-items:center; gap:10px; margin-top:6px; overflow-x:clip; }
.ff-end{
  flex:0 0 3.4em; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim, #6E6353);
}
.ff-end:last-child{ text-align:right; }
.ff-scale{
  flex:1 1 auto; position:relative; height:14px;
  background:
    linear-gradient(var(--ink, #2B241E), var(--ink, #2B241E)) center / 100% 1px no-repeat,
    linear-gradient(90deg, var(--ink, #2B241E) 1px, transparent 1px) 0 50% / 25% 7px repeat-x;
}
.ff-scale::after{ content:""; position:absolute; right:0; top:50%; width:1px; height:7px; transform:translateY(-50%); background:var(--ink, #2B241E); }
.ff-band{
  position:absolute; left:0; top:50%; width:100%; height:7px; border-radius:2px;
  background:rgba(201,154,91,.45); transform-origin:0 50%;
  transform:translate(calc(var(--l, 40) * 1%), -50%) scaleX(calc(var(--w, 20) / 100));
  transition:transform .42s var(--ease-out, ease);
}
/* full-width track moved by transform (percent = track width), dot drawn at its left edge */
.ff-mark{
  position:absolute; inset:0; pointer-events:none;
  transform:translateX(calc(var(--p, 50) * 1%));
  transition:transform .42s var(--ease-out, ease);
}
.ff-mark::before{
  content:""; position:absolute; left:0; top:50%; width:12px; height:12px; border-radius:50%;
  background:var(--soil, #2B241E); box-shadow:0 0 0 2px var(--bg, #F1ECE3);
  transform:translate(-50%, -50%);
}
.ff-alt{
  font-family:var(--font-serif, "Cormorant Garamond", Georgia, serif); font-style:italic;
  font-size:1.08rem; line-height:1.4; margin-top:14px;
}
.ff-alt[hidden]{ display:none; }
.ff-compare{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:12px 2px 2px; padding-top:12px; border-top:1px dotted var(--line, rgba(43,36,30,.35));
}
.ff-overlay:not(.is-result) .ff-compare{ display:none; }
.ff-compare-btns{ display:flex; gap:8px; }
.ff-compare-btns button{ min-width:52px; padding:9px 12px; position:relative; }
.ff-compare-btns button.is-rec::after{
  content:""; position:absolute; top:-5px; right:-5px; width:10px; height:10px; border-radius:50%;
  background:var(--accent, #C99A5B); box-shadow:0 0 0 2px var(--bg, #F1ECE3);
}
.ff-links{ display:flex; justify-content:space-between; gap:12px; margin-top:12px; }
.ff-links button{
  background:none; border:0; cursor:pointer; padding:4px 0; color:var(--ink, #2B241E);
  font:inherit; font-size:.8rem; text-decoration:underline; text-underline-offset:3px;
}
.ff-links button + button{ color:var(--ink-dim, #6E6353); }

.ff-overlay button:focus-visible, .ff-overlay input:focus-visible{
  outline:2px solid var(--accent-2, #523420); outline-offset:3px;
}

/* ---------- phones: one column, sheet from the bottom ---------- */
@media (max-width:760px){
  .ff-overlay{ padding:0; place-items:start stretch; }
  .ff-panel{ width:100%; min-height:100%; border:0; transform:translateY(24px); }
  .ff-body{ grid-template-columns:1fr; gap:16px; }
  .ff-figure{ width:min(100%, 340px); margin-inline:auto; padding:6px 6px 8px; }
  .ff-overlay:not(.is-result) .ff-figure{ width:min(72%, 250px); }
  .ff-overlay.is-result .ff-figure{ width:min(100%, 330px); }
  .ff-figure figcaption{ font-size:.8rem; }
  .ff-row3{ gap:8px; }
  .ff-input input{ padding-right:2.1rem; padding-left:.7rem; }
}

@media (max-width:760px){
  /* result on phones: the recommendation leads, the drawing follows */
  .ff-overlay.is-result .ff-body{ display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .ff-overlay.is-result .ff-side, .ff-overlay.is-result .ff-result{ display:contents; }
  .ff-overlay.is-result .ff-result > *{ order:3; }
  .ff-overlay.is-result .ff-result > .ff-eyebrow{ order:0; }
  .ff-overlay.is-result .ff-rec{ order:1; }
  .ff-overlay.is-result .ff-figure{ order:2; margin-top:16px; }
}

@media (prefers-reduced-motion:reduce){
  .ff-overlay, .ff-panel, .ff-band, .ff-mark, .ff-seg button, .ff-compare-btns button, .ff-cta{ transition:none; }
}