/* ===========================================================================
 * DUNEUS · FIT FINDER modal
 * Opens from the "Find my size" trigger on the product page. Bottom sheet on
 * mobile, centred dialog on desktop. Presentation only — no commerce logic.
 * ======================================================================== */
.dn-sf{
  --sf-ink:#111; --sf-mute:#8A8A8A; --sf-line:#E7E7E7; --sf-panel:#fff;
  --sf-tile:#F5F5F5; --sf-on:#111; --sf-accent:var(--duneus-accent,#FF5100);
  --sf-head:'Montserrat','Tajawal',sans-serif;
  position:fixed; inset:0; z-index:4000; display:flex;
  align-items:flex-end; justify-content:center;
}
.dn-sf[hidden]{display:none!important}
.dn-sf__scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);
  opacity:0;transition:opacity .25s ease}
.dn-sf.is-open .dn-sf__scrim{opacity:1}
.dn-sf__panel{
  position:relative;width:100%;max-width:480px;max-height:92vh;
  background:var(--sf-panel);color:var(--sf-ink);
  border-radius:16px 16px 0 0; display:flex;flex-direction:column;
  padding:22px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);
  font-family:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
[dir='rtl'] .dn-sf__panel{font-family:'Tajawal',sans-serif}
.dn-sf.is-open .dn-sf__panel{transform:translateY(0)}

.dn-sf__x{position:absolute;top:14px;inset-inline-end:14px;width:36px;height:36px;
  border:0;background:transparent;color:var(--sf-ink);cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center}
.dn-sf__x svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.dn-sf__eyebrow{font-family:var(--sf-head);font-size:11px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sf-mute);margin:0 36px 12px 0}
[dir='rtl'] .dn-sf__eyebrow{letter-spacing:0;text-transform:none;margin:0 0 12px}
.dn-sf__steps{display:flex;gap:6px;margin:0 0 16px}
.dn-sf__steps i{height:3px;flex:1;background:var(--sf-line);border-radius:3px;transition:background .3s}
.dn-sf__steps i.on{background:var(--sf-accent)}

.dn-sf__scroll{overflow-y:auto;overflow-x:hidden;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.dn-sf__count{font-family:var(--sf-head);font-weight:800;font-size:12px;letter-spacing:.14em;color:var(--sf-mute);margin:0 0 8px}
.dn-sf__h{font-family:var(--sf-head);font-weight:900;font-size:clamp(1.4rem,5.5vw,1.9rem);
  letter-spacing:-.01em;margin:0 0 6px;text-transform:uppercase}
[dir='rtl'] .dn-sf__h{text-transform:none}
.dn-sf__lead{color:var(--sf-mute);font-size:14px;margin:0 0 20px}
.dn-sf__label{font-family:var(--sf-head);font-weight:800;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sf-mute);margin:0 0 10px}
[dir='rtl'] .dn-sf__label{letter-spacing:0;text-transform:none}

.dn-sf__seg{display:flex;border:1px solid var(--sf-line);border-radius:4px;overflow:hidden}
.dn-sf__seg button{flex:1;appearance:none;border:0;background:transparent;color:var(--sf-ink);
  font-family:var(--sf-head);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:13px 8px;cursor:pointer;transition:background .2s,color .2s}
[dir='rtl'] .dn-sf__seg button{letter-spacing:0;text-transform:none}
.dn-sf__seg button[aria-pressed="true"]{background:var(--sf-on);color:#fff}

.dn-sf__units{display:flex;gap:4px}
.dn-sf__units button{appearance:none;border:0;background:transparent;color:var(--sf-mute);
  font-family:var(--sf-head);font-weight:800;font-size:11px;cursor:pointer;padding:2px}
.dn-sf__units button[aria-pressed="true"]{color:var(--sf-accent);text-decoration:underline;text-underline-offset:3px}

.dn-sf__field{margin:0 0 18px}
.dn-sf__top{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 6px}
.dn-sf__readout{font-family:var(--sf-head);font-weight:900;font-size:2.2rem;line-height:1;font-variant-numeric:tabular-nums}
.dn-sf__readout small{font-size:1rem;font-weight:700;color:var(--sf-mute);margin-inline-start:4px}
.dn-sf input[type=range]{width:100%;accent-color:var(--sf-accent);height:28px;cursor:pointer;direction:ltr}

.dn-sf__est{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px dashed var(--sf-line);border-radius:4px;padding:13px 16px;margin-top:4px}
.dn-sf__est span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sf-mute);font-weight:800;font-family:var(--sf-head)}
[dir='rtl'] .dn-sf__est span{letter-spacing:0;text-transform:none}
.dn-sf__est b{font-family:var(--sf-head);font-weight:900;font-size:1.5rem}

.dn-sf__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 20px}
.dn-sf__tile{appearance:none;border:1px solid var(--sf-line);background:var(--sf-panel);border-radius:4px;
  padding:13px 6px 9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .2s,background .2s}
.dn-sf__tile svg{width:28px;height:36px;color:var(--sf-ink)}
.dn-sf__tile small{font-family:var(--sf-head);font-weight:800;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--sf-mute)}
[dir='rtl'] .dn-sf__tile small{letter-spacing:0;text-transform:none}
.dn-sf__tile[aria-pressed="true"]{border-color:var(--sf-accent);background:color-mix(in srgb,var(--sf-accent) 7%,transparent)}
.dn-sf__tile[aria-pressed="true"] small{color:var(--sf-ink)}

.dn-sf__fit{display:flex;flex-direction:column;gap:10px}
.dn-sf__fit button{appearance:none;text-align:start;border:1px solid var(--sf-line);background:var(--sf-panel);
  border-radius:4px;padding:15px;cursor:pointer;display:flex;gap:14px;align-items:center;transition:border-color .2s,background .2s}
.dn-sf__fit button[aria-pressed="true"]{border-color:var(--sf-accent);background:color-mix(in srgb,var(--sf-accent) 7%,transparent)}
.dn-sf__fit .fi{width:24px;height:38px;flex:none;color:var(--sf-ink)}
.dn-sf__fit h3{font-family:var(--sf-head);font-weight:800;font-size:14px;letter-spacing:.05em;text-transform:uppercase;margin:0 0 2px}
[dir='rtl'] .dn-sf__fit h3{letter-spacing:0;text-transform:none}
.dn-sf__fit p{margin:0;font-size:13px;color:var(--sf-mute)}

.dn-sf__nav{display:flex;gap:10px;padding-top:14px;margin-top:4px;border-top:1px solid var(--sf-line)}
.dn-sf__btn{appearance:none;border:0;cursor:pointer;font-family:var(--sf-head);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;font-size:13px;border-radius:4px;padding:15px 18px}
[dir='rtl'] .dn-sf__btn{letter-spacing:0;text-transform:none}
.dn-sf__btn--ghost{background:transparent;border:1px solid var(--sf-line);color:var(--sf-ink);flex:0 0 auto}
.dn-sf__btn--dark{background:var(--sf-on);color:#fff;flex:1 1 auto}
.dn-sf__btn--solid{background:var(--sf-accent);color:#fff;flex:1 1 auto}

.dn-sf__result{text-align:center;padding:6px 0 0}
.dn-sf__cap{font-family:var(--sf-head);font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sf-mute);margin:0 0 4px}
[dir='rtl'] .dn-sf__cap{letter-spacing:0;text-transform:none}
.dn-sf__big{font-family:var(--sf-head);font-weight:900;font-size:clamp(3rem,16vw,5rem);line-height:.9;color:var(--sf-accent);letter-spacing:-.02em}
.dn-sf__scale{display:flex;gap:4px;justify-content:center;margin:18px 0 0;flex-wrap:wrap;direction:ltr}
.dn-sf__scale span{min-width:42px;text-align:center;font-family:var(--sf-head);font-weight:800;font-size:12px;
  padding:9px 4px;border:1px solid var(--sf-line);border-radius:4px;color:var(--sf-mute)}
.dn-sf__scale span.on{background:var(--sf-accent);border-color:var(--sf-accent);color:#fff}
.dn-sf__why{color:var(--sf-mute);font-size:14px;margin:14px auto 0;max-width:36ch}
.dn-sf__saved{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--sf-mute);font-size:12px;margin:20px 0 0}
.dn-sf__saved svg{width:13px;height:13px;flex:none}

/* ---- Trigger on the SIZE row (Squatwolf layout) -------------------------- */
/* The trigger is rendered in the theme directly UNDER the variants, so it always
   sits near the sizes. duneus-size-finder.js then lifts it up onto the SIZE
   heading row (end), Squatwolf-style, once the variant chips exist. Until/unless
   that runs, this fallback keeps it right-aligned just below the sizes. */
.pp-sizehead{
  display:flex; justify-content:flex-end; align-items:center; gap:12px;
  margin:12px 0 2px;
}
/* When relocated into the SIZE label (JS sets it to space-between), it is a plain
   flex child — no margin of its own. */
.dn-sf-sizelabel .pp-sizehead{ margin:0; }

.pp-sizefinder{
  appearance:none; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--duneus-accent,#FF5100); color:#fff; border:0; border-radius:999px;
  padding:9px 16px; font-family:'Montserrat','Tajawal',sans-serif; font-weight:800;
  font-size:12px; letter-spacing:.04em; line-height:1;
  transition:filter .2s ease, transform .2s ease;
}
[dir='rtl'] .pp-sizefinder{letter-spacing:0}
.pp-sizefinder:hover{filter:brightness(1.07)}
.pp-sizefinder:active{transform:scale(.98)}
.pp-sizefinder__dot{width:7px;height:7px;border-radius:50%;background:#fff;flex:none;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:ppSfPulse 1.8s ease-out infinite}
.pp-sizefinder__saved{color:#fff;font-weight:900;opacity:.92}
@keyframes ppSfPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@media (prefers-reduced-motion:reduce){.pp-sizefinder__dot{animation:none}}

/* ---- Size options as equal, edge-to-edge segments (Squatwolf) ------------ */
/* duneus-size-finder.js finds the SIZE group by its chip VALUES (S/M/L/XL…), so
   it never touches the COLOR group, then tags the heading + chip row. The row
   spans full width as equal segments. */
.dn-sf-sizelabel{ display:flex !important; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.dn-sf-sizerow{ display:flex !important; gap:8px; width:100%; flex-wrap:wrap; }
.dn-sf-sizerow > *{ flex:1 1 0; min-width:56px; }
.dn-sf-sizerow > * > label,
.dn-sf-sizerow label,
.dn-sf-sizerow a,
.dn-sf-sizerow button{ width:100%; }

@media (min-width:600px){
  .dn-sf{align-items:center}
  .dn-sf__panel{border-radius:10px;max-height:88vh;transform:translateY(16px) scale(.98);opacity:0;
    transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .25s ease}
  .dn-sf.is-open .dn-sf__panel{transform:translateY(0) scale(1);opacity:1}
}
@media (prefers-reduced-motion:reduce){.dn-sf *{transition:none!important}}