/* Fourth vision study: one composed view for the preview and the live experience. */
#vision .vision-image.vision-complexion-image{padding:0!important;align-items:stretch!important;background:#ededed!important}
#vision .complexion-preview-frame{position:relative;flex:0 0 auto;width:185.625px;height:330px;overflow:hidden;margin:auto}
#vision .complexion-preview-frame>.complexion-screen{position:absolute;top:0;left:0;width:390px!important;height:693px!important;min-height:693px!important;transform:scale(.47619);transform-origin:top left;pointer-events:none}
@media(max-width:640px){
  #vision .vision-image.vision-complexion-image{height:320px!important}
  #vision .complexion-preview-frame{width:180px;height:320px}
  #vision .complexion-preview-frame>.complexion-screen{transform:scale(.461538)}
}

.experience-dialog.complexion-mode{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;background:#f1f0ee;box-shadow:none}
.experience-dialog.complexion-mode .experience-shell{height:100dvh;max-height:none;overflow:hidden;display:flex;flex-direction:column}
.experience-dialog.complexion-mode .experience-head{height:51px;min-height:51px;background:white;padding:0 max(18px,calc((100vw - 390px)/2));position:relative;z-index:3}
.experience-dialog.complexion-mode #experienceContent{min-height:0;flex:1;display:flex;justify-content:center}
.experience-dialog.complexion-mode .experience-kicker{font-size:9px}
.experience-dialog.complexion-mode .experience-close{border:0!important;outline:0!important;box-shadow:none!important}
@media(max-width:640px){.experience-dialog.complexion-mode .experience-head{padding:0 18px}}

.complexion-screen{width:min(100%,390px);height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#f7f7f5;color:#161616;font-family:Arial,Helvetica,sans-serif;--accent:#ad7857}
.complexion-head{height:43px;flex:0 0 43px;display:flex;justify-content:center;align-items:center;padding:0 16px;background:#fff;border-bottom:1px solid #e2e2df;font-size:11px}
.complexion-head strong{font:16px/1 Georgia,serif;letter-spacing:.07em;font-weight:400;white-space:nowrap}
.complexion-head strong i{font-style:normal;font-family:Arial,sans-serif;font-size:11px;color:#aaa;padding:0 4px}
.complexion-intro{background:#fff;padding:11px 19px 10px;flex:0 0 auto}
.complexion-intro h3{font:16px/1.1 Georgia,serif;letter-spacing:-.045em;font-weight:400;margin:0}
.complexion-tabs{height:40px;min-height:40px;display:grid;grid-template-columns:repeat(3,1fr);background:#fff;padding:0 18px}
.complexion-tabs button{background:none;border:0;border-bottom:1px solid #d9d9d6;font:10px Arial,sans-serif;color:#898984;cursor:pointer}
.complexion-tabs button[aria-pressed=true]{color:#151515;border-bottom:2px solid #151515}
.complexion-stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#dfdedb}
.complexion-photo,.complexion-photo>img,.complexion-skin{position:absolute;inset:0;width:100%;height:100%}
.complexion-photo>img{display:block;object-fit:cover;object-position:center center;user-select:none}
.complexion-skin{pointer-events:none;object-fit:cover;object-position:center center}
.complexion-dial{position:absolute;left:0;top:50%;transform:translateY(-50%);width:150px;height:224px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:ns-resize;color:#252321;z-index:2}
.complexion-dial-title{position:absolute;left:17px;top:-13px;z-index:2;white-space:nowrap;font-size:8px;letter-spacing:.17em;color:#302c27;background:#ffffffe0;padding:3px 5px}
.complexion-wheel{position:absolute;width:190px;height:190px;left:-105px;top:17px;border:1px solid #fff9;border-radius:50%;box-shadow:0 0 0 1px #7773 inset;transform:rotate(var(--turn,0deg));transition:transform .12s ease-out;pointer-events:none}
.complexion-dial.is-dragging .complexion-wheel{transition:none}
.complexion-wheel:after{display:none}
.complexion-dial:after{content:"";position:absolute;left:80px;top:50%;width:8px;height:8px;background:#fff;border:1px solid #24211d;border-radius:50%;transform:translateY(-50%);box-shadow:0 0 0 4px #fff9;pointer-events:none;z-index:2}
.complexion-wheel i{position:absolute;width:17px;height:17px;left:86px;top:86px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px #0005;transform:rotate(calc((var(--i) - 2)*31deg)) translateX(86px) rotate(calc((2 - var(--i))*31deg));pointer-events:auto;cursor:pointer;touch-action:none}
.complexion-tone-label{position:absolute;left:101px;top:50%;transform:translateY(-50%);bottom:auto;min-width:54px;padding:5px 8px;background:#fffffff0;text-align:center;font:9px Arial,sans-serif;letter-spacing:.03em}
.complexion-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;writing-mode:vertical-lr;direction:rtl}
.complexion-choices{position:absolute;z-index:3;left:18px;top:calc(50% + 135px);display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:110px;color:#262420}
.complexion-choices>span{font:8px Arial,sans-serif;letter-spacing:.16em;background:transparent;padding:0}
.complexion-choices>div{display:flex;gap:10px;align-items:center}
.complexion-choices button{width:27px;height:27px;border:2px solid #fff;border-radius:50%;background:var(--choice);padding:0;box-shadow:0 1px 4px #0004;cursor:pointer;display:grid;place-items:center;color:#fff;font:13px Georgia,serif;touch-action:manipulation}
.complexion-choices button[aria-pressed=true]{outline:1px solid #272522;outline-offset:3px}
.complexion-choices button i{font-style:normal;font-size:15px;line-height:1;text-shadow:0 1px 2px #0005}
.complexion-choices em{font:9px Arial,sans-serif;font-style:normal;background:transparent;padding:0;min-width:55px;text-align:center;margin-left:48px}
.complexion-choices[hidden]{display:none}
.complexion-product-footer{flex:0 0 82px;min-height:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:#fff;border-top:1px solid #dededb}
.complexion-product-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
.complexion-product-copy span{font:8px Arial,sans-serif;letter-spacing:.13em;color:#777}
.complexion-product-copy strong{font:17px/1.12 Georgia,serif;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.complexion-product-copy em{font:12px Arial,sans-serif;font-style:normal}
.complexion-cart{flex:0 0 128px;min-height:36px;border:0;background:#181817;color:white;font:9px Arial,sans-serif;letter-spacing:.08em;cursor:pointer}
.complexion-cart:focus-visible{outline:2px solid #181817;outline-offset:3px}
@media(max-width:390px){.complexion-intro{padding-top:9px;padding-bottom:7px}.complexion-intro h3{font-size:16px}}

/* Compact product controls and selected color beside the price. */
.complexion-choices button{width:22px;height:22px}
.complexion-choices button i{font-size:12px}
.complexion-price-row{display:flex;align-items:center;gap:8px}
.complexion-selected-swatch{display:inline-block;width:12px;height:12px;flex:0 0 12px;border-radius:50%;border:1px solid #ffffff;box-shadow:0 0 0 1px #aaa9a5}

/* Jewelry styles sit over a black dress: keep their labels legible. */
.complexion-screen[data-product="necklace"] .complexion-choices>span,
.complexion-screen[data-product="necklace"] .complexion-choices em{
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}