outfit-phone-widget{display:block;width:100%;margin:10px auto 22px;max-width:520px;font-family:inherit;color:#604c37}
outfit-phone-widget .op-wrap{background:#fcfaf7;padding:0 0 12px;text-align:center}
outfit-phone-widget .op-label{font:600 11px/1.5 Arial,sans-serif;letter-spacing:2px;color:#816c51;margin:10px 0 0}
outfit-phone-widget .op-stage{position:relative;width:100%;max-width:470px;margin:0 auto;aspect-ratio:1536/1024;touch-action:pan-y;user-select:none}
outfit-phone-widget .op-stage{opacity:0;visibility:hidden}
outfit-phone-widget .op-stage.op-ready{opacity:1;visibility:visible}
outfit-phone-widget .op-img{display:block;width:100%;height:100%;object-fit:contain}
outfit-phone-widget .op-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
outfit-phone-widget .op-digit{cursor:pointer;touch-action:none;outline:none}
outfit-phone-widget .op-digit:focus-visible circle{stroke:#493522;stroke-width:8}
outfit-phone-widget .op-controls{display:flex;gap:8px;justify-content:center;margin:2px 0 10px}
outfit-phone-widget button.op-btn{border:1px solid #cdbda6;background:#f7efe3;color:#5b4431;border-radius:9px;padding:11px 17px;font-size:12px;font-weight:600;cursor:pointer}
outfit-phone-widget button.op-btn.primary{background:#614932;color:white}
outfit-phone-widget .op-hint{font-size:11px;color:#8c7c6b;margin:6px 0 12px}
outfit-phone-widget .op-panel{background:#fffaf3;border:1px solid #e2d5c4;border-radius:16px;padding:15px;margin-top:10px;text-align:left}
outfit-phone-widget .op-panel h3{font:500 19px Georgia,serif;margin:0 0 10px;color:#614932}
outfit-phone-widget .op-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
outfit-phone-widget .op-item{border:1px solid #e6daca;border-radius:12px;padding:8px;background:white;min-width:0}
outfit-phone-widget .op-item img{width:100%;aspect-ratio:4/5;object-fit:contain;border-radius:8px;background:#f7f2eb}
outfit-phone-widget .op-item strong{display:block;font-size:12px;margin-top:6px;overflow-wrap:anywhere}
outfit-phone-widget .op-item small{font-size:11px;color:#8a7967}
outfit-phone-widget .op-palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
outfit-phone-widget .op-color{border:1px solid #d9c8b5;background:white;border-radius:10px;padding:7px 3px;font-size:10px;color:#584b40;cursor:pointer}
outfit-phone-widget .op-color span{display:block;width:26px;height:26px;border-radius:50%;border:1px solid #c8bdaf;margin:0 auto 5px}
outfit-phone-widget .op-color[aria-pressed=true]{outline:2px solid #7b6044}
outfit-phone-widget .op-choice{display:flex;gap:7px;margin-top:7px}
outfit-phone-widget .op-choice button{flex:1}
outfit-phone-widget .op-empty{font-size:12px;color:#86725f;line-height:1.6}
outfit-phone-widget .op-summary{font-size:12px;color:#7c6855;margin-bottom:12px}
@media(max-width:400px){outfit-phone-widget .op-panel{padding:12px}outfit-phone-widget .op-controls{margin-top:-4px}}

outfit-phone-widget .op-directory{display:grid;gap:9px}outfit-phone-widget .op-directory>div{display:flex;align-items:center;gap:12px;padding:9px;border:1px solid #e6daca;border-radius:10px;font-size:12px}outfit-phone-widget .op-directory b{display:grid;place-items:center;background:#e8d9c4;border-radius:50%;width:27px;height:27px;flex-shrink:0}outfit-phone-widget .op-occasion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}outfit-phone-widget .op-occasion-grid button{padding:10px 3px}outfit-phone-widget .op-outfit{border:1px solid #e3d4c1;border-radius:12px;padding:10px;margin-top:12px}outfit-phone-widget .op-outfit>strong,outfit-phone-widget .op-outfit>small{display:block;margin-bottom:6px}outfit-phone-widget .op-question{border-bottom:1px solid #e6daca;padding:12px 0}outfit-phone-widget .op-question>strong{font-size:13px}outfit-phone-widget .op-feedback{font-size:12px;color:#6e614f}outfit-phone-widget .op-search{display:flex;gap:7px}outfit-phone-widget .op-search input{min-width:0;flex:1;padding:11px;border:1px solid #d8c7b3;border-radius:9px;background:white;font:inherit}outfit-phone-widget .op-controls{flex-wrap:wrap}outfit-phone-widget .op-controls button{padding:10px 12px}outfit-phone-widget .op-panel[hidden]{display:none}

outfit-phone-widget .op-current-head{display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:wrap;margin-bottom:12px}
outfit-phone-widget .op-current-head strong{font-size:13px;color:#5c4635}
outfit-phone-widget .op-choice-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%;min-width:0;box-sizing:border-box}
outfit-phone-widget .op-choice-actions .op-btn{width:100%;min-width:0;box-sizing:border-box;padding:7px 4px;font-size:10px;line-height:1.2;white-space:normal;overflow-wrap:anywhere;border-radius:7px}
outfit-phone-widget .op-green{background:#648b69!important;color:white!important;border-color:#648b69!important}
outfit-phone-widget .op-current-item{width:min(190px,100%);margin:0 auto 12px}
outfit-phone-widget .op-picked-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
outfit-phone-widget .op-picked{position:relative;min-width:0}
outfit-phone-widget .op-picked .op-item{padding:4px}
outfit-phone-widget .op-picked .op-item img{aspect-ratio:3/4}
outfit-phone-widget .op-picked .op-item strong{font-size:10px}
outfit-phone-widget .op-picked .op-item small{font-size:9px}
outfit-phone-widget .op-remove{position:absolute;right:3px;top:3px;border:0;background:#fff8ed;color:#654b34;border-radius:50%;width:23px;height:23px}
outfit-phone-widget .op-chosen-title{font:500 15px Georgia,serif;color:#614932;margin:18px 0 9px}
outfit-phone-widget .op-create{width:100%;margin-top:13px}
outfit-phone-widget .op-create:disabled{opacity:.45;cursor:not-allowed}

outfit-phone-widget .op-stat-row{margin:12px 0}
outfit-phone-widget .op-stat-head{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;margin-bottom:5px}
outfit-phone-widget .op-stat-head strong{white-space:nowrap;color:#634e38}
outfit-phone-widget .op-stat-label{display:flex;align-items:center;gap:8px}
outfit-phone-widget .op-stat-label i{width:16px;height:16px;border-radius:50%;border:1px solid #cfc3b4;flex-shrink:0}
outfit-phone-widget .op-stat-track{height:9px;background:#eae0d2;border-radius:8px;overflow:hidden}
outfit-phone-widget .op-stat-track span{display:block;height:100%;border-radius:8px}

/* Clean editorial outfit collage: no grey tiles or labels; all pieces stay within the board. */
.generated-outfit-stage{position:relative;width:100%;height:clamp(390px,58dvh,620px);max-height:620px;min-height:350px;overflow:hidden;border-radius:14px;background:#f7f6f3;touch-action:pan-y;box-sizing:border-box}
.generated-stage-caption{display:none!important}
.generated-stage-piece{position:absolute;transform:translate(-50%,-50%);display:block;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;max-width:42%;max-height:48%;min-width:0;overflow:visible;touch-action:none;cursor:grab}
.generated-stage-piece.is-dragging{z-index:20;cursor:grabbing}
.generated-stage-piece img{display:block;width:100%;height:clamp(105px,19dvh,190px);max-height:none;min-height:0;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.06))}
.generated-stage-piece small{display:none!important}
.generated-stage-piece .generated-no-photo{background:transparent;height:100px}
@media(max-width:420px){.generated-outfit-stage{height:clamp(420px,60dvh,600px);min-height:390px}.generated-stage-piece{max-width:43%;max-height:48%}.generated-stage-piece img{height:clamp(105px,17dvh,155px)}}
@media(max-height:700px){.generated-outfit-stage{height:clamp(350px,58dvh,450px);min-height:330px}.generated-stage-piece img{height:clamp(85px,15dvh,120px)}}

/* Mobile outfit board: larger garment cutouts and a compact top-to-bottom silhouette. */
.generated-stage-piece{max-width:60%;max-height:62%;}
.generated-stage-piece img{height:clamp(155px,25dvh,235px);}
@media(max-width:420px){.generated-stage-piece{max-width:62%;max-height:64%;}.generated-stage-piece img{height:clamp(165px,27dvh,250px);}}
@media(max-height:700px){.generated-stage-piece img{height:clamp(145px,23dvh,205px);}}

/* Add Articles popup: wardrobe-style two-column cards, above the fixed brand/header bar. */
.modal-backdrop{z-index:10000}
.add-outfit-articles-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;max-height:62dvh;overflow:auto;padding:2px 2px 10px}
.add-outfit-article-card{display:flex;flex-direction:column;min-width:0}
.add-outfit-article-card .item-image{height:clamp(120px,22vh,180px)}
.add-outfit-article-card .item-name{min-height:2.5em}
.add-outfit-include-btn{width:100%;margin-top:auto}
.add-outfit-empty{grid-column:1/-1}
@media(max-width:360px){.add-outfit-articles-grid{gap:7px}.add-outfit-article-card{padding:6px}.add-outfit-article-card .item-image{height:120px}}