/* Zuvama Lens — shared image zoom experience for wardrobe previews and Try-On results. */
.zuvama-lens-trigger{
  position:absolute;
  z-index:4;
  display:inline-flex;
  min-width:48px;
  min-height:48px;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 13px;
  border:1px solid color-mix(in srgb,var(--brand-aqua) 48%,rgba(255,255,255,.3));
  border-radius:999px;
  background:linear-gradient(145deg,rgba(16,38,31,.84),rgba(20,91,75,.78));
  color:var(--on-brand);
  box-shadow:0 14px 34px rgba(3,10,8,.22),inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(16px) saturate(135%);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease
}
.zuvama-lens-trigger--garment{left:18px;bottom:18px}
.zuvama-lens-trigger--tryon{top:18px;left:18px}
.tryon-library-card{position:relative}
.zuvama-lens-trigger--tryon-history{top:12px;right:12px}
.zuvama-lens-trigger:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 42px rgba(3,10,8,.28),inset 0 1px 0 rgba(255,255,255,.2)}
.zuvama-lens-trigger:active{transform:scale(.97)}
.zuvama-lens-trigger:focus-visible{outline:3px solid var(--brand-aqua);outline-offset:3px}
.zuvama-lens-trigger[disabled]{opacity:.48;cursor:not-allowed;transform:none}
.zuvama-lens-trigger__mark{position:relative;display:grid;width:28px;height:28px;place-items:center;flex:0 0 auto;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.26),transparent 34%),color-mix(in srgb,var(--brand-aqua) 24%,transparent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.zuvama-lens-trigger__mark svg{width:18px;height:18px;overflow:visible}
.zuvama-lens-trigger__mark::after{content:"+";position:absolute;right:-3px;bottom:-3px;display:grid;width:14px;height:14px;place-items:center;border-radius:50%;background:var(--brand-aqua);color:var(--brand-forest);font-size:.65rem;font-weight:900;line-height:1;box-shadow:0 2px 7px rgba(0,0,0,.22)}
.zuvama-lens-trigger__label{white-space:nowrap}

.zuvama-lens-overlay{
  position:fixed;
  z-index:90;
  inset:0;
  display:grid;
  width:100%;
  height:100vh;
  height:100dvh;
  place-items:center;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  background:radial-gradient(circle at 20% 10%,rgba(158,216,199,.14),transparent 34%),rgba(2,8,6,.9);
  color:var(--on-brand);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  overflow:hidden;
  overscroll-behavior:contain
}
.zuvama-lens-overlay[hidden]{display:none!important}
.zuvama-lens-overlay:not([hidden]){animation:zuvama-lens-fade-in .18s ease-out both}
.zuvama-lens{
  position:relative;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  width:min(100%,1180px);
  height:min(100%,900px);
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:30px;
  background:linear-gradient(155deg,rgba(12,29,23,.97),rgba(6,17,13,.96));
  box-shadow:0 40px 120px rgba(0,0,0,.5)
}
.zuvama-lens__header{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent)
}
.zuvama-lens__identity{display:flex;min-width:0;align-items:center;gap:12px}
.zuvama-lens__brand-mark{position:relative;display:grid;width:44px;height:44px;flex:0 0 auto;place-items:center;border:1px solid rgba(158,216,199,.44);border-radius:15px;background:linear-gradient(145deg,rgba(158,216,199,.18),rgba(35,123,123,.08));color:var(--brand-aqua);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.zuvama-lens__brand-mark svg{width:25px;height:25px}
.zuvama-lens__brand-mark::after{content:"✦";position:absolute;right:-5px;top:-6px;color:var(--brand-aqua);font-size:.76rem;text-shadow:0 0 12px rgba(158,216,199,.75)}
.zuvama-lens__heading{min-width:0}
.zuvama-lens__eyebrow{display:block;margin-bottom:1px;color:var(--brand-aqua);font-size:.68rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.zuvama-lens__title{display:block;max-width:min(62vw,650px);overflow:hidden;color:var(--on-brand);font-family:"New York",Georgia,serif;font-size:clamp(1rem,2vw,1.3rem);font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.zuvama-lens__close{display:grid;width:48px;height:48px;flex:0 0 auto;place-items:center;border:1px solid rgba(255,255,255,.15);border-radius:16px;background:rgba(255,255,255,.06);color:var(--on-brand);font-size:1.55rem;line-height:1;cursor:pointer;touch-action:manipulation}
.zuvama-lens__close:hover{background:rgba(255,255,255,.12)}
.zuvama-lens__close:focus-visible,.zuvama-lens__control:focus-visible,.zuvama-lens__range:focus-visible,.zuvama-lens__viewport:focus-visible{outline:3px solid var(--brand-aqua);outline-offset:3px}

.zuvama-lens__viewport{
  position:relative;
  display:grid;
  min-width:0;
  min-height:0;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at center,rgba(158,216,199,.08),transparent 42%),
    linear-gradient(45deg,rgba(255,255,255,.018) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.018) 75%),
    linear-gradient(45deg,rgba(255,255,255,.018) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.018) 75%);
  background-position:0 0,0 0,12px 12px;
  background-size:auto,24px 24px,24px 24px;
  cursor:zoom-in;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none
}
.zuvama-lens__viewport[data-zoomed="true"]{cursor:grab}
.zuvama-lens__viewport[data-dragging="true"]{cursor:grabbing}
.zuvama-lens__image{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  transform:translate3d(var(--lens-x,0px),var(--lens-y,0px),0) scale(var(--lens-scale,1));
  transform-origin:center;
  will-change:transform;
  pointer-events:none;
  -webkit-user-drag:none
}
.zuvama-lens-source{cursor:zoom-in}
.zuvama-lens__hint{position:absolute;left:50%;bottom:16px;max-width:calc(100% - 28px);margin:0;padding:7px 11px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(2,8,6,.56);color:rgba(255,255,255,.76);font-size:.7rem;font-weight:650;text-align:center;transform:translateX(-50%);backdrop-filter:blur(8px);pointer-events:none}
.zuvama-lens__viewport[data-zoomed="true"] .zuvama-lens__hint{opacity:.28}

.zuvama-lens__controls{
  display:grid;
  grid-template-columns:auto minmax(150px,1fr) auto auto;
  align-items:center;
  gap:10px;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.045))
}
.zuvama-lens__control{display:grid;min-width:46px;height:46px;place-items:center;padding:0 12px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.06);color:var(--on-brand);font-weight:800;cursor:pointer;touch-action:manipulation}
.zuvama-lens__control:hover{background:rgba(255,255,255,.11)}
.zuvama-lens__control[data-lens-minus]{grid-column:1}
.zuvama-lens__meter{display:flex;min-width:0;align-items:center;gap:10px;grid-column:2}
.zuvama-lens__control[data-lens-plus]{grid-column:3}
.zuvama-lens__control--reset{min-width:72px;font-size:.75rem;grid-column:4}
.zuvama-lens__range{--lens-progress:0%;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;accent-color:var(--brand-aqua)}
.zuvama-lens__range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--brand-aqua) 0 var(--lens-progress),rgba(255,255,255,.18) var(--lens-progress) 100%)}
.zuvama-lens__range::-webkit-slider-thumb{width:20px;height:20px;margin-top:-7px;border:2px solid var(--brand-forest);border-radius:50%;background:var(--brand-aqua);box-shadow:0 0 0 3px rgba(158,216,199,.16);-webkit-appearance:none}
.zuvama-lens__range::-moz-range-track{height:6px;border:0;border-radius:999px;background:rgba(255,255,255,.18)}
.zuvama-lens__range::-moz-range-progress{height:6px;border-radius:999px;background:var(--brand-aqua)}
.zuvama-lens__range::-moz-range-thumb{width:18px;height:18px;border:2px solid var(--brand-forest);border-radius:50%;background:var(--brand-aqua);box-shadow:0 0 0 3px rgba(158,216,199,.16)}
.zuvama-lens__value{min-width:58px;color:var(--brand-aqua);font-variant-numeric:tabular-nums;font-size:.78rem;font-weight:850;text-align:right}
.zuvama-lens__status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.zuvama-lens-page-locked{overflow:hidden}

@media(max-width:720px){
  .zuvama-lens-trigger{min-width:50px;min-height:50px;padding:8px 10px}
  .zuvama-lens-trigger__label{display:none}
  .zuvama-lens-trigger--garment{left:12px;bottom:12px}
  .zuvama-lens-trigger--tryon{top:12px;left:12px}
  .zuvama-lens-trigger--tryon-history{top:10px;right:10px}
  .zuvama-lens-overlay{padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}
  .zuvama-lens{width:100%;height:100%;border-radius:22px}
  .zuvama-lens__header{padding:11px 12px}
  .zuvama-lens__brand-mark{width:40px;height:40px;border-radius:13px}
  .zuvama-lens__title{max-width:58vw;font-size:1rem}
  .zuvama-lens__close{width:48px;height:48px;border-radius:14px}
  .zuvama-lens__hint{bottom:12px;font-size:.66rem}
  .zuvama-lens__controls{grid-template-columns:auto minmax(0,1fr) auto;padding:10px 11px calc(10px + env(safe-area-inset-bottom));gap:8px}
  .zuvama-lens__control{min-width:46px;height:46px;padding-inline:10px}
  .zuvama-lens__control--reset{grid-column:1/-1;width:100%;height:46px}
  .zuvama-lens__meter{min-width:0}
  .zuvama-lens__value{min-width:52px;font-size:.73rem}
}

@media(max-width:390px){
  .zuvama-lens__identity{gap:8px}
  .zuvama-lens__eyebrow{font-size:.61rem}
  .zuvama-lens__title{max-width:52vw;font-size:.92rem}
  .zuvama-lens__controls{gap:6px}
}

@keyframes zuvama-lens-fade-in{from{opacity:0}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .zuvama-lens-overlay:not([hidden]){animation:none}
  .zuvama-lens-trigger,.zuvama-lens__image{transition:none}
  .zuvama-lens-trigger:hover{transform:none}
}