/* A shared glass material, readable content, restrained grouped controls. */
:root{--glass:linear-gradient(135deg,#ffffffb8,#f4f0e89c 52%,#ffffff70);--glass-line:#ffffffb8;--glass-shadow:0 18px 55px #332b2018,inset 0 1px 0 #fffffff2,inset 0 -1px 0 #ffffff66}
.product-panel,body:not([data-view=rail]) .product-panel{width:340px;padding:27px;border:1px solid var(--glass-line);border-radius:30px;background:var(--glass);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(24px) saturate(1.35);backdrop-filter:blur(24px) saturate(1.35);max-height:calc(100svh - 150px);overflow:auto;scrollbar-width:thin}
.product-heading h1,body:not([data-view=rail]) .product-heading h1{font-size:34px;letter-spacing:-.045em}.product-heading .price{font:500 14px Arial,sans-serif;letter-spacing:.01em;margin-top:13px}.product-story{font-size:12px;line-height:1.65;margin-top:17px;color:#41443e}.collection-label{color:#53584e;font-size:9px}.panel-note{color:#575c54;font-size:9px}
.piece-picker{display:flex;gap:7px;margin-top:18px}.piece-picker>button{border:1px solid #ffffff90;border-radius:24px;min-height:40px;padding:7px 12px;display:flex;align-items:center;gap:7px;font-size:10px;background:#ffffff38;transition:background .2s,box-shadow .2s;flex:1;white-space:nowrap;justify-content:center}.piece-picker>button[aria-pressed=true]{background:#ffffffa8;box-shadow:0 3px 12px #2c302019,inset 0 0 0 1px #4a51463b}.color-dot{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px #0002;flex-shrink:0}.color-abaya{background:#252824}.color-dress{background:#16493e}
.explore-button,.purchase-actions>button{border-radius:18px;border:1px solid #ffffffac;font:500 12px Arial,sans-serif;min-height:48px;background:#ffffff58;box-shadow:inset 0 1px 0 #ffffffa0;transition:transform .2s,background .2s,box-shadow .2s}.explore-button:hover,.purchase-actions>button:hover{background:#ffffffa3;box-shadow:0 4px 15px #25282012}.explore-button:active,.purchase-actions>button:active{transform:scale(.98)}.purchase-actions .add-button{background:#26352ef2;color:#fff;border-color:#26352e}.purchase-actions .add-button:hover{background:#354d41}.sizes button{border-radius:12px;background:#ffffff45;border-color:#ffffffa8;min-height:42px}.sizes button[aria-pressed=true]{background:#2d3c32;color:#fff;box-shadow:0 3px 8px #293a3326}.length-select{border-radius:12px;border-color:#ffffffb8;background:#ffffff50}.details-trigger,.size-trigger{color:#3b483f}.purchase-actions{gap:9px}.model-button{color:#2c3d32}
.scene-back,.scene-views,.rotation-controls{border:1px solid var(--glass-line);background:var(--glass);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25)}.scene-back{border-radius:24px}.scene-views{bottom:62px}.rotation-controls{position:absolute;bottom:115px;left:35%;transform:translateX(-50%);z-index:5;width:340px;border-radius:22px;padding:14px 18px 7px}.rotation-heading{display:flex;justify-content:space-between;font-size:11px;gap:18px;color:#39483e}.angle-readout{font-variant-numeric:tabular-nums;direction:ltr}.rotation-controls input{display:block;accent-color:#354f40;width:100%;height:26px;margin:4px 0;cursor:ew-resize}.rotation-landmarks{display:flex;justify-content:space-between;align-items:center;gap:10px}.rotation-landmarks button{font-size:10px;min-height:36px;opacity:.7}.rotation-landmarks button[aria-pressed=true]{opacity:1}.rotation-landmarks button:last-child{border-radius:18px;padding:0 10px;background:#ffffff6b;opacity:1}.motion-status{position:absolute;left:35%;bottom:118px;transform:translateX(-50%);border-radius:20px;padding:10px 16px;background:#f5f3ece8;font-size:11px;z-index:5}.scene-error{z-index:6;border-radius:18px}
.scene-motion{position:absolute;inset:0 auto 0 0;width:70%;height:100%;object-fit:contain;z-index:2;transform-origin:50% 50%;user-select:none;pointer-events:none}.scene-photo{pointer-events:none}.world[aria-busy=true]{cursor:progress}body[data-turn=ready] .world{cursor:grab;touch-action:none}body[data-turn=ready] .world:active{cursor:grabbing}body[data-turn=ready] .side-controls{display:none}body[data-turn=ready] .side-angle{display:none!important}
body[data-view=inspect] .scene-photo,body:lang(ar)[data-view=inspect] .scene-photo{width:70%;height:100%;margin:0;top:0;object-fit:contain;object-position:center;transform:none;transform-origin:50% 50%}body[data-view=inspect] .scene-ambient{opacity:1}.scene-ambient{background-size:cover;opacity:1;filter:blur(30px)}body[data-zoom=true] .scene-photo,body[data-zoom=true] .scene-motion{transform:scale(1.65) translateY(10%)!important}body:lang(ar) .scene-motion,body:lang(ar)[data-view=inspect] .scene-photo{left:30%;margin-left:0}body:lang(ar) .rotation-controls,body:lang(ar) .motion-status{left:65%}
dialog{border:1px solid #ffffffa8;border-radius:30px;background:linear-gradient(135deg,#f7f4eeec,#f0ece4db);box-shadow:0 25px 100px #151d2430,inset 0 1px 0 #fff;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}dialog::backdrop{background:#27372d33;backdrop-filter:blur(6px)}.close-button{border-radius:50%;background:#ffffff60}.bag-item-controls button{border-radius:12px}.bag-items img{border-radius:12px}.toast{border-radius:24px}
@supports not (backdrop-filter:blur(1px)){.product-panel,body:not([data-view=rail]) .product-panel,.scene-back,.scene-views,.rotation-controls{background:#f1ede6f5}}
@media(min-width:761px) and (max-width:1100px){.product-panel,body:not([data-view=rail]) .product-panel{width:300px;padding:22px}.product-heading h1,body:not([data-view=rail]) .product-heading h1{font-size:30px}.rotation-controls{left:30%;width:285px}body:lang(ar) .rotation-controls{left:70%}}
@media(max-width:760px){
 .atelier{background:#e4dac9;min-height:700px}.masthead{background:#ede7dce0;backdrop-filter:blur(18px)}
 .product-panel,body:not([data-view=rail]) .product-panel,body:lang(ar) .product-panel{width:calc(100% - 20px);margin:0 10px;padding:16px 18px 12px;max-height:none;border-radius:25px;overflow:visible;background:linear-gradient(135deg,#ffffffb0,#f4f0e6ba);box-shadow:0 8px 30px #30291b14,inset 0 1px 0 #fff;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
 .product-heading h1,body:not([data-view=rail]) .product-heading h1{font-size:26px}.product-heading .price{font-size:12px;margin:0}.product-heading{margin-top:6px}.collection-label{font-size:8px}.piece-picker{margin-top:10px;gap:7px}.piece-picker>button{min-height:34px;font-size:9px;padding:6px 11px}.product-story{font-size:11px;line-height:1.5;margin-top:9px}.explore-button{margin-top:10px;min-height:44px;font-size:12px;border-radius:15px}.panel-note{font-size:8px;margin-top:7px}.scene-footer{background:transparent;padding-inline:7%;font-size:8px}
 .product-options{margin-top:9px}.sizes button{min-height:36px;width:34px;border-radius:11px}.sizes legend{font-size:10px}.length-select{min-height:36px}.purchase-actions>button{min-height:44px;font-size:10px;padding:9px;border-radius:14px}.scene-views,body:lang(ar) .scene-views{bottom:8px;left:50%;gap:8px;max-width:95%;box-shadow:0 2px 12px #30302012}.rotation-controls,body:lang(ar) .rotation-controls{bottom:51px;left:50%;width:calc(100% - 30px);max-width:360px;padding:10px 14px 3px;border-radius:19px}.rotation-heading{font-size:9px}.rotation-landmarks button{font-size:9px;min-height:32px}.rotation-controls input{height:20px}.motion-status,body:lang(ar) .motion-status{left:50%;bottom:57px;font-size:10px;max-width:90%;text-align:center;width:max-content}
 body[data-view=inspect] .atelier .world .scene-photo,body:lang(ar)[data-view=inspect] .atelier .world .scene-photo,.scene-motion,body:lang(ar) .scene-motion{height:140%;top:-18%;left:0;width:100%;margin:0;object-fit:contain;object-position:center;transform:none!important}
 body[data-turn=ready] .scene-views{bottom:7px}body[data-turn=ready] .scene-motion{height:100%;top:-6%;object-position:center;z-index:2}body[data-turn=ready] .scene-photo{opacity:0}
 body[data-zoom=true] .atelier .world .scene-motion,body[data-zoom=true] .atelier .world .scene-photo{transform:scale(1.65) translateY(10%)!important}.rotation-controls{transition:opacity .2s}body[data-zoom=true] .rotation-controls{opacity:0;pointer-events:none}
 .scene-back,body:lang(ar) .scene-back{top:8px;min-height:34px}html:lang(ar) .product-heading h1{line-height:1.35}.world{overflow:hidden}
}
@media(max-width:350px){.product-panel,body:not([data-view=rail]) .product-panel{padding:13px 14px 10px}.product-heading h1,body:not([data-view=rail]) .product-heading h1{font-size:22px}.piece-picker>button{padding:5px 8px}.sizes button{width:30px}.rotation-heading{font-size:8px}.purchase-actions>button{font-size:9px}}
@media(prefers-reduced-transparency:reduce){.product-panel,body:not([data-view=rail]) .product-panel,.scene-back,.scene-views,.rotation-controls,dialog{background:#f2eee6!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
@media(prefers-reduced-motion:reduce){.rotation-landmarks [data-action=turn-play]{display:none}}

@media(min-width:761px){body[data-view=inspect][data-side=front] .scene-photo,body:lang(ar)[data-view=inspect][data-side=front] .scene-photo{width:100%;height:100%;left:0;object-fit:cover;transform:scale(1.035);transform-origin:40% 50%}.scene-motion,body:lang(ar) .scene-motion{width:100%;height:100%;left:0;object-fit:cover;transform:scale(1.035);transform-origin:40% 50%}body[data-turn=ready] .scene-photo{opacity:0}.product-panel,body:not([data-view=rail]) .product-panel{padding:24px}body:not([data-view=rail]) .product-story{display:none}}
/* The movie and its poster use identical framing; keep the complete hem visible. */
@media(min-width:761px){body[data-view=inspect][data-side=front] .scene-photo,body:lang(ar)[data-view=inspect][data-side=front] .scene-photo,.scene-motion,body:lang(ar) .scene-motion{object-fit:contain;transform:none}}

body[data-wide-turn=true] .scene-ambient{inset:0;background-size:100% 100%;filter:blur(14px);transform:scale(1.04);opacity:1}
body[data-wide-turn=true] .scene-photo,body[data-wide-turn=true] .scene-motion{mask-image:linear-gradient(to right,transparent,#000 18px,#000 calc(100% - 18px),transparent),linear-gradient(to bottom,transparent,#000 18px,#000 calc(100% - 18px),transparent);mask-composite:intersect}
@media(min-width:761px){.rotation-controls{bottom:30px}.scene-views{bottom:32px;left:12%}body:lang(ar) .scene-views{left:88%}body[data-turn=ready] .scene-hint{visibility:hidden}}

body[data-zoom=true] .atelier .world .scene-photo,body[data-zoom=true] .atelier .world .scene-motion{transform:translate(var(--pan-x,0px),var(--pan-y,0px)) scale(1.65)!important;transform-origin:39% 50%;cursor:move}

/* Give the garment the screen; secondary fit controls open in a glass sheet. */
.fit-trigger{display:none}.fit-done{display:block;width:100%;margin-top:22px;border-radius:16px;background:#2d3c32;color:white}.fit-options .product-options{display:grid;gap:16px}.fit-options .sizes{grid-column:1/-1;gap:10px}.fit-options .sizes button{width:44px;min-height:44px}.fit-options .length-label{grid-column:1/-1;font-size:12px;gap:15px}.fit-options .length-select{min-height:44px}.fit-options .details-trigger,.fit-options .size-trigger{min-height:44px}
@media(max-width:760px){
 .atelier{grid-template-rows:calc(83px + env(safe-area-inset-top)) minmax(0,1fr) auto calc(34px + env(safe-area-inset-bottom));min-height:620px}
 .masthead{padding:6px 5% 0; padding-top:calc(6px + env(safe-area-inset-top));grid-template-rows:43px 34px}.wordmark>span{font-size:21px}.wordmark small{font-size:15px}.collections button{min-height:32px}
 .product-panel,body:not([data-view=rail]) .product-panel,body:lang(ar) .product-panel{padding:12px 16px 9px;border-radius:23px}
 body:not([data-view=rail]) .collection-label{display:none}.product-heading{margin-top:0}.product-heading h1,body:not([data-view=rail]) .product-heading h1{font-size:25px}
 .piece-picker{margin-top:5px}.piece-picker>button{min-height:44px;padding-block:4px}
 body:not([data-view=rail]) .fit-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;font-size:11px;border-bottom:1px solid #766b5722;padding:0 3px}
 .purchase-actions{margin-top:5px}.panel-note{margin-top:5px;font-size:8px}.scene-footer{padding-inline:5%}.scene-footer a{padding:5px 0}
 .rotation-controls,body:lang(ar) .rotation-controls{bottom:6px;padding:8px 12px 0;border-radius:18px}.rotation-controls input{height:22px;margin:0}.rotation-landmarks button{min-height:44px}.rotation-heading{font-size:9px}
 .scene-views,body:lang(ar) .scene-views,body[data-turn=ready] .scene-views{top:6px;bottom:auto;left:auto;right:10px;transform:none;max-width:46%;padding:0 10px}.scene-views button{min-height:36px}.scene-back,body:lang(ar) .scene-back{top:6px;max-width:44%;min-height:36px}
 .motion-status,body:lang(ar) .motion-status{bottom:20px}
 .transition-photo{mask-image:linear-gradient(to right,transparent,#000 18px,#000 calc(100% - 18px),transparent),linear-gradient(to bottom,transparent,#000 18px,#000 calc(100% - 18px),transparent);mask-composite:intersect}
}

/* Direct garment selection shares the exact photo/video camera transform. */
.scene-targets{position:absolute;z-index:3;overflow:visible;pointer-events:none;touch-action:none}
.scene-targets [data-garment]{pointer-events:all;cursor:pointer;outline:none}
.scene-targets polygon{fill:#fff8e8;stroke:none;opacity:0;filter:blur(16px);transition:opacity .28s ease}
.scene-targets [data-garment][aria-pressed=true]{cursor:grab}
.scene-targets [data-garment]:focus-visible polygon{opacity:.26}
@media(hover:hover){.scene-targets [data-garment]:hover polygon{opacity:.14}.scene-targets [data-garment]:focus-visible:hover polygon{opacity:.26}}
html[data-motion=off] .scene-targets polygon{transition:none}
@media(prefers-reduced-motion:reduce){.scene-targets polygon{transition:none}}
.garment-label{position:absolute;z-index:6;pointer-events:none;font-size:11px;padding:8px 12px;border-radius:20px;background:#f4efe5e8;color:#29382e;box-shadow:0 4px 18px #0001;white-space:nowrap}
.color-dot{background:var(--swatch)}.piece-picker>button{min-width:0;padding-inline:8px}
body[data-zoom=true] .atelier .world .scene-targets{transform:translate(var(--pan-x,0px),var(--pan-y,0px)) scale(1.65)!important;transform-origin:39% 50%}
.world{touch-action:none}.scene-back,.scene-views{z-index:5}
@media(max-width:760px){.piece-picker>button{font-size:9px;gap:5px;padding-inline:6px}.piece-picker .color-dot{width:10px;height:10px}}
