/* 商品页 AI 试戴：主图右上角按钮 + 弹窗（桌面居中卡片，手机全屏） */
.lt-root {
  --lt-ink: #1C1B19;
  --lt-ivory: #F7F3EE;
  --lt-tortoise: #8A5A35;
  --lt-muted: #6E6A64;
  --lt-line: #E4DCD1;
  --lt-ok: #3F6B4E;
  --lt-warn: #B4562F;
}
/* Try on 按钮：白底胶囊 + 一段玳瑁色光沿描边循环流动（底层浅描边常驻，上层锥形渐变转角度） */
@property --lt-flow {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.lt-open {
  --lt-fill: #fff;
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 17px 0 13px;
  border: 2px solid transparent;
  border-radius: 99px;
  background:
    linear-gradient(var(--lt-fill), var(--lt-fill)) padding-box,
    conic-gradient(from var(--lt-flow), transparent 0 45%, rgba(214, 150, 80, .4) 62%, #D99A52 80%, #8A5A35 93%, transparent 100%) border-box,
    linear-gradient(var(--lt-line), var(--lt-line)) border-box;
  color: #1C1B19;
  font: 600 14px/1 var(--body-font);
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(28, 27, 25, .10);
  animation: lt-flow 3.2s linear infinite;
  transition: box-shadow .2s, transform .2s;
}
@keyframes lt-flow {
  to { --lt-flow: 360deg; }
}
/* 悬停不换底色（换深底后在部分浏览器里只剩白字、看不清），只加深阴影、轻微上浮 */
.lt-open:hover {
  box-shadow: 0 6px 20px rgba(28, 27, 25, .18);
  transform: translateY(-1px);
}
.lt-open svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  overflow: visible;
}
/* 扫描线：常驻在取景框里上下扫，提示这是「试戴」 */
.lt-open__scan {
  opacity: 0;
  stroke: #C98A4B;
  animation: lt-scan 1.6s ease-in-out infinite;
}
@keyframes lt-scan {
  0% { opacity: 0; transform: translateY(-5px); }
  20%, 80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .lt-open,
  .lt-open__scan {
    animation: none;
  }
}
html.lt-lock {
  overflow: hidden;
}
.lt-root .lt {
  width: min(1040px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: auto;
  color: var(--lt-ink);
  background: #fff;
  box-shadow: 0 30px 80px rgba(28, 27, 25, .25);
}
.lt-root .lt[open] {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
.lt-root .lt::backdrop {
  background: rgba(28, 27, 25, .55);
}
.lt-root .lt-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: var(--lt-ivory);
}
.lt-root .lt-stage {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #E9E2D8;
  touch-action: none;
  min-height: 200px;
}
.lt-root .lt-photo {
  display: block;
  width: 100%;
  height: auto;
}
.lt-root .lt-glasses {
  position: absolute;
  max-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .18));
  transition: opacity .2s;
}
.lt-root .lt-lens {
  position: absolute;
  max-width: none;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.lt-root .lt-stage.is-busy .lt-glasses,
.lt-root .lt-stage.is-busy .lt-lens {
  opacity: 0;
}
.lt-root .lt-status {
  position: absolute;
  inset: auto 12px 12px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(28, 27, 25, .72);
  color: #fff;
  font-size: 13px;
  text-align: center;
}
.lt-root .lt-status:empty {
  display: none;
}
.lt-root .lt-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
}
.lt-root .lt-tools button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--lt-ink);
  font: 600 16px/1 var(--body-font);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.lt-root .lt-row-label,
.lt-root .lt-fit__label {
  margin: 0;
  font: 600 11px var(--body-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lt-muted);
}
.lt-root .lt-faces {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.lt-root .lt-faces button {
  flex: 0 0 60px;
  height: 60px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  overflow: hidden;
  background: none;
  cursor: pointer;
}
.lt-root .lt-faces button[aria-pressed="true"] {
  border-color: var(--lt-tortoise);
}
.lt-root .lt-faces img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lt-root .lt-right {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px 30px;
}
.lt-root .lt-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--lt-ivory);
  color: var(--lt-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lt-root .lt-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 600 11px var(--body-font);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lt-tortoise);
}
.lt-root .lt-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
}
.lt-root .lt-title {
  margin: 6px 0 2px;
  font: 600 26px/1.2 var(--title-font);
  color: var(--lt-ink);
}
.lt-root .lt-sub {
  margin: 0;
  font-size: 14px;
  color: var(--lt-muted);
}
.lt-root .lt-colors {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: -6px;
}
.lt-root .lt-color-name {
  color: var(--lt-ink);
  letter-spacing: .06em;
}
.lt-root .lt-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lt-root .lt-swatches button {
  position: relative;
  width: 68px;
  height: 40px;
  padding: 6px 7px;
  border: 1px solid var(--lt-line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.lt-root .lt-swatches button:hover {
  border-color: var(--lt-muted);
}
.lt-root .lt-swatches button[aria-pressed="true"] {
  border-color: var(--lt-ink);
  box-shadow: inset 0 0 0 1px var(--lt-ink);
}
.lt-root .lt-swatches img {
  position: absolute;
  inset: 6px 7px;
  width: calc(100% - 14px);
  height: calc(100% - 12px);
  object-fit: contain;
}
.lt-root .lt-swatches .lt-swatch-lens {
  mix-blend-mode: multiply;
}
.lt-root .lt-fit {
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: var(--lt-ivory);
}
.lt-root .lt-fit__verdict {
  margin-top: 4px;
  font: 700 22px var(--body-font);
}
.lt-root .lt-fit[data-tone="ok"] .lt-fit__verdict {
  color: var(--lt-ok);
}
.lt-root .lt-fit[data-tone="wide"] .lt-fit__verdict,
.lt-root .lt-fit[data-tone="narrow"] .lt-fit__verdict {
  color: var(--lt-warn);
}
.lt-root .lt-fit__note {
  margin: 6px 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lt-muted);
}
.lt-root .lt-gauge {
  position: relative;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, #E9C9B5 0 30%, #CFE0D3 30% 70%, #E9C9B5 70% 100%);
}
.lt-root .lt-fit__marker {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--lt-ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  transition: left .3s;
}
.lt-root .lt-gauge-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--lt-muted);
}
.lt-root .lt-fit__nums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.lt-root .lt-fit__nums div {
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
}
.lt-root .lt-fit__nums b {
  display: block;
  font: 600 18px var(--body-font);
}
.lt-root .lt-fit__nums span {
  font-size: 11px;
  color: var(--lt-muted);
}
.lt-root .lt-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 99px;
  background: var(--lt-ink);
  color: #fff;
  font: 600 14px var(--body-font);
  letter-spacing: .04em;
  cursor: pointer;
}
.lt-root .lt-upload input {
  display: none;
}
.lt-root .lt-privacy {
  margin: -10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--lt-muted);
}
@media (max-width: 959px) {
  .lt-open {
    top: 10px;
    right: 10px;
    height: 34px;
    padding: 0 14px 0 11px;
    font-size: 13px;
  }
  .lt-root .lt {
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
  }
  .lt-root .lt[open] {
    display: block;
  }
  .lt-root .lt-left {
    padding: 12px;
  }
  .lt-root .lt-right {
    gap: 18px;
    padding: 20px 16px 28px;
  }
  .lt-root .lt-close {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  }
  .lt-root .lt-title {
    font-size: 22px;
  }
  .lt-root .lt-tools {
    top: auto;
    bottom: 12px;
  }
  .lt-root .lt-left .lt-colors {
    margin: 2px 0 4px;
  }
  .lt-root .lt-swatches {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .lt-root .lt-swatches button {
    flex: 0 0 64px;
  }
}