/* Premium VTO score module.
   Remove this stylesheet and switch scorePanel() back to legacyScorePanel()
   to restore the exact pre-module score experience. */
.premium-score-vto .vto-camera{z-index:0}
.premium-score-vto .vto-camera>img.face-photo{position:relative;z-index:0}
.premium-score-vto .tryon-frame{z-index:2}
.premium-score-vto .vto-top{z-index:8}

.premium-vto-bottom{
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  bottom:0;
  padding:0 9px 9px;
}
.premium-score-capsule{
  width:min(68%,218px);
  height:42px;
  margin:0;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:rgba(16,20,21,.82);
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  backdrop-filter:blur(11px);
  -webkit-backdrop-filter:blur(11px);
  font-size:13px;
  line-height:1;
  letter-spacing:-.01em;
  transition:transform .18s ease,opacity .2s ease,background .2s ease;
}
.premium-score-capsule:active{transform:scale(.98)}
.premium-score-capsule:focus-visible{outline:2px solid #63d78b;outline-offset:2px}
.premium-score-capsule strong{flex:0 0 auto;color:#48cf78;font-size:15px;font-weight:850;text-shadow:0 0 10px rgba(72,207,120,.18);white-space:nowrap}
.premium-score-capsule span{font-size:10px;font-weight:760;white-space:nowrap}
.premium-score-capsule i{margin-left:2px;font-size:19px;font-style:normal;font-weight:300;opacity:.82}
.premium-score-summary{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:7px}
.premium-style-tag{
  width:82px;height:42px;padding:0 7px;
  border:1px solid rgba(255,255,255,.11);border-radius:999px;
  background:rgba(27,31,34,.9);color:#f7f7f3;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;
}
.premium-style-tag small{display:block;width:100%;font-size:6px;font-weight:760;line-height:1.1;letter-spacing:.09em;text-transform:uppercase;color:#8f9691;text-align:center}
.premium-style-tag b{display:block;width:100%;font-size:9px;font-weight:820;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.premium-vto-bottom.is-score-hidden .premium-score-summary,
.premium-vto-bottom.is-details-open .premium-score-summary{display:none}
.premium-vto-bottom.is-intro-active .premium-score-summary{
  pointer-events:none;
  animation:premiumCapsuleReveal 1.65s ease both;
}

.premium-vto-actions{
  height:42px;
  margin:0;
  grid-template-columns:1fr 1fr 1.48fr;
  gap:6px;
}
.premium-vto-actions button{
  min-width:0;
  height:42px;
  padding:0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  background:rgba(10,14,15,.9);
  color:#fff;
  font-size:9px;
  font-weight:760;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.premium-vto-actions button svg{width:14px;height:14px;flex:0 0 auto}
.premium-vto-actions button.is-active{
  border-color:#141414;
  background:#141414;
  box-shadow:0 5px 15px rgba(0,0,0,.2);
}
.premium-vto-actions .cart{
  border-color:#141414;
  background:#141414;
}
.premium-vto-actions button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.premium-vto-actions.technical-vto-actions{grid-template-columns:1fr 1.48fr}

.premium-vto-suggestions{
  margin-top:7px;
  padding:7px;
  border:1px solid rgba(20,23,24,.06);
  box-shadow:0 8px 22px rgba(0,0,0,.14);
}
.premium-vto-suggestions .suggestions-head{margin-bottom:4px;align-items:center}
.premium-vto-suggestions .suggestion-reset{
  min-height:22px;
  padding:3px 6px;
  border:1px solid #e5e5e5;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:3px;
  background:#f8f3ee;
  color:#343737;
  font-size:6px;
  font-weight:760;
}
.premium-vto-suggestions .suggestion-reset svg{width:9px;height:9px;stroke-width:1.8}
.premium-vto-suggestions .suggestion-row{gap:5px}
.premium-vto-suggestions .suggestion-shell{position:relative;flex:0 0 64px;min-width:64px}
.premium-vto-suggestions .suggestion{width:64px;min-width:64px;padding:2px}
.premium-vto-suggestions .suggestion img{width:61px;height:49px}
.premium-vto-suggestions .suggestion b{font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.premium-vto-suggestions .suggestion small{display:block;font-size:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.premium-vto-suggestions .suggestion-heart{
  position:absolute;
  top:2px;
  right:1px;
  z-index:2;
  width:19px;
  height:19px;
  padding:0;
  border:1px solid rgba(20,24,24,.09);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.93);
  color:#333;
  box-shadow:0 2px 6px rgba(0,0,0,.09);
  pointer-events:auto!important;
  cursor:pointer;
}
.premium-vto-suggestions .suggestion-heart svg{width:11px;height:11px;stroke-width:1.7}
.premium-vto-suggestions .suggestion-shell.is-saved .suggestion-heart{color:#d63445}
.premium-vto-suggestions .suggestion-shell.is-saved .suggestion-heart svg{fill:#d63445}
.premium-vto-bottom.is-details-open .premium-vto-suggestions{display:none}
.premium-vto-bottom.is-recap-open .premium-score-summary,
.premium-vto-bottom.is-recap-open .premium-score-sheet,
.premium-vto-bottom.is-recap-open .premium-vto-suggestions{display:none}

.premium-score-vto .analysis-recap{
  inset:auto 9px 60px;
  max-height:none;
  padding:13px;
  overflow:visible;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:16px;
  background:linear-gradient(150deg,rgba(31,39,41,.97),rgba(13,18,19,.98));
  box-shadow:0 -9px 30px rgba(0,0,0,.26);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.premium-score-vto .analysis-recap>h2,
.premium-score-vto .analysis-recap>p{grid-column:1/-1}
.premium-score-vto .analysis-recap>h2{margin:0;font-size:16px;line-height:1.15}
.premium-score-vto .analysis-recap>p{margin:1px 0 3px;color:#aeb5b3;font-size:8.5px;line-height:1.3}
.premium-score-vto .recap-item{
  min-width:0;
  min-height:74px;
  padding:8px;
  display:grid;
  grid-template-columns:29px minmax(0,1fr);
  gap:7px;
  align-items:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  background:rgba(255,255,255,.045);
}
.premium-score-vto .recap-icon{
  width:29px;
  height:29px;
  border-radius:9px;
  font-size:15px;
  color:#63d78b;
}
.premium-score-vto .recap-icon svg{width:18px;height:18px;stroke-width:1.55}
.premium-score-vto .recap-item small{display:block;color:#63d78b;font-size:6.5px;font-weight:780;line-height:1.1;letter-spacing:.04em}
.premium-score-vto .recap-item h3{margin:2px 0;font-size:10px;line-height:1.15}
.premium-score-vto .recap-item p{margin:0;color:#bfc6c4;font-size:7.5px;line-height:1.25}

.premium-score-sheet{
  max-height:240px;
  margin:0 0 7px;
  padding:11px 11px 9px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:linear-gradient(150deg,rgba(31,39,41,.97),rgba(13,18,19,.98));
  color:#fff;
  box-shadow:0 -9px 30px rgba(0,0,0,.26);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  animation:premiumSheetIn .24s ease both;
}
.premium-score-sheet-header{
  display:grid;
  grid-template-columns:1fr 28px;
  align-items:start;
  gap:8px;
}
.premium-score-sheet-header strong{display:block;font-size:13px;line-height:1.2}
.premium-score-sheet-header strong em{color:#48cf78;font-style:normal;font-size:16px;text-shadow:0 0 10px rgba(72,207,120,.14)}
.premium-score-sheet-header .premium-score-sheet-kicker{display:block;margin-bottom:2px;color:#8f9691;font-size:6.5px;font-weight:780;line-height:1.1;letter-spacing:.07em;text-transform:uppercase}
.premium-score-sheet-header span{display:block;margin-top:2px;color:#c7cbca;font-size:8px;text-transform:capitalize}
.premium-score-sheet-header .premium-score-sheet-style{
  display:inline-flex;margin-top:4px;padding:3px 7px;
  border:1px solid rgba(72,207,120,.22);border-radius:999px;
  background:rgba(72,207,120,.08);color:#63d78b;
  font-size:7px;font-weight:780;line-height:1;letter-spacing:.02em;
}
.premium-score-sheet-header button,
.premium-score-pagination button{
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.07);
  color:#fff;
}
.premium-score-sheet-header button{width:26px;height:26px}
.premium-score-sheet-header button svg{width:13px;height:13px}
.premium-score-card{
  min-height:92px;
  margin-top:8px;
  padding:10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  display:grid;
  grid-template-columns:43px 1fr;
  align-items:center;
  gap:9px;
  background:rgba(255,255,255,.055);
}
.premium-score-card.has-improvement{min-height:116px}
.premium-score-card-icon{
  width:41px;
  height:41px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(72,207,120,.11);
  color:#efbd91;
}
.premium-score-card-icon svg{width:24px;height:24px;stroke-width:1.55}
.premium-score-card-copy{min-width:0}
.premium-score-card-copy small{display:block;color:#63d78b;font-size:9px;font-weight:780;text-transform:uppercase;letter-spacing:.05em;line-height:1.15}
.premium-score-card-copy b{display:block;margin:3px 0;font-size:12px;line-height:1.18}
.premium-score-card-copy p{
  margin:0;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  color:#d2d5d4;
  font-size:9.5px;
  line-height:1.3;
}
.premium-score-card-copy .premium-score-improvement{
  margin-top:5px;
  -webkit-line-clamp:2;
  color:#cbd1cf;
  font-size:8.8px;
}
.premium-score-improvement em{
  margin-right:3px;
  color:#63d78b;
  font-style:normal;
  font-weight:800;
}
.premium-score-pagination{
  position:relative;
  z-index:2;
  height:28px;
  margin-top:5px;
  display:grid;
  grid-template-columns:28px 1fr 28px;
  align-items:center;
  text-align:center;
}
.premium-score-pagination button{width:25px;height:25px;position:relative;z-index:3;touch-action:manipulation}
.premium-score-pagination button:last-child{justify-self:end}
.premium-score-pagination button svg{width:13px;height:13px}
.premium-score-pagination button:disabled{opacity:.25;cursor:default}
.premium-score-pagination span{font-size:8px;font-weight:750;color:#c9cccb}

.technical-fit-vto .premium-score-capsule{width:min(88%,282px)}
.technical-fit-vto .technical-score-capsule span{font-size:9px}
.technical-fit-vto .technical-data-tag{color:#63d78b}
.technical-fit-vto .technical-score-sheet .premium-score-card-icon{color:#63d78b}
.technical-fit-vto .technical-score-sheet .premium-score-pagination span{color:#63d78b}
.technical-fit-note{
  min-height:34px;
  margin-top:7px;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:10px;
  display:flex;
  align-items:center;
  gap:7px;
  background:rgba(12,16,17,.88);
  color:#c8cecc;
  font-size:7.5px;
  line-height:1.3;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.technical-fit-note svg{width:13px;height:13px;flex:0 0 auto;color:#63d78b}
.technical-fit-vto .premium-vto-bottom.is-details-open .technical-fit-note{display:none}

/* Explicit, replayable explanation control. */
.why-match-toggle{
  position:absolute;right:10px;top:-29px;width:116px;height:24px;margin:0;padding:0 8px;border:1px solid rgba(255,255,255,.18);border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:5px;background:rgba(18,23,24,.72);color:#f7f7f4;font-size:7.5px;font-weight:760;
}
.why-match-toggle svg{width:11px;height:11px}.why-match-toggle.is-active{border-color:rgba(99,215,139,.45);color:#75dc98}
.premium-score-sheet:not(.technical-score-sheet) .premium-score-sheet-header>div>*{display:none}
.premium-score-sheet:not(.technical-score-sheet) .premium-score-sheet-header>div::before{content:"Why this frame works";display:block;color:#ffffff;font-size:14px;font-weight:820}
.premium-score-sheet:not(.technical-score-sheet) .premium-score-sheet-header>div::after{
  content:"Facial harmony and style criteria";
  display:block;
  margin-top:3px;
  color:#b8bfbd;
  font-size:11.5px;
  line-height:1.3;
}

/* The closed suggestion strip is now a compact drawer trigger. */
.premium-vto-suggestions{cursor:pointer;padding:8px 10px}
.premium-vto-suggestions .suggestion-row{display:flex}
.premium-vto-suggestions .suggestion-reset{display:flex}
.premium-vto-suggestions .suggestions-head{margin-bottom:4px;min-height:24px}
.premium-vto-suggestions .suggestions-head::after{content:"⌃";margin-left:auto;font-size:15px}

/* Large bottom sheet for comparing frames. */
.suggestions-sheet-backdrop{position:absolute;inset:0;z-index:18;background:rgba(5,7,8,.38);opacity:0;pointer-events:none;transition:opacity .24s ease}
.suggestions-sheet-backdrop.is-open{opacity:1;pointer-events:auto}
.suggestions-sheet{
  position:absolute;z-index:19;left:0;right:0;bottom:0;height:76%;padding:9px 13px 18px;border-radius:22px 22px 0 0;
  max-height:calc(100% - 12px);background:#ffffff;color:#151718;box-shadow:0 -18px 42px rgba(0,0,0,.28);transform:translateY(102%);transition:transform .3s cubic-bezier(.22,.78,.24,1);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none;
}
.suggestions-sheet::-webkit-scrollbar{display:none;width:0;height:0}
.suggestions-sheet.is-open{transform:translateY(0)}
.suggestions-sheet-header>button{cursor:pointer;pointer-events:auto;position:relative;z-index:2}
.suggestions-sheet-handle{width:38px;height:4px;margin:0 auto 10px;border-radius:99px;background:#d4d4d4}
.suggestions-sheet-header{display:flex;align-items:center;justify-content:space-between}.suggestions-sheet-header small{font-size:7px;color:#7a7a7a;text-transform:uppercase;letter-spacing:.06em}.suggestions-sheet-header h2{margin:2px 0 0;font-size:19px}.suggestions-sheet-header>button{width:31px;height:31px;border:0;border-radius:50%;display:grid;place-items:center;background:#f0f0f0}.suggestions-sheet-header svg{width:15px;height:15px}
.sheet-reset{margin:9px 0 11px;min-height:27px;padding:0 9px;border:1px solid #e5e5e5;border-radius:999px;display:flex;align-items:center;gap:5px;background:#fff;color:#4b4744;font-size:8px}.sheet-reset svg{width:12px;height:12px}
.suggestions-sheet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.suggestions-sheet-grid .suggestion-shell{position:relative;min-width:0;border:1px solid #e5e5e5;border-radius:14px;background:#fff;overflow:hidden}
.suggestions-sheet-grid .suggestion{width:100%;min-width:0;padding:7px;border:0;background:#fff;text-align:left}
.suggestions-sheet-grid .suggestion img{width:100%;height:90px;object-fit:contain}
.suggestions-sheet-grid .suggestion b{display:block;font-size:10px}.suggestions-sheet-grid .suggestion small{display:block;font-size:7.5px;color:#777}
.suggestions-sheet-grid .suggestion-heart{position:absolute;right:6px;top:6px;width:25px;height:25px;border:1px solid #e5e5e5;border-radius:50%;display:grid;place-items:center;background:#fff;z-index:30;pointer-events:auto;cursor:pointer}.suggestions-sheet-grid .suggestion-heart svg{width:13px;height:13px;pointer-events:none}
.suggestion-group{margin:0 14px;padding:13px 0 15px;border-top:1px solid #e5e5e5}
.suggestion-group:first-of-type{border-top:0;padding-top:3px}
.suggestion-group-heading{min-height:31px;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.suggestion-group-heading>span{display:flex;flex-direction:column;align-items:flex-start;gap:2px;white-space:nowrap}
.suggestion-group-heading b{font-size:12px;line-height:1.1}
.suggestion-group-heading small{color:#7a7a7a;font-size:8px;line-height:1.1}
.suggestion-group-heading i{height:1px;flex:1;background:#e5e5e5}
.suggestion-group-saved{padding-bottom:4px}
.suggestion-group-saved .suggestion-group-heading b{color:#c93d4d}
.suggestions-empty-state{
  margin:14px;
  padding:18px 16px;
  border:1px solid #e5e5e5;
  border-radius:18px;
  background:#fafafa;
  color:#171b1b;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}
.suggestions-empty-state svg{width:24px;height:24px;color:#141414}
.suggestions-empty-state b{font-size:15px;line-height:1.15}
.suggestions-empty-state span{font-size:12px;line-height:1.35;color:#6a6a6a}

/* Face-analysis results become a horizontal, snap-scrolling carousel. */
.premium-score-vto .analysis-recap{display:block;overflow:hidden;padding:13px}
.premium-score-vto .analysis-recap>h2,.premium-score-vto .analysis-recap>p{display:block}
.premium-score-vto .recap-carousel{display:flex;gap:8px;width:100%;margin-top:9px;overflow-x:scroll;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.premium-score-vto .recap-carousel::-webkit-scrollbar{display:none}
.premium-score-vto .recap-carousel .recap-item{flex:0 0 78%!important;width:78%;min-width:78%;min-height:116px;scroll-snap-align:start;padding:13px;grid-template-columns:40px 1fr}
.premium-score-vto .recap-carousel .recap-icon{width:40px;height:40px}.premium-score-vto .recap-carousel .recap-icon svg{width:23px;height:23px}
.premium-score-vto .recap-carousel .recap-item small{font-size:8px}.premium-score-vto .recap-carousel .recap-item h3{font-size:13px}.premium-score-vto .recap-carousel .recap-item p{font-size:9px}
.recap-swipe-hint{margin-top:8px;display:flex;align-items:center;justify-content:center;gap:5px;color:#aeb5b3;font-size:7.5px}.recap-swipe-hint svg{width:12px;height:12px}

.premium-score-intro{
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  animation:premiumIntroFade 4.6s ease both;
}
.premium-score-landmark-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.78;
  animation:premiumLandmarks 4.6s ease both;
}
.premium-score-scan-line{
  position:absolute;
  left:21%;
  top:12%;
  width:58%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(218,242,243,.88),transparent);
  box-shadow:0 0 7px rgba(166,226,230,.45);
  animation:premiumScanLine 1.6s cubic-bezier(.35,.05,.25,1) .12s both;
}
.premium-score-annotation{
  position:absolute;
  width:max-content;
  max-width:112px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:rgba(15,20,21,.72);
  color:#f7f8f7;
  box-shadow:0 5px 16px rgba(0,0,0,.16);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  opacity:0;
  transform:translateY(4px);
  animation:premiumAnnotation 3.65s ease .52s both;
}
.premium-score-annotation strong{display:block;font-size:7px;font-weight:820;line-height:1.15;white-space:nowrap}
.premium-score-annotation small{display:block;margin-top:2px;color:#c8d3d1;font-size:5.5px;font-weight:650;line-height:1.2;white-space:nowrap}
.premium-score-annotation.annotation-shape{left:5%;top:27%}
.premium-score-annotation.annotation-brows{right:5%;top:34%;animation-delay:.7s}
.premium-score-annotation.annotation-style{left:6%;top:48%;animation-delay:.88s}
.premium-score-annotation.annotation-tone{right:5%;top:56%;animation-delay:1.04s}

@keyframes premiumScanLine{
  0%{opacity:0;transform:translateY(0)}
  12%{opacity:1}
  82%{opacity:.85}
  100%{opacity:0;transform:translateY(365px)}
}
@keyframes premiumLandmarks{0%,3%{opacity:0}10%,58%{opacity:.78}76%,100%{opacity:0}}
@keyframes premiumAnnotation{
  0%{opacity:0;transform:translateY(4px)}
  11%,86%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-2px)}
}
@keyframes premiumIntroFade{0%,91%{opacity:1}100%{opacity:0}}
@keyframes premiumCapsuleReveal{0%,90%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:none}}
@keyframes premiumSheetIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .premium-score-intro{display:none!important}
  .premium-vto-bottom.is-intro-active .premium-score-summary,
  .premium-score-sheet{animation:none!important}
  .premium-score-capsule,.premium-vto-actions button{transition:none!important}
}
.vto-layout-v2 .premium-score-summary { grid-template-columns: 1fr; }
.vto-layout-v2 .premium-score-capsule { width: 100%; }
.vto-layout-v2 .premium-vto-actions {
  display: grid;
  grid-template-columns: .8fr 1.35fr 1fr;
  gap: 6px;
}
.vto-layout-v2 .premium-vto-actions.cluster-vto-actions {
  grid-template-columns: .72fr 1.28fr 1fr;
}
.vto-layout-v2 .premium-vto-actions > button,
.vto-action-style,
.vto-action-cluster {
  min-height: 43px;
  border-radius: 13px;
}
.vto-action-style,
.vto-action-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #16191b;
  color: #fff;
  min-width: 0;
  overflow: hidden;
  text-align: center;
}
.vto-action-style small { font-size: 7px; letter-spacing: .12em; text-transform: uppercase; opacity: .68; }
.vto-action-style b { font-size: 11px; }
.vto-action-cluster small { font-size: 7px; letter-spacing: .12em; text-transform: uppercase; opacity: .68; }
/* Autorise 2 lignes + texte plus petit pour que les libelles longs
   ("Everyday Safe Choice") s'affichent en ENTIER sans troncature. */
.vto-action-cluster b {
  max-width: 100%;
  font-size: 9.5px;
  line-height: 1.08;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.vto-product-link {
  white-space: nowrap;
}
.cluster-score-sheet .cluster-fit-note{
  display: block;
  min-height: 0;
  padding: 12px 13px;
}
.cluster-score-sheet .cluster-fit-note .cluster-fit-text{
  margin: 0;
  color: #d7dcda;
  font-size: 11px;
  line-height: 1.42;
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}
.cluster-score-sheet .cluster-fit-note{
  min-height: 0;
}
.cluster-score-sheet .cluster-fit-note .premium-score-card-copy p{
  font-size: 12px;
  line-height: 1.38;
}
/* Le modal "Why this frame works" (cluster) tient en un seul bloc : pas de
   hauteur bornee ni de scroll -> tout le contenu visible d'un trait. */
.premium-score-sheet.cluster-score-sheet,
.vto-layout-v2 .premium-score-sheet.cluster-score-sheet{
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}
/* Option 2 : 2-3 mini-points distincts (Shape / Colour / Style). */
.cluster-score-sheet .cluster-fit-note .frame-fit-points{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.cluster-score-sheet .cluster-fit-note .frame-fit-points li{
  display: block;
}
.cluster-score-sheet .cluster-fit-note .frame-fit-points li b{
  display: block;
  color: #f4f4f4;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1px;
}
.cluster-score-sheet .cluster-fit-note .frame-fit-points li span{
  display: block;
  color: #d7dcda;
  font-size: 11.5px;
  line-height: 1.35;
}
/* Variante COMPACTE en puces : 3 lignes breves. Le label et le texte restent
   sur la meme ligne, avec une vraie puce et un espacement resserre. */
.cluster-score-sheet .cluster-fit-note .frame-fit-points-bullets{
  gap: 5px;
  padding-left: 15px;
}
.cluster-score-sheet .cluster-fit-note .frame-fit-points-bullets li{
  display: list-item;
  list-style: disc;
  color: #d7dcda;
  font-size: 11.5px;
  line-height: 1.3;
}
.cluster-score-sheet .cluster-fit-note .frame-fit-points-bullets li b{
  display: inline;
  color: #f4f4f4;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}
.cluster-score-sheet .cluster-fit-note .frame-fit-points-bullets li span{
  display: inline;
  font-size: 11.5px;
}
.suggestions-trigger {
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: #ffffff;
  color: #111;
  text-align: left;
}
.suggestions-trigger svg { font-size: 17px; }
.suggestions-sheet-tools { display: flex; gap: 8px; margin: 9px 14px 12px; }
.suggestions-sheet-tools button {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid #e5e5e5;
  border-radius: 999px;
  background: #fff;
}
.suggestion-sheet-filters {
  margin: 0 14px 12px;
  padding: 8px;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  background: #f5f5f5;
  box-shadow: 0 8px 22px rgba(45,35,27,.05);
}
.visual-filter-row {
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #e5e5e5;
}
.visual-filter-kind {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #fff;
  color: #5a5a5a;
  box-shadow: inset 0 0 0 1px #e5e5e5;
}
.visual-filter-kind svg { width: 15px; height: 15px; stroke-width: 1.55; }
.visual-filter-options {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 5px;
}
.visual-filter-option {
  min-width: 0;
  min-height: 44px;
  padding: 4px 2px 3px;
  border: 1px solid transparent;
  border-radius: 11px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  background: transparent;
  color: #746b64;
}
.visual-filter-option small {
  max-width: 100%;
  overflow: hidden;
  font-size: 6.6px;
  font-weight: 720;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visual-filter-option.active {
  border-color: #141414;
  background: #fff;
  color: #201c19;
  box-shadow: 0 3px 9px rgba(70,52,36,.08);
}
.shape-preview {
  width: 31px;
  height: 16px;
  position: relative;
  display: block;
}
.shape-preview i {
  position: absolute;
  top: 4px;
  width: 13px;
  height: 9px;
  border: 1.4px solid currentColor;
  border-radius: 4px 4px 5px 5px;
}
.shape-preview i:first-child { left: 1px; }
.shape-preview i:nth-child(2) { right: 1px; }
.shape-preview em {
  position: absolute;
  left: 13px;
  top: 7px;
  width: 5px;
  height: 1px;
  background: currentColor;
}
.shape-aviator i { height: 11px; border-radius: 7px 7px 9px 9px; transform:rotate(2deg); }
.shape-aviator i:nth-child(2) { transform:rotate(-2deg); }
.shape-pantos i { width: 12px; height: 12px; border-radius: 50%; }
.shape-rectangular i { height: 8px; border-radius: 2px; }
.colour-preview,
.material-preview {
  width: 23px;
  height: 23px;
  display: block;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #d4d4d4, inset 0 1px 2px rgba(255,255,255,.55);
}
.colour-silver { background: linear-gradient(135deg,#f8f8f6 5%,#9b9d9d 48%,#ececea 82%); }
.colour-black { background: #18191a; }
.colour-tortoise { background: radial-gradient(circle at 30% 30%,#d28a2f 0 14%,transparent 15%),radial-gradient(circle at 68% 70%,#7b3517 0 18%,transparent 19%),#b96b2d; }
.material-metal { background: linear-gradient(135deg,#f6f5f1,#8e9293 48%,#f7f6f2); }
.material-acetate { background: linear-gradient(135deg,#c07a39,#4d2617 55%,#d59a52); }
.material-mixed { background: linear-gradient(135deg,#a7aaab 0 48%,#b46b34 49% 100%); }
.suggestion-sheet-filters .apply-filters {
  min-height: 38px;
  margin-top: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 12px;
  font-size: 10px;
}
.suggestion-sheet-filters .apply-filters svg { width: 14px; height: 14px; }
.premium-score-intro.is-pinned { animation: none !important; opacity: 1 !important; pointer-events: none; }
.premium-score-intro.is-pinned canvas,
.premium-score-intro.is-pinned .premium-score-scan-line { display: none; }
.premium-score-intro.is-pinned .premium-score-annotation {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Focused face-analysis mode: the recap replaces every lower VTO control. */
.premium-score-vto.is-recap-open .premium-vto-bottom,
.premium-score-vto.is-recap-open .premium-score-intro,
.premium-score-vto.is-recap-open .suggestions-sheet,
.premium-score-vto.is-recap-open .suggestions-sheet-backdrop {
  display: none !important;
}
.premium-score-vto .vto-top button.is-active {
  background: #17201d;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(99,215,139,.42);
}
.premium-score-vto.is-recap-open .analysis-recap {
  z-index: 12;
  left: 12px;
  right: 12px;
  bottom: 24px;
  padding: 16px;
}
.premium-score-vto.is-recap-open .recap-carousel {
  overflow: hidden;
  margin-top: 12px;
}
.premium-score-vto.is-recap-open .recap-carousel .recap-item {
  flex: 0 0 100% !important;
  width: 100%;
  min-width: 100%;
  min-height: 128px;
  padding: 15px;
  grid-template-columns: 44px 1fr;
}
.recap-pagination {
  height: 34px;
  margin-top: 9px;
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  text-align: center;
}
.recap-pagination button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.07);
  color: #fff;
}
.recap-pagination button:last-child { justify-self: end; }
.recap-pagination button:disabled { opacity: .25; cursor: default; }
.recap-pagination button svg { width: 15px; height: 15px; }
.recap-pagination span { color: #d2d6d4; font-size: 9px; font-weight: 780; }

/* Keep the closed recommendations modal fully outside the visible UI. */
.suggestions-sheet,
.suggestions-sheet-backdrop {
  visibility: hidden;
  pointer-events: none;
}
.suggestions-sheet {
  opacity: 0;
  transform: translateY(calc(100% + 28px));
}
.suggestions-sheet.is-open,
.suggestions-sheet-backdrop.is-open {
  visibility: visible;
  pointer-events: auto;
}
.suggestions-sheet.is-open {
  opacity: 1;
  transform: translateY(0);
}

/* Stable, non-overlapping VTO controls. */
.vto-layout-v2 .premium-vto-actions {
  grid-template-columns: .9fr 1.45fr .95fr;
  gap: 7px;
}
.vto-layout-v2 .premium-vto-actions > button {
  min-width: 0;
  padding-inline: 5px;
  overflow: hidden;
}
.vto-layout-v2 .premium-vto-actions > button span {
  min-width: 0;
  white-space: nowrap;
  font-size: 8.5px;
}
.vto-action-style,
.vto-action-cluster { min-width: 0; overflow: hidden; }
.suggestions-trigger b { font-size: 11px; }

.vto-layout-v2.is-score-hidden .premium-vto-actions{
  grid-template-columns:1fr;
}
.vto-layout-v2.is-score-hidden .premium-vto-actions.cluster-vto-actions{
  grid-template-columns:.78fr 1.32fr .78fr;
}
.vto-layout-v2.is-score-hidden .vto-fitting-criteria{
  display:none;
}

/* V2 explanation is an overlay above the controls: opening it must never
   reflow or move the Show / Selected Style / Product page buttons. */
/* "Why this frame?" devient un BOTTOM-SHEET (coherent avec le geste Insta
   "tirer pour en savoir plus"). Ancre en bas, pleine largeur, coins arrondis,
   poignee en haut. Monte au-dessus du rail et des controles. */
/* "Why this frame?" : bottom-sheet qui monte, mais avec le MEME rendu SOMBRE
   et lisible que l'ancien modal Analysis (fond degrade sombre, texte clair). */
.vto-layout-v2 .premium-score-sheet{
  position:fixed;
  left:12px; right:12px; bottom:16px;
  width:auto;
  margin:0;
  max-height:66vh;
  min-height:0;
  padding:10px 16px 18px;
  border-radius:22px;
  border:0;
  background:linear-gradient(150deg,rgba(31,39,41,.99),rgba(13,18,19,1));
  color:#fff;
  box-shadow:0 18px 46px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  overflow-y:auto;
  overflow-x:hidden;
  box-sizing:border-box;
  z-index:40;
  animation:premiumSheetIn .26s ease both;
}
/* Poignee du bottom-sheet (barre claire centree sur fond sombre). */
.vto-layout-v2 .premium-score-sheet::before{
  content:"";
  display:block;
  width:38px; height:4px;
  margin:2px auto 12px;
  border-radius:99px;
  background:rgba(255,255,255,.4);
}
/* Textes du sheet lisibles sur fond sombre (labels + corps). */
.vto-layout-v2 .premium-score-sheet .cluster-fit-note .frame-fit-points li b,
.vto-layout-v2 .premium-score-sheet .frame-fit-points-bullets li b{ color:#ffffff!important; }
.vto-layout-v2 .premium-score-sheet .cluster-fit-note .frame-fit-points li span,
.vto-layout-v2 .premium-score-sheet .frame-fit-points-bullets li span,
.vto-layout-v2 .premium-score-sheet .frame-fit-points-bullets li{ color:#d7dcda!important; }
.vto-layout-v2 .premium-vto-actions{
  position:relative;
  z-index:2;
}
.vto-layout-v2.is-score-hidden .premium-vto-actions,
.vto-layout-v2.is-score-hidden .premium-vto-actions.cluster-vto-actions{
  grid-template-columns:.72fr 1.28fr 1fr;
}

/* Saved frames use an unmistakable red filled heart. */
.premium-vto-suggestions .suggestion-shell.is-saved .suggestion-heart,
.suggestions-sheet-grid .suggestion-shell.is-saved .suggestion-heart {
  border-color: rgba(214,52,69,.28);
  background: #fff1f2;
  color: #d63445;
}
.premium-vto-suggestions .suggestion-shell.is-saved .suggestion-heart svg,
.suggestions-sheet-grid .suggestion-shell.is-saved .suggestion-heart svg {
  fill: #d63445;
  stroke: #d63445;
}

/* Mobile legibility: one consistent VTO type scale across score details,
   face-analysis results, controls and recommendation cards. */
.vto-layout-v2 .premium-score-sheet:not(.technical-score-sheet)::before{
  font-size:16px;
  line-height:1.15;
}
.vto-layout-v2 .premium-score-sheet:not(.technical-score-sheet)::after{
  font-size:11px;
  line-height:1.25;
}
.vto-layout-v2 .premium-score-card-copy small{font-size:10.5px}
.vto-layout-v2 .premium-score-card-copy b{font-size:14px}
.vto-layout-v2 .premium-score-card-copy p{font-size:11.5px;line-height:1.34}
.vto-layout-v2 .premium-score-card-copy .premium-score-improvement{font-size:10.5px}
.vto-layout-v2 .premium-score-pagination span{font-size:11px}
.vto-layout-v2 .premium-vto-actions>button span{font-size:11px}
.vto-layout-v2 .vto-action-style small{font-size:9.5px}
.vto-layout-v2 .vto-action-style b{font-size:12px}
.vto-layout-v2 .vto-action-cluster small{font-size:9.5px}
.vto-layout-v2 .vto-action-cluster b{font-size:10px;line-height:1.08;white-space:normal}
.vto-layout-v2 .suggestions-trigger b{font-size:13px}
.premium-score-vto .analysis-recap>h2{font-size:18px;line-height:1.15}
.premium-score-vto .analysis-recap>p{font-size:11px;line-height:1.3}
.premium-score-vto .recap-carousel .recap-item small{font-size:10px}
.premium-score-vto .recap-carousel .recap-item h3{font-size:14px}
.premium-score-vto .recap-carousel .recap-item p{font-size:11.5px;line-height:1.35}
.premium-score-vto .recap-pagination span{font-size:11px}
.suggestions-sheet-grid .suggestion b{font-size:12px;line-height:1.15}
.suggestions-sheet-grid .suggestion small{font-size:10px;line-height:1.2}
.suggestion-group-heading b{font-size:14px}
.suggestion-group-heading small{font-size:10px}

/* The face-analysis recap remains readable without covering most of the face. */
.premium-score-vto.is-recap-open .analysis-recap{
  left:18px;
  right:18px;
  bottom:28px;
  padding:13px 14px 12px;
  border-radius:18px;
}
.premium-score-vto.is-recap-open .analysis-recap>h2{
  font-size:17px;
}
.premium-score-vto.is-recap-open .analysis-recap>p{
  margin:2px 0 0;
  font-size:10.5px;
  line-height:1.25;
}
.premium-score-vto.is-recap-open .recap-carousel{
  margin-top:9px;
}
.premium-score-vto.is-recap-open .recap-carousel .recap-item{
  min-height:100px;
  padding:10px 11px;
  grid-template-columns:38px minmax(0,1fr);
  gap:10px;
}
.premium-score-vto.is-recap-open .recap-carousel .recap-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  font-size:20px;
}
.premium-score-vto.is-recap-open .recap-carousel .recap-item small{
  font-size:9px;
}
.premium-score-vto.is-recap-open .recap-carousel .recap-item h3{
  margin:2px 0;
  font-size:13.5px;
  line-height:1.15;
}
.premium-score-vto.is-recap-open .recap-carousel .recap-item p{
  font-size:10.5px;
  line-height:1.28;
}
.premium-score-vto.is-recap-open .recap-pagination{
  height:30px;
  margin-top:7px;
}
.premium-score-vto.is-recap-open .recap-pagination button{
  width:30px;
  height:30px;
}

/* Use the same optical icon system as the rest of the prototype. */
.premium-score-vto .vto-top button{
  padding:0;
  display:grid;
  place-items:center;
  line-height:1;
}
.premium-score-vto .vto-top button svg{
  display:block;
  width:22px;
  height:22px;
  stroke-width:1.65;
}
.premium-score-vto .vto-top button[data-action="toggle-recap"] svg{
  width:21px;
  height:21px;
  stroke-width:1.5;
}

/* VTO controls: criteria in the header, score in the lower action rail. */
.premium-score-vto .vto-top{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 46px;
  align-items:center;
  gap:10px;
}
.premium-score-vto .vto-top > button:first-child{
  justify-self:start;
}
.premium-score-vto .vto-top > button:last-child{
  justify-self:end;
}
.premium-score-vto .vto-top button.vto-top-fitting-criteria{
  justify-self:center;
  width:auto;
  min-width:0;
  height:32px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:rgba(20,24,25,.72);
  color:#fff;
  box-shadow:0 5px 16px rgba(0,0,0,.14);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:10px;
  font-weight:760;
  white-space:nowrap;
}
.premium-score-vto .vto-top button.vto-top-fitting-criteria svg{
  width:14px;
  height:14px;
  stroke-width:1.6;
}
.premium-score-vto .vto-top button.vto-top-fitting-criteria.is-active{
  background:#17201d;
  box-shadow:0 0 0 2px rgba(99,215,139,.42);
}
.premium-score-vto .vto-top-spacer{
  display:block;
}
.vto-layout-v2 .premium-vto-actions{
  grid-template-columns:.68fr 1.85fr .82fr;
}
.vto-layout-v2 .premium-vto-actions.cluster-vto-actions{
  grid-template-columns:.72fr 1.28fr 1fr;
}
.vto-layout-v2 .premium-vto-actions .vto-action-score{
  width:100%;
  min-width:0;
  height:43px;
  margin:0;
  padding:0 10px;
  border-radius:13px;
}
.vto-layout-v2 .premium-vto-actions .vto-action-score strong{
  font-size:15px;
}
.vto-layout-v2 .premium-vto-actions .vto-action-score span{
  font-size:11px;
}
.vto-layout-v2 .premium-vto-actions .vto-action-score i{
  font-size:19px;
}
.premium-score-vto.is-recap-open .vto-top-fitting-criteria{
  visibility:hidden;
  pointer-events:none;
}
.vto-layout-v2.is-score-hidden .vto-action-score{
  display:none;
}

/* =========================================================================
   VTO — Galerie d'images swipeable (essayage / front / 3-4 / apercu 3D)
   ========================================================================= */
/* La galerie occupe toute la zone camera (plein ecran). */
.premium-score-vto .vto-gallery{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  cursor:grab;
}
.premium-score-vto .vto-gallery:active{cursor:grabbing}
/* Carrousel pilote en JS via transform:translateX (aucun scroll natif ->
   aucun conflit, click-and-drag fiable dans les 2 sens, insensible au zoom). */
.premium-score-vto .vto-gallery-track{
  display:flex;
  width:100%;
  height:100%;
  will-change:transform;
  touch-action:pan-y;
}
/* Empeche le drag natif des images (qui volait le geste de swipe souris). */
.premium-score-vto .vto-gallery img{user-select:none;-webkit-user-drag:none}
.premium-score-vto .vto-slide{
  position:relative;
  flex:0 0 100%;
  width:100%;
  height:100%;
  overflow:hidden;
}
/* Slide essayage : la camera (selfie + monture) reste dans sa slide. */
.premium-score-vto .vto-slide-tryon .vto-camera{position:absolute;inset:0}
/* Slides packshot : fond clair, image centree en "contain". */
.premium-score-vto .vto-slide-packshot{
  background:radial-gradient(120% 100% at 50% 30%,#fafafa 0%,#ececec 100%);
}
.premium-score-vto .vto-packshot-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:54px 26px 128px;
  box-sizing:border-box;
}
/* Petit tag en haut a gauche indiquant la vue courante. */
.premium-score-vto .vto-slide-tag{
  position:absolute;
  left:14px;top:64px;
  z-index:4;
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(16,20,21,.62);
  color:#fff;font-size:10px;font-weight:700;letter-spacing:.02em;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.premium-score-vto .vto-slide-tag svg{width:13px;height:13px}
/* Slide 3D : carte placeholder explicite (pas d'asset 3D dans le proto). */
.premium-score-vto .vto-slide-3d{
  background:linear-gradient(160deg,#20262b 0%,#2f373d 55%,#3b444b 100%);
  display:flex;align-items:center;justify-content:center;
  padding:60px 22px 128px;
}
.premium-score-vto .vto-3d-card{
  width:100%;max-width:280px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
  color:#f4f1ec;
}
.premium-score-vto .vto-3d-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#f4f4f4;
}
.premium-score-vto .vto-3d-badge svg{width:14px;height:14px}
.premium-score-vto .vto-3d-stage{
  position:relative;
  width:180px;height:180px;margin:4px 0 2px;
  display:grid;place-items:center;
  border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px dashed rgba(255,255,255,.22);
}
/* Animations 3D en pause tant que la slide 3D n'est pas la slide active. */
.premium-score-vto .vto-3d-ghost,
.premium-score-vto .vto-3d-rotate svg{animation-play-state:paused!important}
.premium-score-vto .vto-3d-live .vto-3d-ghost,
.premium-score-vto .vto-3d-live .vto-3d-rotate svg{animation-play-state:running!important}
.premium-score-vto .vto-3d-ghost{
  width:76%;height:76%;object-fit:contain;
  opacity:.5;filter:grayscale(.2) brightness(1.15);
  animation:vto3dSway 3.4s ease-in-out infinite;
}
.premium-score-vto .vto-3d-rotate{
  position:absolute;right:12px;bottom:12px;
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
}
.premium-score-vto .vto-3d-rotate svg{width:18px;height:18px;animation:vto3dSpin 3.2s linear infinite}
.premium-score-vto .vto-3d-card b{font-size:14px;font-weight:800}
.premium-score-vto .vto-3d-card small{font-size:11px;line-height:1.35;color:#c3cac9;max-width:240px}
@keyframes vto3dSway{0%,100%{transform:rotateY(-8deg)}50%{transform:rotateY(8deg)}}
@keyframes vto3dSpin{to{transform:rotate(360deg)}}
/* Pastilles de pagination de la galerie VTO. */
.premium-score-vto .vto-gallery-dots{
  position:absolute;
  left:0;right:0;
  top:30px;
  z-index:9;
  display:flex;align-items:center;justify-content:center;gap:7px;
  pointer-events:auto;
}
/* Pagination du carousel = 4 TRAITS horizontaux facon story Insta (remplace
   les points). Une barre par vue : On you / Front / 3-4 / Details.
   Rangee CENTREE (largeur bornee, independante de la croix) + gris LEGER,
   avec une legere ombre pour rester visible sur les slides a fond blanc. */
.premium-score-vto .vto-gallery-dots{
  left:14px; right:14px;
  width:auto;
  margin:0;
  gap:4px;
}
.premium-score-vto .vto-gallery-dots i{
  flex:1 1 0;
  width:auto; height:3px;
  border-radius:99px;
  /* Gris leger, visible aussi bien sur fond clair que fonce. */
  background:rgba(150,150,150,.6);
  box-shadow:0 1px 2px rgba(0,0,0,.14);
  cursor:pointer;transition:background .2s ease;
  transform:none;
}
.premium-score-vto .vto-gallery-dots i.active{
  background:rgba(90,90,90,.9);
  box-shadow:0 1px 2px rgba(0,0,0,.2);
  transform:none;
}

/* =========================================================================
   VTO — Rail de vignettes rondes (Top 5 du cluster) sous la barre d'actions
   ========================================================================= */
.vto-layout-v2 .vto-frame-rail{
  margin-top:8px;
  position:relative;
}
/* Ombrage a droite du rail retire : inutile avec un petit jeu de montures. */
.vto-layout-v2 .vto-frame-rail-track{
  display:flex;
  gap:9px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:8px 30px 8px 12px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  cursor:grab;
}
.vto-layout-v2 .vto-frame-rail-track:active{cursor:grabbing}
.vto-layout-v2 .vto-frame-rail-track::-webkit-scrollbar{display:none;width:0;height:0}
.vto-layout-v2 .vto-rail-thumb{
  flex:0 0 auto;
  padding:0;border:0;background:transparent;
  cursor:pointer;
}
.vto-layout-v2 .vto-rail-thumb-img{
  display:grid;place-items:center;
  width:62px;height:62px;
  border-radius:50%;
  background:#eeeeee;
  border:2px solid rgba(255,255,255,.6);
  overflow:hidden;
  transition:border-color .2s ease,opacity .2s ease;
}
.vto-layout-v2 .vto-rail-thumb-img img{
  width:82%;height:82%;object-fit:contain;
  /* Empeche le drag natif de l'image (clic maintenu + mouvement) qui, dans le
     cadre telephone zoome, declenchait des reflows/repaints en boucle = gel.
     Meme protection que les cartes swipe et la galerie VTO. */
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  -webkit-user-select:none;
}
.vto-layout-v2 .vto-rail-thumb.is-active .vto-rail-thumb-img{
  border-color:#ffffff;
  border-width:2.5px;
  box-shadow:0 0 0 2px rgba(255,255,255,.55);
}
.vto-layout-v2 .vto-rail-thumb:active .vto-rail-thumb-img{opacity:.85}

/* =========================================================================
   VTO — Pastille cluster cliquable (cycle) : plus de libelle "Selected Style"
   ========================================================================= */
.vto-layout-v2 .vto-cluster-select{position:relative;display:flex;min-width:0}
.vto-layout-v2 .vto-action-cluster.is-cyclable{
  width:100%;
  flex-direction:row;
  gap:5px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
}
.vto-layout-v2 .vto-action-cluster.is-cyclable b{
  font-size:11px;
  -webkit-line-clamp:2;
}
.vto-layout-v2 .vto-cluster-cycle{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:15px;height:15px;
  opacity:.75;
}
.vto-layout-v2 .vto-cluster-cycle svg{width:14px;height:14px}
.vto-layout-v2 .vto-action-cluster.is-cyclable:active{transform:scale(.97)}
/* Dropdown de selection : s'ouvre VERS LE HAUT (la barre est en bas). */
.vto-layout-v2 .vto-cluster-menu{
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%);
  z-index:20;
  width:max(190px,100%);
  padding:6px;
  border-radius:14px;
  background:rgba(20,24,26,.97);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:flex;flex-direction:column;gap:2px;
  animation:vtoClusterMenuIn .16s ease both;
}
.vto-layout-v2 .vto-cluster-menu::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:rgba(20,24,26,.97);
}
@keyframes vtoClusterMenuIn{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
.vto-layout-v2 .vto-cluster-option{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;min-height:36px;padding:0 11px;
  border:0;border-radius:9px;background:transparent;color:#eef1ef;
  font-size:12px;font-weight:650;text-align:left;cursor:pointer;
}
.vto-layout-v2 .vto-cluster-option:hover{background:rgba(255,255,255,.07)}
.vto-layout-v2 .vto-cluster-option.is-active{background:rgba(255,255,255,.14);color:#fff;font-weight:800}
.vto-layout-v2 .vto-cluster-option-check{display:grid;place-items:center;width:15px;height:15px}
.vto-layout-v2 .vto-cluster-option-check svg{width:14px;height:14px}
/* Quand le menu est ouvert, la fleche du bouton pointe vers le bas. */
.vto-layout-v2 .vto-cluster-select.is-open .vto-cluster-cycle{opacity:1}

/* =========================================================================
   VTO — overlay classique : le selfie remplit l'ecran, les controles (barre
   d'actions + rail de vignettes) flottent PAR-DESSUS le bas du selfie.
   Aucun scroll : tout tient dans le cadre. On ajoute juste un degrade pour
   la lisibilite des controles sur le selfie.
   ========================================================================= */
.premium-score-vto{position:relative}
/* Prioritaire sur phone-template (#app>.vto-screen{overflow-y:auto}) : l'ecran
   VTO est un overlay fixe, jamais scrollable -> pas de scroll parasite. */
#app>.vto-screen.premium-score-vto{overflow:hidden!important}
.premium-score-vto .vto-camera{position:absolute;inset:0}
.premium-score-vto .vto-top{position:absolute;top:16px;left:0;right:0;z-index:8;padding:0 16px;box-sizing:border-box}
.premium-score-vto .premium-vto-bottom{
  position:absolute;
  left:0;right:0;
  bottom:12px;
  z-index:5;
  /* Plus d'ombre/degrade sombre sous le rail : fond transparent. */
  background:transparent;
  padding-top:22px;
}
/* La rangee de vignettes ne doit plus etre rognee : marge basse suffisante. */
.premium-score-vto .vto-frame-rail{padding-bottom:2px}
.premium-score-vto .vto-frame-rail-track{padding-bottom:6px}


/* =========================================================================
   VTO � Vrai try-on (slide "On you") + favoris (coeurs) reutilisant le
   systeme Instagram-like (toggle-catalogue-favourite).
   ========================================================================= */
/* Slide "On you" : image de try-on reelle (deja generee), plein cadre. */
.premium-score-vto .vto-tryon-real{
  position:absolute; inset:0; width:100%; height:100%;
  /* Selfie try-on : cover pour REMPLIR le cadre (pas de zone vide), avec
     cadrage aligne sur les yeux quand la mesure est disponible. */
  object-fit:cover; object-position:50% 38%; z-index:1;
  /* Leger agrandissement pour combler toute zone vide en bas du cadre (VRAIS
     selfies uniquement ; annule pour les IA plus bas). Origine en haut. */
  transform:scale(1.05); transform-origin:center top;
}
/* Profils IA : cadrage remonte pour que le sommet du crane reste visible dans
   le bloc VTO (sans dezoomer). Prime sur le cadrage yeux. */
.premium-score-vto.is-ia-profile .vto-tryon-real,
.premium-score-vto.is-ia-profile .vto-tryon-real.vto-eye-measured{
  /* Images IA carrees (1024x1024) : deja cadrees pour remplir le bloc. On cadre
     tout en haut pour montrer le sommet du crane, et on N'AGRANDIT PAS (pas de
     scale) : elles remplissent deja le cadre. */
  object-position:50% 0% !important;
  transform:none !important;
}
.premium-score-vto .vto-tryon-real.vto-eye-measured{
  object-position:50% var(--vto-eye-y,50%);
}
/* Fallback rare : try-on pas encore en cache. */
.premium-score-vto .vto-camera-pending{
  display:grid; place-items:center; background:linear-gradient(150deg,#efefef,#d8d8d8);
}
.premium-score-vto .vto-tryon-pending{
  display:grid; place-items:center; gap:10px; text-align:center; color:#5a4f45; padding:22px;
}
.premium-score-vto .vto-tryon-pending svg{ width:30px; height:30px; }
.premium-score-vto .vto-tryon-pending b{ font-size:13px; font-weight:750; }

/* Croix de fermeture : SEULE dans vto-top, A DROITE, PETITE et DISCRETE
   (pastille sombre translucide) pour ne pas chevaucher les barres. */
.premium-score-vto .vto-top.vto-top-single{ grid-template-columns:1fr 32px; top:43px; }
.premium-score-vto .vto-top.vto-top-single .vto-close-btn{
  grid-column:2; justify-self:end;
  width:32px; height:32px;
  background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff;
  box-shadow:none;
}
.premium-score-vto .vto-top.vto-top-single .vto-close-btn svg{ width:17px; height:17px; stroke-width:1.8; }

/* Coeur par vignette du rail. */
.vto-layout-v2 .vto-rail-item{ position:relative; flex:0 0 auto; display:inline-flex; }
.vto-layout-v2 .vto-rail-heart{
  position:absolute; top:-4px; right:-4px;
  width:22px; height:22px; padding:0; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:#ffffff; box-shadow:0 2px 6px rgba(0,0,0,.28); color:#4a4a4a;
}
.vto-layout-v2 .vto-rail-heart svg{ width:13px; height:13px; stroke-width:1.7; }
.vto-layout-v2 .vto-rail-heart.is-active{ background:#fff1f2; color:#d63445; }
.vto-layout-v2 .vto-rail-heart.is-active svg{ fill:#d63445; stroke:#d63445; }

/* =========================================================================
   REFONTE VTO — alignement sur le feed insta-like (Blink)
   ========================================================================= */

/* Backdrop du bottom-sheet "Why this frame?" (clic dehors = fermer). Valable
   dans le VTO ET dans le feed (reco-v2-why-wrap). */
.premium-score-vto .premium-score-sheet-backdrop,
.reco-v2-why-wrap .premium-score-sheet-backdrop{
  position:fixed; inset:0; z-index:39;
  background:rgba(0,0,0,.28);
  animation:premiumSheetFade .2s ease both;
}
@keyframes premiumSheetFade{from{opacity:0}to{opacity:1}}
/* Dans le FEED, le modal "Why this frame?" est rendu DANS le viewer selfie :
   il doit rester dans les bords de ce bloc (pas recouvrir tout le haut de
   l'ecran). On confine donc le backdrop ET le sheet au viewer (absolute). */
.reco-v2-why-wrap{ position:static; }
.reco-v2-viewer .reco-v2-why-wrap .premium-score-sheet-backdrop{
  position:absolute; inset:0; z-index:6;
  border-radius:inherit;
}
.reco-v2-viewer .reco-v2-why-wrap .premium-score-sheet{
  position:absolute;
  left:10px; right:10px; bottom:10px;
  width:auto;
  max-height:calc(100% - 20px);
  z-index:7;
}

/* En-tete story du VTO : barres de progression + macaron selfie + nom cluster
   + lien "Why this frame?" — meme vocabulaire que le feed (reco-v2). */
.premium-score-vto .vto-story-head{
  position:absolute; top:44px; left:14px; right:14px; z-index:9;
  display:flex; flex-direction:column; gap:8px;
  pointer-events:none; /* laisse passer le swipe sauf sur les elements interactifs */
}
.premium-score-vto .vto-story-progress{
  display:flex; gap:4px; width:100%;
}
.premium-score-vto .vto-story-bar{
  flex:1 1 0; height:2.5px; border-radius:99px;
  background:rgba(255,255,255,.4); overflow:hidden;
}
.premium-score-vto .vto-story-bar i{ display:block; height:100%; width:0; background:#fff; border-radius:99px; }
.premium-score-vto .vto-story-bar.is-done i{ width:100%; }
.premium-score-vto .vto-story-bar.is-current i{ width:100%; }
.premium-score-vto .vto-story-who{
  display:inline-flex; align-items:center; gap:8px; margin-top:2px;
}
.premium-score-vto .vto-story-avatar{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  border:2px solid rgba(255,255,255,.85);
  background-size:cover; background-position:center 22%;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.premium-score-vto .vto-story-who b{
  color:#fff; font-size:13px; font-weight:820;
  text-shadow:0 1px 4px rgba(0,0,0,.45);
}
/* Lien "Why this frame?" : texte cliquable sous le macaron (facon indicateur
   musique d'une story Insta). Discret mais lisible sur le selfie. */
.premium-score-vto .vto-why-link{
  pointer-events:auto;
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px;
  min-height:26px; padding:4px 10px;
  border:0; border-radius:999px;
  background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff; font-size:11px; font-weight:750; cursor:pointer;
}
.premium-score-vto .vto-why-link svg{ width:13px; height:13px; }
.premium-score-vto .vto-why-link:active{ transform:scale(.97); }

/* Ligne d'actions du head : "Why this frame?" a gauche + toggle 3D a droite,
   parfaitement alignes (meme baseline). */
.premium-score-vto .vto-story-actions{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%;
}
/* Toggle 3D : dans le flux du head, aligne avec le lien "Why this frame?". */
.premium-score-vto .vto-3d-toggle{
  pointer-events:auto;
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:6px;
  min-height:26px; padding:4px 12px;
  border:0; border-radius:999px;
  background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff; font-size:11px; font-weight:750; cursor:pointer;
}
.premium-score-vto .vto-3d-toggle svg{ width:15px; height:15px; }
.premium-score-vto .vto-3d-toggle.is-active{ background:#141414; }
.premium-score-vto .vto-3d-toggle:active{ transform:scale(.97); }
/* Vue 3D (placeholder) dans la slide essayage. */
.premium-score-vto .vto-3d-view{ display:grid; place-items:center; background:linear-gradient(150deg,#20282b,#111719); }

/* Puce "product details" du carousel : bloc clair resume + CTA vers la PDP. */
.premium-score-vto .vto-slide-product{ display:grid; place-items:center; padding:26px 20px; background:#fafafa; }
.premium-score-vto .vto-product-card{
  width:100%; max-width:320px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:20px 18px 18px;
  border:1px solid #e5e5e5; border-radius:20px; background:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.premium-score-vto .vto-product-thumb{
  width:100%; height:150px; display:grid; place-items:center;
  border-radius:14px; background:#f2f2f2; overflow:hidden;
}
.premium-score-vto .vto-product-thumb img{ max-width:88%; max-height:88%; object-fit:contain; }
.premium-score-vto .vto-product-info{ display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; }
.premium-score-vto .vto-product-info small{ color:#8a8a8a; font-size:9px; font-weight:760; letter-spacing:.05em; text-transform:uppercase; }
.premium-score-vto .vto-product-info b{ font-size:19px; font-weight:850; color:#141414; letter-spacing:-.02em; }
.premium-score-vto .vto-product-price{ font-size:15px; font-weight:800; color:#141414; }
.premium-score-vto .vto-product-swatches{ display:inline-flex; gap:6px; margin-top:2px; }
.premium-score-vto .vto-product-cta{
  width:100%; min-height:46px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:14px; background:#141414; color:#fff;
  font-size:14px; font-weight:800; cursor:pointer;
}
.premium-score-vto .vto-product-cta svg{ width:16px; height:16px; }
.premium-score-vto .vto-product-cta:active{ transform:scale(.99); }

/* =========================================================================
   VTO — passe lisibilite mobile (SAFE : le bottom-sheet scrolle, aucun clamp).
   On remonte les textes du modal "Why this frame works" + le lien Why + le
   toggle 3D a un plancher confortable. Bloc en fin de fichier => l'emporte.
   ========================================================================= */
/* Titre + sous-titre du bottom-sheet. */
.vto-layout-v2 .premium-score-sheet .premium-score-sheet-header>div::before,
.reco-v2-why-wrap .premium-score-sheet .premium-score-sheet-header>div::before { font-size: 16px !important; }
.vto-layout-v2 .premium-score-sheet .premium-score-sheet-header>div::after,
.reco-v2-why-wrap .premium-score-sheet .premium-score-sheet-header>div::after { font-size: 12.5px !important; }
/* Labels Shape/Colour/Style + texte des points. */
.vto-layout-v2 .premium-score-sheet .frame-fit-points-bullets li b,
.reco-v2-why-wrap .premium-score-sheet .frame-fit-points-bullets li b { font-size: 13px !important; }
.vto-layout-v2 .premium-score-sheet .frame-fit-points-bullets li span,
.vto-layout-v2 .premium-score-sheet .frame-fit-points-bullets li,
.reco-v2-why-wrap .premium-score-sheet .frame-fit-points-bullets li span,
.reco-v2-why-wrap .premium-score-sheet .frame-fit-points-bullets li { font-size: 13px !important; line-height: 1.35 !important; }
/* Lien "Why this frame?" + toggle 3D (pastilles a largeur libre). */
.premium-score-vto .vto-why-link,
.premium-score-vto .vto-3d-toggle,
.reco-v2-why-link { font-size: 12px !important; }
.premium-score-vto .vto-why-link svg,
.premium-score-vto .vto-3d-toggle svg,
.reco-v2-why-link svg { width: 14px; height: 14px; }
/* Puce product details : petit label marque. */
.premium-score-vto .vto-product-info small { font-size: 10px !important; }