/* Fitting room — the hanger on product cards and the floating panel (public/live/fitting-room.js).
   Spacing is fixed (panel 16 padding / 12 rhythm / 20 radius, photo 14 radius, picks 44×56 + 8 gap)
   so nothing touches an edge and no text sits on the photo without a scrim.
   Developer: Shahid Malla (https://shahidmalla.com) · Owner: ElySpace */

/* ---- tokens ------------------------------------------------------------------
   The accent lives on :root so the Modest home can swap it for its tan on the
   cards and the panel alike; the panel palette is dark in both themes (as in the
   brief), a touch lifted in dark mode so it still separates from the page. */
:root {
  --fr-accent: var(--brand);
  --fr-accent-ink: var(--brand-ink);
}
body[data-page="home-modest"] { --fr-accent: var(--modest-tan); --fr-accent-ink: var(--modest-ink); }
:root[data-theme="dark"] body[data-page="home-modest"] { --fr-accent-ink: var(--modest-paper); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-page="home-modest"] { --fr-accent-ink: var(--modest-paper); }
}

.fr-root, .fr-sheet, .fr-zoom {
  --fr-bg: #171512;
  --fr-bg-2: #24211d;
  --fr-line: rgb(255 255 255 / .08);
  --fr-edge: transparent;
  --fr-ink: #f5f1ea;
  --fr-ink-2: rgb(245 241 234 / .68);
  --fr-ink-3: rgb(245 241 234 / .46);
  --fr-shadow: 0 24px 60px -16px rgb(0 0 0 / .55), 0 2px 10px rgb(0 0 0 / .25);
  --fr-accent-text: color-mix(in srgb, var(--fr-accent) 70%, #fff);   /* accent as text on the dark panel: 4.5:1 */
  --fr-w: 272px;
  --fr-pad: 16px;
  --fr-gap: 12px;
  --fr-r: 20px;
  --fr-r-photo: 14px;
  --fr-studio: radial-gradient(120% 90% at 50% 30%, #efebe5, #dcd6ce);
  --fr-manq: #d1c9be;
  --fr-card-edge: #fff;
}
:root[data-theme="dark"] :is(.fr-root, .fr-sheet, .fr-zoom) {
  --fr-bg: #1d1a17;
  --fr-edge: rgb(255 255 255 / .12);
  --fr-studio: radial-gradient(120% 90% at 50% 30%, #2a2622, #1d1a17);
  --fr-manq: #3a352f;
  --fr-card-edge: #2a2622;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.fr-root, .fr-sheet, .fr-zoom) {
    --fr-bg: #1d1a17;
    --fr-edge: rgb(255 255 255 / .12);
    --fr-studio: radial-gradient(120% 90% at 50% 30%, #2a2622, #1d1a17);
    --fr-manq: #3a352f;
    --fr-card-edge: #2a2622;
  }
}
[data-contrast="high"] :is(.fr-root, .fr-sheet) { --fr-edge: var(--fr-ink); --fr-ink-2: var(--fr-ink); --fr-ink-3: rgb(245 241 234 / .8); }

:is(.fr-root, .fr-sheet, .fr-zoom) [hidden] { display: none !important; }

/* ==== the hanger on cards ==================================================== */
.fr-hanger {
  position: absolute;
  z-index: 3;                       /* over the card-wide link overlay (z 1), level with the heart */
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-veil, rgb(255 255 255 / .72));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink-2);
  box-shadow: var(--sh-1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-2, 200ms) var(--ease), color var(--dur-2, 200ms) var(--ease), opacity var(--dur-2, 200ms) var(--ease), box-shadow var(--dur-2, 200ms) var(--ease), transform var(--dur-2, 200ms) var(--ease);
}
.fr-hanger::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }   /* 44px to the touch */
.fr-hanger .icon { inline-size: 18px; block-size: 18px; }
.fr-hanger:hover { background: var(--surface); color: var(--fr-accent); }
.fr-hanger:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-ring); }
.fr-hanger:active { transform: scale(.92); }
.fr-hanger.is-picked,
.fr-hanger.is-picked:hover {
  background: var(--fr-accent);
  color: var(--fr-accent-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fr-accent) 22%, transparent);
}
.fr-hanger.is-picked:focus-visible { box-shadow: 0 0 0 3px var(--brand-ring); }

/* under the 40px heart, centred on it, 8px below */
.fr-hanger--card { inset-block-start: calc(var(--sp-3) + 40px + var(--sp-2)); inset-inline-end: calc(var(--sp-3) + 2px); }
.product-card--list .fr-hanger { position: static; box-shadow: none; }
@media (max-width: 1023.98px) {
  [data-page="shop-gallery"] .fr-hanger--card { inset-block-start: calc(var(--sp-3) + 44px + var(--sp-2)); inset-inline-end: calc(var(--sp-3) + 4px); }
}

/* Modest: no heart, so the hanger takes the heart's corner, in the page's paper and ink */
.fr-hanger--modest {
  inset-block-start: var(--sp-3);
  inset-inline-end: var(--sp-3);
  inline-size: 40px;
  block-size: 40px;
  background: color-mix(in srgb, var(--modest-paper) 90%, transparent);
  color: var(--modest-ink);
}
.fr-hanger--modest::before { inset: -2px; }
.fr-hanger--modest:hover { background: var(--modest-paper); color: var(--modest-ink); }
@media (max-width: 560px) {
  .fr-hanger--modest { inset-block-start: var(--sp-2); inset-inline-end: var(--sp-2); }
}

.fr-hanger--nest { position: relative; inline-size: 32px; block-size: 32px; }
.fr-hanger--nest::before { inset: -6px; }
.fr-hanger--nest .icon { inline-size: 16px; block-size: 16px; }
.fr-hanger--bento { position: relative; inline-size: 40px; block-size: 40px; margin-block-start: var(--sp-2); }
.be-prod__corner:has(.fr-hanger--bento) { display: flex; flex-direction: column; align-items: center; }
.fr-hanger--corner { inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3); }
.fr-host { position: relative; }

/* always on show under the heart, as in the owner's video; a little quieter until the card is pointed at */
@media (hover: hover) and (pointer: fine) {
  .fr-hanger:not(.is-picked) { opacity: .8; }
  :is(.product-card, .hmo-product, .ne-pick, .be-prod, .mn-item, .md-item, .sc-card, .hsn-card, .gal-item):is(:hover, :focus-within) .fr-hanger,
  .fr-hanger:focus-visible { opacity: 1; }
}

/* the product page button */
[data-fr-pdp].is-picked { color: var(--brand-text, var(--brand)); }
[data-fr-pdp].is-picked .icon { color: var(--fr-accent); }

/* ==== the floating root: panel + pill ======================================= */
.fr-root {
  --fr-bottom: calc(var(--tabbar-total, 64px) + var(--sp-3));
  position: fixed;
  z-index: calc(var(--z-drawer, 200) - 10);
  inset-inline-start: max(var(--sp-4), var(--safe-l, 0px));
  inset-block-end: var(--fr-bottom);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
  color: var(--fr-ink);
  font-family: var(--font-sans, inherit);
  transition: bottom 240ms var(--ease), opacity 160ms var(--ease), visibility 0s;
}
[dir="rtl"] .fr-root { inset-inline-start: max(var(--sp-4), var(--safe-r, 0px)); }
.fr-root > * { pointer-events: auto; }
/* an open mega menu drops over the page's left column: step aside until it closes */
html.has-megamenu .fr-root { opacity: 0; visibility: hidden; transition: bottom 240ms var(--ease), opacity 160ms var(--ease), visibility 0s linear 160ms; }
@media (min-width: 1024px) { .fr-root { --fr-bottom: var(--sp-6); } }
/* the product page's sticky bag bar: the script measures it; this is the no-JS-measure fallback */
body:has(.sticky-atc.is-visible) .fr-root { --fr-bottom: calc(80px + var(--safe-b, 0px)); }
@media (min-width: 1024px) { body:has(.sticky-atc.is-visible) .fr-root { --fr-bottom: calc(var(--sp-5) + 80px + var(--sp-3)); } }

.fr-panel {
  box-sizing: border-box;
  inline-size: var(--fr-w);
  max-inline-size: calc(100vw - 2 * var(--sp-4));
  padding: var(--fr-pad);
  border: 1px solid var(--fr-edge);
  border-radius: var(--fr-r);
  background: var(--fr-bg);
  color: var(--fr-ink);
  box-shadow: var(--fr-shadow);
  transform-origin: 0 100%;
}
[dir="rtl"] .fr-panel { transform-origin: 100% 100%; }
[data-contrast="high"] .fr-panel { border-width: 2px; }

.fr-body { display: grid; gap: var(--fr-gap); min-inline-size: 0; }
.fr-body :is(p, h2) { margin: 0; }

/* head: "title ×" over the subline */
.fr-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title close" "sub sub";
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
}
.fr-title {
  grid-area: title;
  font-family: var(--font-sans, inherit);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--fr-ink);
  outline: none;
}
.fr-title:focus-visible { border-radius: 4px; box-shadow: 0 0 0 3px var(--brand-ring); }
.fr-sub { grid-area: sub; font-size: 12px; line-height: 1.45; color: var(--fr-ink-2); }
.fr-close, .fr-zoom-btn, .fr-thumb__x, .fr-reset, .fr-strip__btn, .fr-pill, .fr-zoom__close {
  -webkit-tap-highlight-color: transparent;
  font: inherit;
}
.fr-close {
  grid-area: close;
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  margin-inline-end: -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fr-ink-2);
  cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.fr-close::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.fr-close .icon { inline-size: 16px; block-size: 16px; }
.fr-close:hover { background: rgb(255 255 255 / .08); color: var(--fr-ink); }
:is(.fr-close, .fr-zoom-btn, .fr-thumb__x, .fr-reset, .fr-strip__btn, .fr-pill, .fr-zoom__close):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-ring); }

/* ---- the photo ---- */
.fr-photo {
  position: relative;
  justify-self: center;
  box-sizing: border-box;
  inline-size: min(100%, max(150px, calc((100vh - 306px - var(--fr-bottom, 24px)) * .75)));
  inline-size: min(100%, max(150px, calc((100dvh - 306px - var(--fr-bottom, 24px)) * .75)));
  aspect-ratio: 3 / 4;
  border-radius: var(--fr-r-photo);
  overflow: hidden;
  isolation: isolate;
  background: #e8e4de;
}
.fr-stack { position: absolute; inset: 0; }
.fr-photo__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
  transition: filter 320ms var(--ease), transform 320ms var(--ease);
}
.fr-photo.is-working .fr-photo__img { filter: brightness(.5) blur(6px) saturate(.85); transform: scale(1.04); }
.fr-photo.is-absorbing { animation: fr-absorb 380ms ease-out; }

.fr-work {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 20px;
  text-align: center;
  background: rgb(16 14 12 / .35);
  animation: fr-fade 240ms var(--ease) both;
}
.fr-spin {
  inline-size: 30px;
  block-size: 30px;
  box-sizing: border-box;
  border: 2px solid rgb(255 255 255 / .22);
  border-block-start-color: var(--fr-accent);
  border-radius: 50%;
  animation: fr-spin .9s linear infinite;
}
.fr-work__title { margin-block-start: 4px !important; font-size: 14px; font-weight: 600; line-height: 1.3; color: #fff; }
.fr-work__text, .fr-work__step { max-inline-size: 180px; font-size: 12px; line-height: 1.45; color: rgb(255 255 255 / .72); }
.fr-work__step { font-size: 11px; }

.fr-strip {
  position: absolute;
  z-index: 3;
  inset-inline: 8px;
  inset-block-end: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgb(16 14 12 / .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
  animation: fr-fade 200ms var(--ease) both;
}
.fr-strip__text { min-inline-size: 0; }
.fr-strip__btn {
  flex: none;
  min-block-size: 44px;
  margin-block: -12px;
  margin-inline-end: -6px;
  padding-inline: 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fr-accent-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.fr-strip__btn:hover { text-decoration: underline; text-underline-offset: 3px; }

.fr-zoom-btn {
  position: absolute;
  z-index: 3;
  inset-block-end: 8px;
  inset-inline-end: 8px;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / .42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: zoom-in;
  transition: background-color 160ms var(--ease);
}
.fr-zoom-btn::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.fr-zoom-btn .icon { inline-size: 16px; block-size: 16px; }
.fr-zoom-btn:hover { background: rgb(0 0 0 / .6); }

/* ---- the look board (photos off) ---- */
.fr-board { position: absolute; inset: 0; overflow: hidden; }
.fr-board__base { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 30%; }
.fr-board__studio { position: absolute; inset: 0; background: var(--fr-studio); }
.fr-manq { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.fr-manq__body { fill: var(--fr-manq); }
.fr-manq__floor { fill: rgb(0 0 0 / .12); }
.fr-board__cards { position: absolute; inset: 0; }
.fr-card {
  position: absolute;
  box-sizing: border-box;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border: 3px solid var(--fr-card-edge);
  border-radius: 12px;
  background: var(--fr-card-edge);
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / .35);
  transform-origin: 50% 40%;
}

/* ---- picks ---- */
.fr-picks-wrap { display: grid; gap: 0; min-inline-size: 0; }
.fr-picks-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 1.3; color: var(--fr-ink-2); }
.fr-picks {
  display: flex;
  gap: 8px;
  margin-block: -12px 0;                /* room for the × hit areas without moving anything */
  margin-inline: -12px -16px;
  padding-block: 18px 2px;
  padding-inline: 12px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  list-style: none;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 12px;
}
.fr-picks::-webkit-scrollbar { display: none; }
.fr-thumb {
  position: relative;
  flex: 0 1 44px;
  min-inline-size: 36px;
  block-size: 56px;
  border-radius: 10px;
  scroll-snap-align: start;
}
.fr-thumb.is-landing { opacity: 0; }
.fr-thumb img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 10px;
  outline: 1px solid var(--fr-line);
  outline-offset: -1px;
  background: var(--fr-bg-2);
}
.fr-thumb__x {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-end: -6px;
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  padding: 0;
  border: 2px solid var(--fr-bg);
  border-radius: 50%;
  background: var(--fr-bg-2);
  color: var(--fr-ink);
  cursor: pointer;
}
.fr-thumb__x::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.fr-thumb__x .icon { inline-size: 10px; block-size: 10px; stroke-width: 2.5; }
.fr-thumb__x:hover { background: var(--fr-accent); color: var(--fr-accent-ink); }

.fr-hint { font-size: 12px; line-height: 1.45; color: var(--fr-ink-3); }

/* ---- footer ---- */
.fr-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--fr-line);
}
.fr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  block-size: 28px;
  padding-inline: 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / .06);
  font-size: 12px;
  line-height: 1;
  color: var(--fr-ink-2);
  white-space: nowrap;
}
.fr-chip .icon { inline-size: 14px; block-size: 14px; color: var(--fr-accent); }
.fr-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
  margin-block: -8px;
  margin-inline-end: -8px;
  padding-inline: 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--fr-ink-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms var(--ease);
}
.fr-reset .icon { inline-size: 14px; block-size: 14px; }
.fr-reset:hover { color: var(--fr-ink); }

/* ---- the pill ---- */
.fr-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  block-size: 48px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--fr-edge);
  border-radius: 999px;
  background: var(--fr-bg);
  color: var(--fr-ink);
  box-shadow: var(--fr-shadow);
  cursor: pointer;
  transform-origin: 0 100%;
}
[dir="rtl"] .fr-pill { padding: 6px 6px 6px 14px; transform-origin: 100% 100%; }
.fr-pill__avatar {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  background: var(--fr-bg-2);
  color: var(--fr-ink-2);
}
.fr-pill__img { inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.fr-pill__avatar.has-img .fr-pill__glyph { display: none; }
.fr-pill__glyph { inline-size: 18px; block-size: 18px; }
.fr-pill__avatar.is-absorbing { animation: fr-absorb 380ms ease-out; }
.fr-pill__label { font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }
.fr-pill__chev { inline-size: 16px; block-size: 16px; color: var(--fr-ink-2); }
.fr-pill__dot {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--fr-accent);
  box-shadow: 0 0 0 2px var(--fr-bg);
  opacity: 0;
  transform: scale(.4);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease-out-back, var(--ease));
}
.fr-pill.has-dot .fr-pill__dot { opacity: 1; transform: none; }
.fr-pill__ring {
  position: absolute;
  inset: -3px;
  border: 2px solid transparent;
  border-radius: 50%;
  opacity: 0;
}
.fr-pill.is-working .fr-pill__ring {
  opacity: 1;
  border-color: rgb(255 255 255 / .14);
  border-block-start-color: var(--fr-accent);
  animation: fr-spin .9s linear infinite;
}

/* ---- phones: the sheet ---- */
.fr-sheet .sheet__panel { background: var(--fr-bg); color: var(--fr-ink); padding-bottom: 0; font-family: var(--font-sans, inherit); }
.fr-sheet .sheet__handle::before { background: rgb(255 255 255 / .22); }
.fr-sheet__body {
  padding: 0 16px calc(16px + var(--safe-b, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.fr-sheet .fr-photo {
  inline-size: min(100%, calc(56vh * .75));
  inline-size: min(100%, calc(56dvh * .75));
}

/* ---- zoom ---- */
.fr-zoom {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 300);
  display: grid;
  place-items: center;
  padding: max(16px, var(--safe-t, 0px)) 16px max(16px, var(--safe-b, 0px));
}
.fr-zoom__backdrop { position: absolute; inset: 0; background: rgb(12 10 8 / .86); cursor: zoom-out; }
.fr-zoom__img {
  position: relative;
  max-inline-size: 100%;
  max-block-size: 92vh;
  max-block-size: 92dvh;
  border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6);
  background: #e8e4de;
}
.fr-zoom__close {
  position: absolute;
  inset-block-start: max(12px, var(--safe-t, 0px));
  inset-inline-end: 12px;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .12);
  color: #fff;
  cursor: pointer;
}
.fr-zoom__close .icon { inline-size: 20px; block-size: 20px; }
.fr-zoom__close:hover { background: rgb(255 255 255 / .2); }

/* ---- the flight ---- */
.fr-fly {
  position: fixed;
  z-index: calc(var(--z-toast, 400) - 1);
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: 50% 50%;
  background: var(--surface-2, #eee);
}
.fr-fly img { display: block; inline-size: 100%; block-size: 100%; }

@keyframes fr-spin { to { transform: rotate(360deg); } }
@keyframes fr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fr-absorb {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--fr-accent) 30%, transparent); }
  35% { transform: scale(.97); }
  70% { transform: scale(1.01); box-shadow: 0 0 0 6px color-mix(in srgb, var(--fr-accent) 30%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 8px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-hanger, .fr-photo__img, .fr-root { transition: none; }
  .fr-photo.is-working .fr-photo__img { transform: none; }
  .fr-spin, .fr-pill.is-working .fr-pill__ring { animation: none; }
}