:root {
  --ink: #111; --paper: #fff; --muted: #6b6b6b; --line: #e7e5e1; --soft: #f5f3ef; --wall: #ece6dc;
  --pick: #f7d9e3; --gold: #c6a15b; --danger: #b3261e; --radius: 10px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --serif: "Didot", "Bodoni 72", "Bodoni Moda", "Playfair Display", Georgia, serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.45 var(--sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
img { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.fine { font-size: 11.5px; color: var(--muted); margin: 8px 0; }
.center { text-align: center; }
.center-block { display: block; margin: 12px auto 0; text-align: center; }
.pad { padding: 20px; }
.pad-x { padding: 0 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.row.center { justify-content: center; }
.eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; }
.danger { color: var(--danger) !important; }
:focus-visible { outline: 2px solid #3b6fd8; outline-offset: 2px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper); text-decoration: none; font-size: 13px; letter-spacing: .02em; }
.btn svg { width: 18px; height: 18px; }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.block { display: flex; width: 100%; margin: 10px 0; }
.btn.small { min-height: 34px; padding: 0 14px; font-size: 12px; }
.btn.round { width: 48px; padding: 0; }
.btn.danger { border-color: var(--danger); }
.link { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
.plain { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px; text-decoration: none; font-size: 12px; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: inherit; border-radius: 8px; }
.icon-btn.ghost { visibility: hidden; }
.round-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.95); border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--paper); }
.seg button { border: 0; background: none; padding: 5px 10px; border-radius: 999px; font-size: 12px; }
.seg button.on { background: var(--ink); color: var(--paper); }

/* storefront */
.site-head { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 60px; padding: 0 16px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.sh-left { display: flex; gap: 4px; align-items: center; }
.site-locale { font: inherit; font-size: 12px; border: 1px solid var(--line); background: transparent; border-radius: 6px; padding: 4px 6px; max-width: 132px; color: inherit; }
.sh-right { display: flex; gap: 2px; justify-content: flex-end; align-items: center; }
.logo { font-family: var(--serif); font-size: 20px; letter-spacing: .22em; text-decoration: none; white-space: nowrap; }
.bag { position: relative; }
.bag-n { position: absolute; top: 2px; right: 0; font-size: 10px; font-weight: 600; }
.home-hero { text-align: center; padding: 48px 16px 24px; }
.home-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 5vw, 44px); margin: 0 0 8px; letter-spacing: .04em; }
.home-hero p svg { display: inline; width: 16px; height: 16px; vertical-align: -3px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px; padding: 0 16px 48px; }
.card { text-decoration: none; padding-bottom: 16px; }
.card-art { position: relative; aspect-ratio: 4/5; background: var(--soft); display: grid; place-items: center; padding: 14%; }
.card-art svg { width: 100%; height: 100%; }
.card-try { position: absolute; left: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.card-try svg { width: 17px; height: 17px; }
.card-name { margin: 10px 4px 2px; font-size: 13px; }
.card-price { margin: 0 4px; font-size: 12px; color: var(--muted); }
.site-foot { text-align: center; color: var(--muted); font-size: 12px; padding: 24px 16px 96px; border-top: 1px solid var(--line); }
.pdp { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 60px); }
@media (min-width: 900px) { .pdp { grid-template-columns: 1.15fr 1fr; } }
.pdp-media { position: relative; background: var(--soft); display: grid; place-items: center; padding: 8% 12%; min-height: 60vh; }
.pdp-art { width: 100%; max-height: 72vh; }
.hanger { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; border: 2px solid #fff; display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.hanger svg { width: 26px; height: 26px; }
.hanger::after { content: "Try it on"; position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 11px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; }
.hanger:hover::after, .hanger:focus-visible::after { opacity: 1; }
.pdp-info { padding: 32px clamp(16px, 5vw, 72px) 96px; max-width: 520px; }
.pdp-code { font-size: 11px; color: var(--muted); letter-spacing: .08em; }
.pdp-title { display: flex; justify-content: space-between; align-items: flex-start; }
.pdp-title h1 { font-weight: 400; font-size: 20px; margin: 6px 0 4px; }
.pdp-price { margin-bottom: 20px; }
.size { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding: 10px 0; }
.size select { border: 0; background: none; }
.under { display: inline-block; font-size: 12px; margin: 10px 0 14px; text-underline-offset: 3px; }
.try-btn svg { width: 18px; }
.pdp-blurb { color: #444; font-size: 13px; margin-top: 18px; }
.pdp-more { list-style: none; padding: 0; margin: 16px 0; }
.pdp-more li { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line); font-size: 13px; }
.chat-pill { position: fixed; right: 20px; bottom: 20px; z-index: 15; display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; box-shadow: 0 4px 16px rgba(0,0,0,.1); font-size: 12px; }
.chat-pill svg { width: 16px; height: 16px; }
body.vfr-open .chat-pill { display: none; }
@media (max-width: 640px) { .hide-sm { display: none; } .plain span { display: none; } .logo { font-size: 15px; letter-spacing: .14em; } }

/* toast + simulated SMS */
#toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translate(-50%, 20px); opacity: 0; transition: .25s; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; max-width: min(92vw, 420px); text-align: center; pointer-events: none; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.sms { position: fixed; top: 10px; left: 50%; z-index: 120; transform: translate(-50%, -140%); transition: transform .35s ease; width: min(92vw, 380px); background: rgba(250,250,250,.97); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); font-size: 13px; cursor: pointer; }
.sms.show { transform: translate(-50%, 0); }
.sms-app { font-size: 10.5px; color: var(--muted); letter-spacing: .06em; margin-bottom: 2px; }


/* fitting room shell */
#vfr-root { position: relative; z-index: 50; }
body.in-app #vfr-root { display: none; }
/* On a store's own site (embed.js): this page is the Fitting Room's frame, over the store's product page. */
html[data-embed], html[data-embed] body, html:has(body[data-embed]), body[data-embed] { background: transparent; }
:is(html[data-embed] body, body[data-embed]) :is(#page, #demo-root, .vfr-pill) { display: none; }
/* On a store's site the store stays as it is around the panel: no dimming, and embed.js lets clicks and scrolling
   outside the panel reach the store (it clips its frame to the panel, js/fitting-room.js reportArea). Messages show
   over the panel, since the rest of the frame is clipped away. */
@media (min-width: 768px) {
  :is(html[data-embed] body, body[data-embed]) .vfr-wrap { inset: auto 20px 20px auto; height: min(var(--vfr-max-h, 800px), calc(100vh - 40px)); }
  /* A tighter shadow than on Instawear's own pages: it fades out within the margin embed.js leaves around the windows
     (EDGE), so it's never cut off into a hard grey edge. */
  html[data-embed] :is(.vfr-panel, .side-pane) { box-shadow: 0 4px 16px rgba(0, 0, 0, .2); }
  html[data-embed] #toast { left: auto; right: 40px; bottom: 40px; max-width: 340px; transform: translateY(12px); }
  html[data-embed] #toast.show { transform: none; }
  html[data-embed] .sms { left: auto; right: 30px; top: calc(100vh - min(var(--vfr-max-h, 800px), 100vh - 40px) - 10px); width: 360px; transform: translateY(-12px); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
  html[data-embed] .sms.show { transform: none; opacity: 1; }
}
.vfr-pill { position: fixed; right: 20px; bottom: 20px; z-index: 55; display: flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; border: 0; border-radius: 999px; padding: 12px 18px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.vfr-wrap { position: fixed; z-index: 50; inset: 0; display: flex; }
/* The store's setting "Fitting Room side" set to left (Settings → Widget styling): the same windows, mirrored. The panel
   sits bottom left with Compare Looks and the chat to its right; the compare button moves to the panel's right edge. */
html[data-vfr-side="left"] .vfr-pill { right: auto; left: 20px; }
html[data-vfr-side="left"] .mirror-btn { left: auto; right: 6px; }
@media (min-width: 768px) {
  html[data-vfr-side="left"] .vfr-wrap { inset: auto auto 20px 20px; flex-direction: row-reverse; }
  html[data-vfr-side="left"]:is([data-embed], :has(body[data-embed])) .vfr-wrap { inset: auto auto 20px 20px; }
  html[data-embed][data-vfr-side="left"] #toast { right: auto; left: 40px; }
  html[data-embed][data-vfr-side="left"] .sms { right: auto; left: 30px; }
}
.vfr-panel, .side-pane { background: #fff; display: flex; flex-direction: column; overflow: hidden; }
.vfr-panel { flex: 1; }
.side-pane { position: absolute; inset: 0; z-index: 10; } /* over the look's tags and buttons (z-index 2-3) on small screens */
@media (min-width: 768px) {
  /* The windows sit bottom right, no taller than the store's setting (Settings → Widget styling) or the screen. */
  .vfr-wrap { inset: auto 20px 20px auto; height: min(var(--vfr-max-h, 800px), calc(100vh - 96px)); gap: 12px; }
  /* As wide as the look's photo (2:3) at the window's height, so it fills the panel edge to edge (js/fitting-room.js fitPanelWidth). */
  .vfr-panel { flex: 0 0 var(--vfr-panel-w, 400px); width: var(--vfr-panel-w, 400px); border-radius: 12px; box-shadow: 0 12px 48px rgba(0,0,0,.25); }
  .side-pane { position: static; flex: 0 0 360px; width: 360px; border-radius: 12px; box-shadow: 0 12px 48px rgba(0,0,0,.2); }
}
.vfr-head { flex: none; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; height: 50px; padding: 0 6px; background: var(--ink); color: #fff; }
.vfr-head h2 { margin: 0; font-size: 14px; font-weight: 500; text-align: center; letter-spacing: .02em; }
.head-right { display: flex; }
.head-right .icon-btn { width: 36px; }
.vfr-body { flex: 1; min-height: 0; overflow: auto; }
/* Try-ons left today, under the header on the looks view (guests also get "Create a profile"). */
/* Fixed height (js/fitting-room.js CHROME): the panel's size never depends on what's in it. */
.tries-bar { flex: none; box-sizing: border-box; height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; font-size: 12px; background: var(--soft); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.tries-bar b { font-size: 13px; }
.tries-bar.low b { color: var(--danger); }
.tries-bar .link { font-size: 12px; font-weight: 600; text-decoration: underline; }
.tries-bar > span[role=status] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tries-end { flex: none; display: flex; align-items: center; gap: 12px; }
/* Saved looks only: a small toggle, filled when on. */
.tries-filter { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.tries-filter svg { width: 14px; height: 14px; }
.tries-filter svg path { fill: none; stroke: currentColor; stroke-width: 1.6; }
.tries-filter:hover svg path:first-child, .tries-filter.on svg path { fill: currentColor; }
.tries-filter.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.turnstile-slot:empty { display: none; } .turnstile-slot { display: flex; justify-content: center; margin: 4px 0; }
/* The robot check's frame: invisible unless Cloudflare needs the shopper to tick a box. */
.turnstile-frame { border: 0; width: 1px; height: 1px; opacity: 0; } .turnstile-frame.show { width: 310px; height: 72px; max-width: 100%; opacity: 1; }
.tries-guest { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase; }
.vfr-body input:not([type=checkbox]):not([type=range]), .vfr-body select, .app input:not([type=checkbox]), .app select { height: 44px; border: 1px solid #cfccc6; border-radius: 8px; padding: 0 12px; background: #fff; }
.phone { display: flex; gap: 8px; margin: 12px 0 4px; }
.phone select { flex: 0 0 96px; }
.phone input { flex: 1; min-width: 0; }
.phone.single input { width: 100%; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; margin: 6px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.code { width: 100%; text-align: center; font-size: 26px !important; letter-spacing: .5em; height: 56px !important; margin: 14px 0 4px; }
.store-note { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 12px; background: var(--soft); border-radius: 8px; padding: 6px 10px; }
.store-note svg { width: 16px; }
.hero-pair { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 6px; margin: 4px 0 16px; }
.hp-product { background: var(--soft); border-radius: 8px; aspect-ratio: 3/4; display: grid; place-items: center; padding: 14%; }
.hp-product svg { width: 100%; height: 100%; }
/* "You": where the shopper's photo goes (no illustrated model). */
.hp-you { border-radius: 8px; aspect-ratio: 3/4; display: grid; place-content: center; justify-items: center; gap: 6px; border: 1.5px dashed var(--line); color: var(--muted); font-size: 12px; }
.hp-you svg { width: 42px; height: 42px; }
.hp-arrow { color: var(--muted); }
.facts { padding-left: 18px; margin: 10px 0 16px; }
.facts li { margin: 4px 0; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 13px; }
.check input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--ink); }
.upload { padding: 18px 20px; display: flex; flex-direction: column; }
.silhouette { flex: 1; min-height: 220px; display: grid; place-items: center; background: linear-gradient(#f4f2ee, #e9e6e0); border-radius: 10px; margin: 6px 0 12px; }
.upload-guide { width: 46%; max-width: 160px; aspect-ratio: 1 / 2; display: grid; place-items: center; border: 1.5px dashed #c9c4bb; border-radius: 80px 80px 12px 12px; color: #b5afa5; }
.upload-guide svg { width: 48px; height: 48px; }
.spinner { width: 40px; height: 40px; margin: 40px auto 16px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--ink); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner, .spin { animation-duration: 3s; } }

/* profile set */
.profile-top { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--soft); display: grid; place-items: center; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { position: relative; margin: 0; border-radius: 8px; overflow: hidden; background: var(--wall); }
.tile-art { aspect-ratio: 3/4; overflow: hidden; display: grid; place-items: center; }
.tile-art img { width: 100%; height: 100%; object-fit: cover; }
.tile-art > svg { width: 100%; height: 100%; }
.tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.tile figcaption em { font-style: normal; font-size: 9.5px; background: rgba(255,255,255,.25); padding: 1px 5px; border-radius: 4px; margin-left: 4px; }
.tile-btn { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; display: grid; place-items: center; background: rgba(255,255,255,.92); border-radius: 50%; cursor: pointer; }
.tile-btn svg { width: 16px; height: 16px; }
.adjust { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 12px 0; }
.adjust-head { display: flex; justify-content: space-between; align-items: center; }
.face-editor { position: relative; width: 200px; height: 200px; margin: 10px auto; overflow: hidden; border-radius: 8px; background: #ddd; touch-action: none; cursor: grab; }
.face-editor img { position: absolute; max-width: none; user-select: none; pointer-events: none; }
.face-ring { position: absolute; left: 52px; top: 40px; width: 96px; height: 120px; border-radius: 50%; box-shadow: 0 0 0 200px rgba(0,0,0,.45); border: 2px solid #fff; pointer-events: none; }
.adjust input[type=range] { width: 100%; accent-color: var(--ink); }
.swatches { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.swatches span { width: 70px; }
.sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); padding: 0; }
.sw.on { box-shadow: 0 0 0 2px var(--ink); }

/* styling progress */
.styling { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--wall); }
.welcome { position: absolute; top: 12px; left: 12px; display: flex; gap: 8px; align-items: center; font-size: 13px; background: rgba(255,255,255,.85); border-radius: 999px; padding: 4px 12px 4px 4px; z-index: 1; }
.welcome .avatar { width: 28px; height: 28px; }
/* Making a try-on: the shopper's photo, scanned like the photo check, with the steps on a card below. */
.styling-photo { position: absolute; inset: 0; margin: auto; height: 100%; aspect-ratio: 2 / 3; max-width: 100%; overflow: hidden; }
.styling-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.styling-photo .scanline { height: 22%; }
.styling-card { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; background: rgba(255,255,255,.92); border-radius: 12px; padding: 12px 14px 8px; box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.styling-card .fine { text-align: center; margin: 8px 0 0; }
.styling-steps li:nth-child(1) { animation-delay: .2s; } .styling-steps li:nth-child(2) { animation-delay: 3s; }
.styling-steps li:nth-child(3) { animation-delay: 9s; } .styling-steps li:nth-child(4) { animation-delay: 18s; }
.spin { stroke-dasharray: 80 210; animation: spin 1.2s linear infinite; transform-origin: 50% 50%; }

/* look view */
.vfr-body.look { display: flex; flex-direction: column; overflow: hidden; }
.look-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.who { display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; text-align: left; }
.who .avatar { width: 30px; height: 30px; }
.who .small { font-size: 11px; line-height: 1.1; max-width: 60px; }
.tabs { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 8px 7px; font-size: 12px; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--ink); }
.stage { position: relative; flex: 1; min-height: 0; background: var(--wall); }
.history { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.history::-webkit-scrollbar { display: none; }
.look-slide { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; justify-content: center; }
.look-art { position: relative; height: 100%; aspect-ratio: 1 / 2; max-width: 100%; }
.look-art > svg { width: 100%; height: 100%; }
.look-art.is-photo { aspect-ratio: 2 / 3; }
.look-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.check-note { position: absolute; top: 52px; left: 12px; right: 12px; z-index: 3; display: grid; gap: 4px; justify-items: start; padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.96); color: #111; box-shadow: 0 4px 16px rgba(0,0,0,.14); font-size: 13px; line-height: 1.35; }
.check-note p { margin: 0; }
/* "Stylist approves": shown for 10 s when the AI stylist rates a shopper's own look highly. */
.approved-badge { position: absolute; top: 14px; left: 50%; z-index: 4; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px 7px 10px; border-radius: 999px; background: #fff; color: #111; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); animation: approve-in .55s cubic-bezier(.2, 1.5, .4, 1) both; transition: opacity .4s, transform .4s; }
.approved-badge svg { width: 18px; height: 18px; color: var(--primary, #111); transform-origin: 30% 80%; animation: approve-thumb 1.2s .3s ease-in-out 2; }
.approved-badge.out { opacity: 0; transform: translate(-50%, -10px); }
@keyframes approve-in { from { opacity: 0; transform: translate(-50%, -12px) scale(.8); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes approve-thumb { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-16deg); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .approved-badge, .approved-badge svg { animation: none; } }
.check-note .btn { margin-top: 4px; }
.check-note-actions { display: flex; align-items: center; gap: 14px; }
.retry { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2; border: 0; border-radius: 999px; padding: 6px 12px; background: #fff3cd; color: #6b4e00; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.product-photo { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: block; }
.card-art:has(.product-photo) { padding: 4%; }
.pdp-media:has(.product-photo) { padding: 3% 6%; }
img.pdp-art { max-height: 80vh; }
.hp-product:has(.product-photo) { padding: 4%; }
.tag { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.tag-main { display: block; min-width: 54px; max-width: 92px; padding: 3px 7px 4px; border: 0; border-radius: 6px; background: rgba(255,255,255,.95); box-shadow: 0 2px 8px rgba(0,0,0,.15); text-align: center; line-height: 1.12; color: var(--ink); }
.tag-main small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 8.5px; color: #444; }
.tag-main b { font-size: 10.5px; font-weight: 600; }
/* The product's thumbnail above its name (the price is in the tag's menu). */
.tag-thumb { display: block; width: 34px; height: 34px; margin: 1px auto 3px; border-radius: 4px; overflow: hidden; background: var(--soft); }
.tag-thumb img, .tag-thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Already in the bag (check) or the wishlist (heart): little badges on the tag's corner. */
.tag-main { position: relative; }
.tag-marks { position: absolute; top: -7px; right: -7px; display: flex; gap: 2px; }
.tag-mark { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.tag-mark svg { width: 11px; height: 11px; stroke-width: 2.6; }
.tag-mark.bag { background: #1f7a4d; color: #fff; }
.tag-mark.wish { background: #fff; color: #d6336c; } .tag-mark.wish svg { fill: currentColor; stroke-width: 1.6; }
.tag.in-bag .tag-main { box-shadow: 0 0 0 1.5px #1f7a4d, 0 2px 8px rgba(0,0,0,.15); }
.tp-state { display: flex; align-items: center; gap: 5px; color: #1f7a4d; font-weight: 600; font-size: 12px; } .tp-state svg { width: 14px; height: 14px; stroke-width: 2.4; }
.tag-main:hover, .tag.open .tag-main { outline: 1.5px solid var(--ink); }
.tag-pop { display: none; position: absolute; top: 100%; width: 158px; padding: 10px; border-top: 6px solid transparent; background: #fff padding-box; background-clip: padding-box; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.22); gap: 6px; font-size: 12px; z-index: 6; text-align: left; }
.tag.side-l .tag-pop { left: -6px; } .tag.side-r .tag-pop { right: -6px; }
.tag.up .tag-pop { top: auto; bottom: 100%; border-top: 0; border-bottom: 6px solid transparent; }
.tag.open .tag-pop, .tag:focus-within .tag-pop { display: grid; }
@media (hover: hover) { .tag:hover .tag-pop { display: grid; } .tag:hover { z-index: 7; } }
.tag.open { z-index: 7; }
.tag-pop select { height: 32px; border: 1px solid #cfccc6; border-radius: 6px; font-size: 12px; padding: 0 6px; background: #fff; }
.tp-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border: 1px solid var(--ink); border-radius: 999px; background: #fff; font-size: 12px; }
.tp-btn svg { width: 15px; height: 15px; }
.tp-btn.primary { background: var(--ink); color: #fff; }
.tp-link { border: 0; background: none; text-decoration: underline; font-size: 11.5px; padding: 2px 0; }
.reedit { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12.5px; box-shadow: 0 4px 14px rgba(0,0,0,.25); white-space: nowrap; }
.reedit svg { width: 15px; height: 15px; }
.compare-actions { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.compare-actions .reedit { position: static; transform: none; height: 42px; }
.head-bag { position: relative; }
.head-bag .badge { position: absolute; top: 4px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #fff; color: #111; font-size: 10px; font-weight: 700; line-height: 16px; }
.bag-sheet { width: min(100%, 440px); }
.bag-lines { list-style: none; padding: 0; margin: 8px 0; }
.bag-lines li { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.bl-art { width: 56px; height: 56px; background: var(--soft); border-radius: 8px; padding: 6px; display: grid; place-items: center; }
.bl-art img, .bl-art svg { max-width: 100%; max-height: 100%; }
.dots { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 5px; pointer-events: none; }
.dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(0,0,0,.2); }
.dots span.on { background: var(--ink); height: 12px; border-radius: 3px; }
/* Changing a look: the same scan over the look on screen, and what's happening. */
.busy { position: absolute; inset: 0; display: grid; place-items: end center; text-align: center; background: rgba(236,230,220,.35); font-size: 13px; z-index: 3; padding: 16px; overflow: hidden; }
.busy .scanline { height: 22%; }
.busy-card { position: relative; background: rgba(255,255,255,.92); border-radius: 12px; padding: 10px 16px; box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.busy-card p { margin: 0; } .busy-card .fine { margin-top: 2px; }
.mirror-btn { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 56px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.9); display: none; place-items: center; z-index: 2; }
@media (min-width: 1024px) { .mirror-btn { display: grid; } }
.stage-actions { position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px; display: flex; gap: 8px; z-index: 2; pointer-events: none; } /* centred under the look */
.stage-actions button { pointer-events: auto; }
.disclaimer { position: absolute; left: 10px; right: 10px; bottom: 6px; margin: 0; text-align: center; font-size: 10.5px; color: #5b554c; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line, under the buttons */
.try-here { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 10px 0; padding: 9px 12px; border: 1px dashed var(--ink); border-radius: 8px; background: var(--soft); font-size: 12.5px; }
.try-here svg { width: 18px; flex: none; }
.strip-head { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 4px; }
.strip { flex: none; box-sizing: border-box; height: 103px; display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 4px 10px 12px; scrollbar-width: thin; }
.chip { position: relative; flex: 0 0 76px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.chip.on { border-color: var(--ink); }
.chip-art { width: 46px; height: 46px; display: grid; place-items: center; }
.chip-art svg { max-width: 100%; max-height: 100%; }
.chip-name { font-size: 10px; line-height: 1.15; text-align: center; height: 23px; overflow: hidden; }
.chip-on { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.chip-on svg { width: 11px; height: 11px; }

/* side panes */
.mirror .stage { flex: 1; }
.scroll-hint { position: absolute; left: 50%; top: 50%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 18px; border-radius: 14px; background: rgba(17,17,17,.78); color: #fff; font-size: 12.5px; text-align: center; pointer-events: none; transform: translate(-50%, -50%); animation: hint-fade 3s ease forwards; }
.scroll-icon { position: relative; width: 22px; height: 34px; border: 2px solid #fff; border-radius: 12px; }
.scroll-icon::before, .scroll-icon::after { content: ""; position: absolute; left: 50%; width: 7px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateX(-50%) rotate(45deg); }
.scroll-icon::before { top: -14px; transform: translateX(-50%) rotate(-135deg); }
.scroll-icon::after { bottom: -14px; }
.scroll-icon .wheel { position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: hint-wheel 1s ease-in-out infinite; }
@keyframes hint-fade { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hint-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scroll-icon .wheel { animation: none; } }
.chat-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.chat-head .icon-btn { margin-left: auto; }
.msgs { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #fafaf8; }
.msg { max-width: 86%; padding: 9px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 13px; }
.msg b { display: block; font-size: 11px; margin-bottom: 2px; }
.msg.me { align-self: flex-end; background: var(--ink); color: #fff; border-color: var(--ink); }
/* A look shared into the chat: a compact card on the shopper's side, thumbnail beside the pieces. */
.look-msg { align-self: flex-end; max-width: 86%; display: flex; gap: 10px; align-items: flex-start; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; }
.mini-look { flex: none; width: 52px; height: 78px; border-radius: 6px; overflow: hidden; background: var(--wall); }
.mini-look img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.look-msg-text { display: grid; gap: 3px; min-width: 0; }
.look-msg-label { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.look-msg-text ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; line-height: 1.3; }
.chat-input { flex: none; display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }
.chat-input input { flex: 1; height: 42px; border: 1px solid #cfccc6; border-radius: 999px; padding: 0 14px; }
.chat-input .send-btn { border-radius: 50%; }
.chat-input .send-btn:disabled { opacity: .35; cursor: default; }

/* modals */
.modal { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.4); display: grid; place-items: end center; }
@media (min-width: 768px) { .modal { place-items: center; } }
.sheet { width: min(100%, 420px); background: #fff; border-radius: 16px 16px 0 0; padding: 20px; max-height: 92vh; overflow: auto; }
@media (min-width: 768px) { .sheet { border-radius: 14px; } }
.sheet h3 { margin: 0 0 6px; font-size: 17px; font-weight: 500; }
/* The full Terms of Use and Privacy Policy */
.terms-sheet { display: flex; flex-direction: column; max-height: min(86vh, 760px); }
.terms-body { overflow-y: auto; margin: 6px -4px 12px; padding: 0 4px; font-size: 13px; line-height: 1.5; }
.terms-body h4 { margin: 14px 0 4px; font-size: 13.5px; }
.terms-body ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.terms-body p { margin: 0; }
.terms-link { font-size: inherit; text-underline-offset: 2px; }
.terms-foot { font-size: 12px; color: var(--muted); margin-top: 6px; }
.share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.share-t { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; font-size: 12px; text-decoration: none; }
/* The platforms' own logos (js/brand-icons.js): full marks at 46px, or a white glyph on the app's tile. */
.share-logo { width: 46px; height: 46px; display: grid; place-items: center; }
.share-logo svg { display: block; }
.brand-tile { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; }
.share-t:hover .share-logo { transform: translateY(-1px); } .share-logo { transition: transform .15s ease; }
.big-check { width: 56px; height: 56px; margin: 6px auto 10px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.big-check svg { width: 28px; height: 28px; }

/* companion app */
body.in-app { background: #e9e6e1; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; }
.app { position: relative; width: 100%; max-width: 430px; min-height: 100vh; background: #fff; display: flex; flex-direction: column; }
@media (min-width: 640px) { .app-shell { padding: 24px 0; } .app { min-height: min(880px, calc(100vh - 80px)); border-radius: 28px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.15); } }
.app-head { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); font-size: 13px; }
.app-brand { display: inline-flex; align-items: center; gap: 9px; color: #141210; }
.app-brand .ess-mark { width: 30px; height: 15px; }
.app-brand .ess-word { font-family: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif; font-size: 15px; letter-spacing: .2em; margin-right: -.2em; font-variation-settings: 'opsz' 48; }
.app-main { flex: 1; overflow: auto; padding-bottom: 76px; }
.app-nav { position: sticky; bottom: 0; display: flex; justify-content: space-around; border-top: 1px solid var(--line); background: #fff; padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); }
.app-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; text-decoration: none; color: var(--muted); padding: 4px 16px; }
.app-nav a.on { color: var(--ink); }
.app-exit { margin: 12px; font-size: 12px; color: var(--muted); }
.app-pad { padding: 18px 16px; }
.app-h { font-size: 20px; font-weight: 500; margin: 0 0 6px; }
.app-h2 { font-size: 15px; font-weight: 500; margin: 18px 0 8px; }
.app-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app-card { text-decoration: none; }
.app-card-art { background: var(--wall); border-radius: 10px; overflow: hidden; aspect-ratio: 3/5; display: flex; justify-content: center; margin-bottom: 6px; }
.app-card .look-art { height: 100%; }
.empty { text-align: center; padding: 40px 10px; }
.empty svg { display: inline; width: 16px; vertical-align: -3px; }
.app-detail { padding: 14px 0; }
.app-look { height: 62vh; max-height: 560px; background: var(--wall); display: flex; justify-content: center; margin: 10px 0; }
.app-items { list-style: none; padding: 0 16px; margin: 0; }
.app-items li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.app-items li > div { flex: 1; }
.ai-art { width: 52px; height: 52px; background: var(--soft); border-radius: 8px; display: grid; place-items: center; padding: 6px; flex: none; }
.ai-art svg { max-width: 100%; max-height: 100%; }
.scanner { position: relative; aspect-ratio: 1; background: #000; border-radius: 12px; overflow: hidden; margin: 12px 0; }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 18%; border: 3px solid #fff; border-radius: 14px; }
.tiles.two .tile-art { aspect-ratio: 3/4; }
.settings { list-style: none; padding: 0; margin: 16px 0; }
.settings li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.splash { justify-content: center; align-items: center; gap: 28px; background: linear-gradient(160deg, #dfe6ee, #f3efe9 60%, #e3d9cb); }
.app-brand.big { flex-direction: column; gap: 14px; }
.app-brand.big .ess-mark { width: 84px; height: 42px; }
.app-brand.big .ess-word { font-size: 26px; }
.splash-title { text-align: center; font-family: var(--serif); }
.splash-title i { display: block; font-size: 22px; }
.splash-title span { display: block; font-size: 48px; line-height: 1; }
.splash-title small { display: block; font-family: var(--sans); font-size: 13px; margin-top: 10px; }
.small-ring { width: 110px; height: 110px; }
.small-ring svg { transform: none; }

/* demo controls */
#demo-root { position: relative; z-index: 80; }
.demo-btn { position: fixed; left: 14px; bottom: 14px; z-index: 81; border: 1px dashed #888; background: #fffbe8; color: #5a4a00; border-radius: 999px; padding: 6px 12px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.demo-panel { position: fixed; left: 14px; bottom: 52px; z-index: 81; width: 280px; background: #fffef7; border: 1px solid #e6dfb8; border-radius: 12px; padding: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.15); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.demo-panel label select { margin-left: 6px; }
body.vfr-open .demo-btn { opacity: .6; }
@media (max-width: 767px) { body.vfr-open .demo-btn, body.vfr-open .demo-panel { display: none; } }
.swing { text-align: center; }
.tag-card { position: relative; width: 200px; margin: 14px auto; padding: 34px 18px 18px; background: #c9a77c; border-radius: 6px 6px 10px 10px; color: #3a2a17; clip-path: polygon(20% 0, 80% 0, 100% 10%, 100% 100%, 0 100%, 0 10%); }
.tag-hole { position: absolute; top: 12px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; }
.tag-brand { font-family: var(--serif); letter-spacing: .18em; font-size: 12px; }
.tag-name { font-size: 12px; margin: 4px 0 10px; }
.tag-qr { background: #fff; padding: 10px; border-radius: 4px; }
.tag-qr svg { width: 100%; height: auto; }
.tag-cta { font-size: 12px; margin-top: 8px; letter-spacing: .06em; }
@media print { body * { visibility: hidden; } .tag-card, .tag-card * { visibility: visible; } .tag-card { position: absolute; top: 20px; left: 20px; } }

/* profile: crops, checks, colours, sizes */
.pf-crops { display: grid; grid-template-columns: 0.8fr 1fr 1fr; gap: 8px; align-items: start; }
.pf-crop { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.crop { position: relative; overflow: hidden; border-radius: 8px; background: var(--wall); }
.crop img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; }
.pf-crop figcaption { font-size: 11.5px; font-weight: 500; }
.pf-crop.editing .crop { outline: 2px solid var(--ink); outline-offset: 2px; cursor: grab; touch-action: none; }
.pf-crop.editing .crop:active { cursor: grabbing; }
.crop-adjust { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 9px 3px 6px; font-size: 11px; }
.crop-adjust svg { width: 13px; height: 13px; }
.crop-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.crop-tools button { min-width: 30px; height: 28px; border: 1px solid var(--ink); background: #fff; border-radius: 6px; font-size: 14px; padding: 0 6px; }
.crop-tools button[data-pf="reset-crop"], .crop-tools .done { font-size: 11px; }
.crop-tools .done { background: var(--ink); color: #fff; }
.replace-photo { margin: 10px 0 4px; }
.crop-avatar { position: relative; }
.crop-avatar img { position: absolute; max-width: none; width: auto; height: auto; object-fit: initial; }
.tiles.one { grid-template-columns: minmax(0, 160px); }
.pf-checks { list-style: none; padding: 10px 12px; margin: 12px 0 4px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 6px; font-size: 12.5px; }
.pf-checks li { display: flex; gap: 8px; align-items: flex-start; }
.pf-checks li > svg, .pf-checks li:not(:has(svg))::before { flex: none; }
.pf-checks li svg { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: #e3f3e6; color: #1e7b34; }
.pf-checks li.warn, .pf-checks li.bad { font-weight: 500; }
.pf-checks li.warn { color: #7a5200; }
.pf-checks li.bad { color: var(--danger); }
.pf-checks li.warn::first-letter, .pf-checks li.bad::first-letter { font-weight: 700; }
.pf-h { font-size: 13px; font-weight: 600; margin: 18px 0 6px; letter-spacing: .02em; }
.pf-row { display: grid; gap: 6px; margin: 8px 0 12px; }
.swatches.wrap { flex-wrap: wrap; margin: 0; }
.swatches.more { padding: 8px; background: var(--soft); border-radius: 8px; margin-top: 6px; }
.sw { position: relative; flex: none; }
.sw i { position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); border: 2px solid #fff; }
.sw-none { background: repeating-linear-gradient(135deg, #fff 0 4px, #ddd 4px 6px); }
.sw-skip { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 4px 10px; font-size: 12px; color: var(--muted); }
.sw-skip.on { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.pf-colours-why { margin: 0 0 8px; }
.sw-more { height: 26px; border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 0 10px; font-size: 11.5px; }
.sw-more.on { border-color: var(--ink); }
.sw-custom { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; cursor: pointer; }
.sw-custom input { width: 30px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; }
.pf-sizing { margin-top: 6px; }
.pf-pref { margin-bottom: 4px; }
.pf-fit h4 { font-size: 12.5px; margin: 14px 0 4px; }
.pf-size { display: grid; grid-template-columns: 1fr 112px 76px; gap: 6px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pf-size select { height: 36px !important; padding: 0 6px !important; font-size: 12.5px; border: 1px solid #cfccc6; border-radius: 8px; background: #fff; }
.pf-size-name { font-size: 12.5px; }
.pf-eq { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }
.pf-fit .link { margin: 8px 0; display: inline-block; }
.chart-wrap { overflow-x: auto; margin: 6px 0 10px; }
.size-chart { border-collapse: collapse; width: 100%; font-size: 11.5px; text-align: center; }
.size-chart caption { text-align: left; font-weight: 600; font-size: 11.5px; padding: 4px 0; }
.size-chart th { background: var(--soft); font-weight: 600; }
.size-chart th, .size-chart td { border: 1px solid var(--line); padding: 4px 6px; }
.size-note { font-size: 10.5px; background: #e3f3e6; color: #1e7b34; border-radius: 999px; padding: 2px 8px; margin-left: auto; margin-right: 8px; }
.size small { font-size: 11px; }

/* photo check */
.analyze-photo { position: relative; width: 150px; margin: 8px auto 16px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.analyze-photo img { display: block; width: 100%; }
.analyze-photo.small-photo { width: 110px; }
.analyze-photo.rejected img { filter: grayscale(1) blur(2px); opacity: .7; }
.scanline { position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(transparent, rgba(38,38,38,.32), transparent); animation: scan 1.6s ease-in-out infinite alternate; }
@keyframes scan { from { top: -30%; } to { top: 100%; } }
.analyze-steps { list-style: none; padding: 0; margin: 0 auto; max-width: 280px; text-align: left; font-size: 13px; display: grid; gap: 8px; }
.analyze-steps li { opacity: .35; padding-left: 22px; position: relative; animation: step-on .4s ease forwards; }
.analyze-steps li::before { content: ""; position: absolute; left: 0; top: 3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); border-top-color: transparent; animation: spin .9s linear infinite; }
.analyze-steps li:nth-child(1) { animation-delay: .2s; } .analyze-steps li:nth-child(2) { animation-delay: 1.2s; }
.analyze-steps li:nth-child(3) { animation-delay: 2.2s; } .analyze-steps li:nth-child(4) { animation-delay: 3.2s; }
@keyframes step-on { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scanline { animation: none; } .analyze-steps li { opacity: 1; animation: none; } }

/* look view: profile in the top bar, modes, categories above the item row, "+" browser */
.head-avatar { padding: 0; }
.head-avatar .avatar { width: 30px; height: 30px; border: 1.5px solid rgba(255,255,255,.8); }
/* Fixed heights too (js/fitting-room.js CHROME): the switch never wraps, its note takes at most two lines. */
.mode-row { flex: none; box-sizing: border-box; height: 41px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 0; overflow: hidden; }
.mode-row .seg { flex: none; } .mode-row .seg button { white-space: nowrap; }
.mode-row > .fine { min-width: 0; margin: 0; font-size: 11.5px; line-height: 1.25; text-align: right; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tabs.bottom { flex: none; margin: 0; padding: 4px 6px 0; border-top: 0; gap: 4px; overflow-x: auto; }
.tabs.bottom button { font-size: 12.5px; padding: 6px 8px; }
.chip-more { border-style: dashed; justify-content: center; }
.chip-more .plus { width: 46px; height: 46px; display: grid; place-items: center; font-size: 26px; font-weight: 300; }
.sheet.browse { width: min(100%, 560px); }
.browse-head { display: flex; align-items: center; justify-content: space-between; }
/* Filter menus: each fills exactly its own column (a menu is otherwise as wide as its longest option, and spills into
   the next); a long choice is cut off with "…". */
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: 8px 10px; margin: 10px 0 14px; }
.flt { display: grid; gap: 3px; font-size: 11px; color: var(--muted); min-width: 0; }
.flt select { width: 100%; min-width: 0; max-width: 100%; height: 34px; border: 1px solid #cfccc6; border-radius: 8px; padding: 0 22px 0 6px; font-size: 12.5px; color: var(--ink); background-color: #fff; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.browse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
/* Every card the same shape, so rows line up: a square photo, a name of up to two lines, the price, the button at the foot. */
.bcard { display: flex; flex-direction: column; gap: 3px; }
.bcard-art { aspect-ratio: 1; background: var(--soft); border-radius: 8px; padding: 8%; display: grid; place-items: center; overflow: hidden; }
.bcard-art img, .bcard-art svg { width: 100%; height: 100%; object-fit: contain; }
.bcard-name { font-size: 12.5px; line-height: 1.35; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bcard .btn { margin-top: auto; }
.bcard .fine { margin-bottom: 6px; }
.flt input[type=search] { width: 100%; min-width: 0; box-sizing: border-box; height: 34px; border: 1px solid #cfccc6; border-radius: 8px; padding: 0 8px; font-size: 12.5px; }
.flt.shop-q { grid-column: 1 / -1; }
/* Pieces chosen to try on together: the bar sticks to the foot of the sheet. */
.pick-bar { position: sticky; bottom: -20px; margin: 14px -20px -20px; padding: 12px 20px; background: #fff; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.pick-bar .fine { flex: 1; }
.bcard .btn svg { width: 14px; height: 14px; }

/* profile sets and crop overrides */
.pf-sets { margin: 4px 0 12px; }
.set-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.set-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 12px; white-space: nowrap; }
.set-chip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; object-position: top; }
.set-chip.on { border-color: var(--ink); font-weight: 600; }
.set-chip.add { padding: 0 12px; border-style: dashed; }
.set-name { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.set-name input { flex: 1; min-width: 0; height: 34px !important; border: 1px solid #cfccc6; border-radius: 8px; padding: 0 10px; font-size: 13px; }
.crop img.own { position: static; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.own-badge { position: absolute; left: 4px; top: 4px; font-size: 9.5px; font-weight: 600; background: rgba(17,17,17,.75); color: #fff; border-radius: 4px; padding: 1px 5px; }
.crop-checking { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; background: rgba(255,255,255,.8); font-size: 11px; text-align: center; }
.crop-checking .spinner { width: 22px; height: 22px; margin: 0 auto; border-width: 2px; }
.crop-actions { display: flex; flex-wrap: wrap; gap: 4px; }
label.crop-adjust { cursor: pointer; }

/* store bag and wishlist pages */
.store-page { max-width: 760px; margin: 0 auto; padding: 32px 16px 96px; }
.store-page h1 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 0 0 20px; }
.store-page .grid { padding: 0; }
.cart-lines { list-style: none; padding: 0; margin: 0; }
.cart-lines li { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cl-art { width: 84px; height: 84px; background: var(--soft); border-radius: 8px; padding: 8px; display: grid; place-items: center; }
.cl-art svg, .cl-art img { max-width: 100%; max-height: 100%; }
.cart-lines a { text-decoration: none; }
.qty { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.qty button:not(.link) { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.cart-sum { display: flex; justify-content: space-between; padding: 16px 0; font-size: 16px; }
.wish.on svg, .wish-btn.on svg { fill: #c0392b; stroke: #c0392b; }
.wish-n { position: absolute; top: 2px; right: 0; font-size: 10px; font-weight: 600; }

/* app brands */
.brand-chip { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 13px; font-weight: 600; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; }
.brand-dot { width: 24px; height: 24px; border-radius: 50%; color: #fff; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.brand-list { list-style: none; padding: 0; margin: 0 0 8px; }
.brand-list li { display: grid; grid-template-columns: 32px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.brand-list .brand-dot { width: 32px; height: 32px; font-size: 14px; }
.pill-on { font-size: 11px; background: #e3f3e6; color: #1e7b34; border-radius: 999px; padding: 2px 8px; }

/* chat: AI advisor, hand-over to a person */
/* "AI" next to the stylist's name and AI-picked colours: dark grey on light grey, readable on any panel colour. */
.ai-badge { display: inline-block; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; line-height: 1.5; padding: 0 5px; border-radius: 4px; background: var(--soft); border: 1px solid var(--line); color: #4a4741; vertical-align: 1px; margin-left: 4px; }
.msg.agent { border-color: #b9d3f0; background: #f2f7fd; }
.msg.system { align-self: center; max-width: 92%; background: none; border: 0; padding: 2px 6px; font-size: 11.5px; color: var(--muted); text-align: center; }
.msg.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: vfr-dot 1s infinite ease-in-out; }
.msg.typing span:nth-child(2) { animation-delay: .15s; } .msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes vfr-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .msg.typing span { animation: none; } }
.chat-head .talk-btn { margin-left: auto; min-height: 30px; }
.chat-head .talk-btn + .icon-btn, .chat-head .new-chat + .icon-btn { margin-left: 0; }
.chat-head .new-chat:disabled { opacity: .35; cursor: default; }

/* ---------- Brand theme layer ----------
   Tokens come from the brand's dashboard (js/widget-api.js) and can be overridden in the brand's own CSS:
   --vfr-primary, --vfr-on-primary, --vfr-accent, --vfr-panel, --vfr-text, --vfr-panel-radius, --vfr-btn-radius,
   --vfr-font, --vfr-heading-font. Stable hooks: [data-vfr-part="panel|chat|hanger|try-button|handover-button"]. */
#vfr-root { --ink: var(--vfr-text, #111); --pick: var(--vfr-accent, #f7d9e3); font-family: var(--vfr-font, var(--sans)); }
#vfr-root .vfr-panel, #vfr-root .side-pane { background: var(--vfr-panel, #fff); color: var(--vfr-text, #111); }
@media (min-width: 1024px) { #vfr-root .vfr-panel, #vfr-root .side-pane { border-radius: var(--vfr-panel-radius, 12px); } }
#vfr-root h2, #vfr-root h3 { font-family: var(--vfr-heading-font, inherit); }
#vfr-root .btn, #vfr-root .seg, #vfr-root .seg button, #vfr-root .tp-btn, #vfr-root .chat-input input, #vfr-root .set-chip,
#vfr-root .sw-more, #vfr-root .reedit, #vfr-root .vfr-pill { border-radius: var(--vfr-btn-radius, 999px); }
#vfr-root .btn.primary, #vfr-root .vfr-pill, #vfr-root .reedit, #vfr-root .seg button.on, #vfr-root .msg.me,
.hanger, .card-try { background: var(--vfr-primary, #111); color: var(--vfr-on-primary, #fff); border-color: var(--vfr-primary, #111); }
.try-btn { border-color: var(--vfr-primary, #111); color: var(--vfr-primary, #111); border-radius: var(--vfr-btn-radius, 999px); }
.hanger::after { content: attr(data-label); background: var(--vfr-primary, #111); color: var(--vfr-on-primary, #fff); }
body[data-vfr-hanger="bottom-left"] .hanger { left: 22px; transform: none; }
body[data-vfr-hanger="bottom-right"] .hanger { left: auto; right: 22px; transform: none; }
body[data-vfr-hanger="top-right"] .hanger { left: auto; right: 22px; top: 22px; bottom: auto; transform: none; }
body[data-vfr-hanger="top-right"] .hanger::after { bottom: auto; top: 60px; }
body[data-vfr-hanger="hidden"] .hanger, body[data-vfr-hanger="hidden"] .card-try { display: none; }

/* "Powered by Instawear": the only Instawear branding inside a brand's widget (the brand can turn it off) */
.powered { margin: 14px 0 0; font-size: 10.5px; letter-spacing: .08em; color: var(--muted); }
.powered .ess-word { font-family: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif; letter-spacing: .2em; color: var(--vfr-text, #111); }

/* Saved looks use a bookmark; the heart is reserved for the brand's wishlist */
.save-btn.on svg { fill: currentColor; }

/* Virtual stylist: product cards, the look card, quick questions */
.stylist-extras { display: grid; gap: 8px; margin-top: 10px; }
.p-card { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--vfr-panel, #fff); }
.p-card img, .p-noimg { width: 44px; height: 54px; object-fit: cover; border-radius: 5px; background: var(--soft); }
.p-info { display: grid; gap: 1px; min-width: 0; font-size: 12px; } .p-info b { font-size: 12.5px; margin: 0; } .p-info span { color: var(--muted); }
.look-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--vfr-panel, #fff); display: grid; gap: 8px; }
.lc-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: 12px; } .lc-head b { font-size: 13px; margin: 0; } .lc-head span { color: var(--muted); }
.lc-items { display: flex; gap: 6px; overflow-x: auto; }
.lc-items figure { margin: 0; flex: 0 0 64px; } .lc-items img { width: 64px; height: 78px; object-fit: cover; border-radius: 6px; background: var(--soft); }
.lc-items figcaption { font-size: 10.5px; line-height: 1.25; margin-top: 3px; color: var(--muted); }
.msg.typing em { font-style: normal; font-size: 11.5px; color: var(--muted); margin-left: 6px; }
.quick { flex: none; display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px 0; scrollbar-width: none; }
.quick-chip { flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--vfr-btn-radius, 999px); background: var(--vfr-panel, #fff); font-size: 12px; white-space: nowrap; }
.quick-chip:hover { border-color: var(--vfr-primary, #111); }
/* Desktop has no swipe: the quick questions wrap onto more lines inside the chat instead of running off its edge. */
@media (min-width: 1024px) {
  .quick { flex-wrap: wrap; overflow: visible; }
  .quick-chip { white-space: normal; height: auto; min-height: 30px; padding: 6px 12px; text-align: left; line-height: 1.25; }
}

/* The brand hides try-on while every room is taken */

/* Instawear app: language picker */
.app-lang { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; font-size: 14px; }
.app-lang select { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; }

/* Daily try-on limit */
.limit-sheet { display: grid; gap: 8px; justify-items: center; text-align: center; }
.limit-sheet h3 { margin: 4px 0 0; }
.limit-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--vfr-accent, #f7d9e3); color: var(--vfr-text, #111); }
.limit-icon svg { width: 26px; height: 26px; }
.limit-wait { margin: 6px 0 0; font-size: 15px; }
.limit-left { font-size: 18px; font-variant-numeric: tabular-nums; }
.limit-sheet .btn { margin-top: 8px; }

/* Fitting Room: hover tooltips on icon buttons */
.vfr-tip { position: fixed; z-index: 2147483000; max-width: 220px; padding: 5px 9px; border-radius: 6px; background: #111; color: #fff; font: 500 12px/1.3 var(--sans, system-ui), sans-serif;
  pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.18); white-space: normal; text-align: center; }
.vfr-tip[hidden] { display: none; }
.round-btn:disabled { opacity: .45; cursor: default; }
/* A new look's picture (js/fitting-room.js newLookPhoto): framed on the full-body crop, or the whole photo. */
.look-art.blank { overflow: hidden; }
.look-art.blank .frame-23 { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 2 / 3; transform: translateX(-50%); overflow: hidden; }
.look-art.blank .look-photo.framed { position: absolute; max-width: none; object-fit: fill; }
.look-art.blank .look-photo.whole { position: relative; object-fit: contain; }
.look-art.blank .look-blur { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; filter: blur(22px) saturate(1.05) brightness(.92); }

/* ---------- Hover feedback ----------
   In the Fitting Room every button reverses its colours on hover: light buttons take the brand colour, dark ones go
   light with the brand colour. Mouse and trackpad only (a tap would leave the hover stuck), and never when disabled.
   Text links and colour swatches keep their own look. */
#vfr-root :is(.btn, .round-btn, .icon-btn, .tp-btn, .quick-chip, .chip, .seg button, .tag-main, .mirror-btn, .sw-skip, .sw-more, .set-chip) {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
@media (hover: hover) {
  #vfr-root :is(.btn:not(.primary), .round-btn, .quick-chip, .mirror-btn, .sw-skip:not(.on), .sw-more, .set-chip:not(.on),
    .chat-head .icon-btn, .chat-input .icon-btn, .browse-head .icon-btn, .sheet .icon-btn):not(:disabled):hover {
    background: var(--vfr-primary, #111); color: var(--vfr-on-primary, #fff); border-color: var(--vfr-primary, #111);
  }
  #vfr-root :is(.btn.primary, .vfr-pill, .sw-skip.on, .vfr-head .icon-btn:not(.ghost)):not(:disabled):hover {
    background: var(--vfr-panel, #fff); color: var(--vfr-primary, #111); border-color: var(--vfr-primary, #111);
  }
  /* A tag's menu (Add to bag, Add to wishlist): the button stays as it is and its icon fills in, in its own colour
     (the bag's body, not its handle; a wishlisted heart is already filled). */
  #vfr-root .tp-btn svg path:first-child { transition: fill .15s ease; }
  #vfr-root .tp-btn:not(.on):not(:disabled):hover svg path:first-child { fill: currentColor; }
  /* Product boxes (the strip under the look, Add more, and the thumbnail tags on a look) hold product photos, which
     blend into a white background and would go dark if the box did: they get a brand-coloured outline and name, and lift. */
  #vfr-root :is(.chip, .tag-main) { transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
  #vfr-root :is(.chip, .tag-main):not(:disabled):hover { border-color: var(--vfr-primary, #111); box-shadow: 0 0 0 1.5px var(--vfr-primary, #111), 0 4px 12px rgba(0,0,0,.12); transform: translateY(-1px); outline: none; }
  #vfr-root :is(.chip, .tag-main):not(:disabled):hover :is(small, .chip-name, .plus) { color: var(--vfr-primary, #111); }
}

/* The widget uses the brand's colour for focus rings (keyboard), focused fields, and tick boxes and sliders, instead of
   the browser's blue. */
#vfr-root { accent-color: var(--vfr-primary, #111); }
#vfr-root :focus-visible { outline: 2px solid var(--vfr-primary, #111); outline-offset: 2px; }
#vfr-root :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea):focus {
  outline: none; border-color: var(--vfr-primary, #111); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vfr-primary, #111) 22%, transparent);
}
#vfr-root :is(.check input, input[type=range], input[type=radio], input[type=checkbox]) { accent-color: var(--vfr-primary, #111); }

/* ---------- The look: tags and buttons on demand ----------
   With a mouse, the look shows just the picture: hovering over it (or tabbing into it) slides the round buttons up from
   the bottom and the product tags in from the right, one after another. A tag whose menu is open keeps them showing.
   On touch screens they always show, and the corner button switches to just the image (and back). */
.view-toggle { position: absolute; top: 10px; left: 10px; z-index: 4; width: 36px; height: 36px; }
.view-toggle svg { width: 18px; height: 18px; }
.stage.clean :is(.look-art .tag, .stage-actions, .disclaimer) { display: none; }
@media (hover: hover) and (pointer: fine) {
  .view-toggle { display: none; }
  .vfr-panel .stage .stage-actions { opacity: 0; translate: 0 18px; transition: translate .28s ease, opacity .22s ease; }
  .vfr-panel .stage .look-art .tag { opacity: 0; translate: 28px 0; transition: translate .28s ease, opacity .22s ease; }
  .vfr-panel .stage:is(:hover, :focus-within, :has(.tag.open)) :is(.stage-actions, .look-art .tag) { opacity: 1; translate: 0 0; }
  .vfr-panel .stage:not(:hover):not(:focus-within):not(:has(.tag.open)) :is(.stage-actions button, .look-art .tag) { pointer-events: none; }
  .vfr-panel .stage .look-art .tag:nth-of-type(2) { transition-delay: .04s; } .vfr-panel .stage .look-art .tag:nth-of-type(3) { transition-delay: .08s; }
  .vfr-panel .stage .look-art .tag:nth-of-type(4) { transition-delay: .12s; } .vfr-panel .stage .look-art .tag:nth-of-type(5) { transition-delay: .16s; }
}
@media (prefers-reduced-motion: reduce) { .vfr-panel .stage :is(.stage-actions, .look-art .tag) { transition: opacity .15s ease !important; translate: 0 0 !important; } }

/* ---------- Instawear app: in store ----------
   The store QR's download page, adding a store, the barcode scanner and trying a piece on in the app. */
.store-landing { display: grid; gap: 14px; justify-items: center; padding-top: 28px; }
.landing-store { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.store-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.store-badge { display: grid; padding: 8px 12px; border-radius: 10px; background: #000; color: #fff; text-decoration: none; text-align: left; }
.store-badge span { font-size: 10px; opacity: .8; } .store-badge b { font-size: 16px; font-weight: 600; }
.add-terms { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); margin: 4px 0 12px; }
.add-terms .facts { margin: 6px 0 0; }
.code-entry { display: flex; gap: 8px; margin: 12px 0 4px; }
.code-entry input { flex: 1; height: 42px; border: 1px solid #cfccc6; border-radius: 999px; padding: 0 14px; font-size: 15px; letter-spacing: .04em; }
.barcode-num { font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.try-product { display: flex; gap: 12px; align-items: center; margin: 14px 0; }
.try-art { width: 76px; height: 96px; border-radius: 8px; background: var(--soft); display: grid; place-items: center; overflow: hidden; flex: none; }
.try-art img { width: 100%; height: 100%; object-fit: cover; }
.block-seg { display: flex; width: 100%; margin-bottom: 12px; } .block-seg button { flex: 1; padding: 9px 10px; }
.try-busy { text-align: center; padding: 26px 0; } .try-busy .spinner { margin: 0 auto 12px; }
.try-error { color: var(--danger); font-size: 13px; }
.try-sorry { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.try-sorry p { margin: 0; } .try-sorry .btn { margin-top: 10px; }

/* Add to bag for a store's own product: its options as buttons, the size we suggest from the shopper's profile and the
   store's size guide, and why when it isn't the size they gave (js/sizing.js). */
.opt-sheet { width: min(100%, 460px); }
.opt-prod { display: flex; gap: 12px; align-items: center; margin: 2px 0 14px; }
.opt-prod > img { width: 64px; height: 80px; object-fit: cover; border-radius: 8px; background: var(--soft); flex: none; }
.opt-group { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.opt-group legend { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; padding: 0; }
.opt-group legend b { color: var(--ink); font-weight: 600; }
.opt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-chip { min-width: 46px; min-height: 40px; padding: 5px 12px; border: 1px solid #cfccc6; border-radius: 8px; background: #fff; color: var(--ink); font-size: 13px; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.opt-chip small { font-size: 9.5px; color: var(--muted); margin-top: 1px; }
.opt-chip.on { border-color: var(--vfr-primary, #111); box-shadow: inset 0 0 0 1px var(--vfr-primary, #111); }
.opt-chip.suggested:not(.on) { border-style: dashed; border-color: #8d877c; }
.opt-chip.out { color: #a9a59d; text-decoration: line-through; cursor: not-allowed; background: #f7f6f4; }
.size-ok, .size-note { font-size: 12.5px; margin: 8px 0 0; }
.size-ok { color: #1f7a4d; display: flex; gap: 6px; align-items: flex-start; } .size-ok svg { width: 14px; height: 14px; flex: none; margin-top: 2px; stroke-width: 2.4; }
.size-note.warn { color: #9a4a12; }
.size-why { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #f6f1e8; border: 1px solid #ebe2d2; font-size: 12.5px; line-height: 1.45; }
.size-why b { display: block; margin-bottom: 2px; } .size-why p { margin: 0; }
.size-guide { margin: 0 0 14px; font-size: 12.5px; } .size-guide summary { cursor: pointer; padding: 4px 0; }
.size-chart tr.mine td { background: #f3eee6; font-weight: 600; }
.bag-lines.busy { opacity: .55; pointer-events: none; }
.bl-art img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Confirmations (icons.js askConfirm): a card on a wide screen, a sheet from the bottom on a phone. */
.ask { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: end center; background: rgba(17,17,17,0); transition: background .18s; font-family: var(--sans); }
.ask.show { background: rgba(17,17,17,.45); }
.ask-card { width: min(100%, 420px); box-sizing: border-box; background: var(--paper, #fff); color: var(--ink, #111); border-radius: 18px 18px 0 0; padding: 22px 20px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0,0,0,.18); transform: translateY(24px); opacity: 0; transition: transform .2s ease, opacity .2s ease; text-align: center; }
.ask.show .ask-card { transform: none; opacity: 1; }
.ask-img { display: block; width: 96px; height: 128px; object-fit: cover; border-radius: 10px; margin: 0 auto 14px; background: var(--soft); }
.ask-card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 500; }
.ask-card p { margin: 0 auto; max-width: 32ch; color: var(--muted); font-size: 14px; line-height: 1.45; }
.ask-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.ask-btns .btn { width: 100%; }
.btn.primary.ask-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
@media (min-width: 768px) {
  .ask { place-items: center; }
  .ask-card { border-radius: 16px; padding: 26px 26px 22px; box-shadow: 0 18px 50px rgba(0,0,0,.22); transform: scale(.96); }
}
@media (prefers-reduced-motion: reduce) { .ask, .ask-card { transition: none; } }

/* Hover feedback for what sits outside the panel's own hover rules above: the confirmation dialog (on the page itself),
   the options in Add to bag, and the bag's − and + buttons. Same idea: light buttons take the brand colour, dark ones go light. */
.ask-btns .btn, .opt-chip, .qty button:not(.link) { transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; cursor: pointer; }
@media (hover: hover) {
  .ask-btns .btn:not(.primary):hover, #vfr-root .qty button:not(.link):not(:disabled):hover {
    background: var(--vfr-primary, #111); color: var(--vfr-on-primary, #fff); border-color: var(--vfr-primary, #111);
  }
  .ask-btns .btn.primary:not(.ask-danger):hover { background: var(--paper, #fff); color: var(--vfr-primary, #111); border-color: var(--vfr-primary, #111); }
  .ask-btns .btn.primary.ask-danger:hover { background: var(--paper, #fff); color: var(--danger); border-color: var(--danger); }
  #vfr-root .opt-chip:not(:disabled):not(.on):hover { border-color: var(--vfr-primary, #111); box-shadow: inset 0 0 0 1px var(--vfr-primary, #111); }
  #vfr-root .opt-chip.on:hover { background: var(--soft); }
}
.ask-btns .btn:focus-visible { outline: 2px solid var(--vfr-primary, #111); outline-offset: 2px; }

/* Smaller product tags when a short window can't fit them at full size (js/fitting-room.js layoutTags). */
.look-art[data-tags="compact"] .tag-thumb { width: 28px; height: 28px; margin-bottom: 2px; }
.look-art[data-tags="compact"] .tag-main small { -webkit-line-clamp: 1; }
.look-art[data-tags="tiny"] .tag-thumb { width: 26px; height: 26px; margin: 0 auto; }
.look-art[data-tags="tiny"] .tag-main { min-width: 0; padding: 3px; }
.look-art[data-tags="tiny"] .tag-main small { display: none; }
/* Every tag in a look's column is the same width, so the column lines up (js/fitting-room.js layoutTags). */
.look-art > .tag .tag-main { box-sizing: border-box; width: 92px; min-width: 0; max-width: none; }
.look-art[data-tags="compact"] > .tag .tag-main { width: 84px; }
.look-art[data-tags="tiny"] > .tag .tag-main { width: 40px; }

/* Switches (My Pick / AI Stylist, shopping preference…) don't swap colours on hover, so the two halves never clash:
   the chosen one stays as it is, the other gets a light tint and the brand colour. */
@media (hover: hover) {
  #vfr-root .seg button:not(.on):not(:disabled):hover { background: var(--soft); color: var(--vfr-primary, #111); }
  #vfr-root .seg button.on { cursor: default; }
}
/* Short panel (js/fitting-room.js fitShort): the look gets the room. Tags that can't fit above the buttons are hidden. */
#vfr-root[data-short="strip"] .vfr-body.look .strip, #vfr-root[data-short="1"] .vfr-body.look :is(.mode-row, .strip) { display: none; }
#vfr-root .look-art[data-tags="none"] > .tag { display: none; }

/* Share your look: the picture (Share picture, Download), then a link the shopper chooses to make. */
.share-sheet .row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.share-sheet .row .btn { flex: 1; }
.share-sub { margin: 18px 0 6px; font-size: 13px; font-weight: 600; }
.share-link { display: flex; gap: 8px; margin: 6px 0 4px; }
.share-link input { flex: 1; min-width: 0; height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font-size: 12.5px; color: var(--ink); background: var(--soft); }
.share-making { display: flex; align-items: center; gap: 8px; }
.spinner.small { width: 16px; height: 16px; margin: 0; border-width: 2px; }
/* A very short panel is also narrower (down to 260px): the look's round buttons are a little smaller so all six fit. */
#vfr-root[data-short="1"] .vfr-panel .stage-actions { gap: 6px; }
/* The narrow short panel: when a look is about to be deleted, that note matters more than "Not a size guide". */
#vfr-root[data-short="1"] .disclaimer.has-note .disc-guide { display: none; }
#vfr-root[data-short="1"] .vfr-panel .stage-actions .round-btn { width: 36px; height: 36px; }
#vfr-root[data-short="1"] .vfr-panel .stage-actions .round-btn svg { width: 18px; height: 18px; }

/* The pieces strip folds away under the look (the arrow beside the mode note, js/fitting-room.js strip-toggle): the
   look takes its room. Hidden anyway on a short panel, so the arrow is too. */
.mode-row > .fine { flex: 1; }
.mode-row .strip-toggle { flex: none; width: 30px; height: 30px; border-radius: 50%; color: var(--ink); }
.mode-row .strip-toggle svg { width: 18px; height: 18px; }
.vfr-body.look.strip-hidden .strip { display: none; }
#vfr-root[data-short] :is(.mode-row .strip-toggle) { display: none; }
#vfr-root[data-short=""] .mode-row .strip-toggle { display: grid; }

/* Profile: tabs for the profile and the shopper's saved looks (a grid of their pictures). */
.pf-tabs { margin: 12px 0 14px; }
.saved-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-bottom: 14px; }
.saved-look { position: relative; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--soft); aspect-ratio: 2 / 3; cursor: pointer; }
.saved-look img { width: 100%; height: 100%; object-fit: cover; display: block; }
.saved-look span { position: absolute; left: 6px; bottom: 6px; font-size: 11px; background: rgba(255,255,255,.9); border-radius: 999px; padding: 2px 8px; }
@media (hover: hover) { #vfr-root .saved-look:hover { box-shadow: 0 0 0 2px var(--vfr-primary, #111); } #vfr-root .strip-toggle:hover { background: var(--soft); } }
.saved-empty { margin: 24px 0; }