.os-embedded header .logo,.os-embedded header .divider,.os-embedded .experience-nav{display:none!important}
.os-embedded body>header{justify-content:flex-end;align-items:center}
.os-embedded body>header .header-right{margin-left:auto;flex-wrap:nowrap;align-items:center}
.os-home body>header,.os-home .commerce-strip,.os-home .experience-next{display:none!important}
.os-home .home-experience{padding-top:0!important}
.os-home .try-section{margin-top:0!important}
.os-embedded .source-note{display:none}
button:disabled{opacity:.55;cursor:wait}

/* Let the host document own vertical scrolling, including the full catalog. */
html.os-embedded{height:auto;min-height:0;overflow-x:clip;overflow-y:auto}
.os-embedded body.catalog-studio{height:auto;min-height:0;overflow:visible}
.os-embedded body.catalog-studio>header{position:relative;top:auto;height:48px;min-height:48px;padding:4px 5vw}
.os-embedded body.products-mode>header:not(:has(#resumeDesign:not([hidden]))){display:none}
.os-embedded body.products-mode .products-page{padding-top:24px;padding-bottom:32px}
.os-embedded .products-intro{padding-bottom:24px}
.os-embedded .products-intro h1{margin-top:10px;margin-bottom:12px;font-size:clamp(36px,4.5vw,60px)}
@media(min-width:851px){
 .os-embedded .catalog-studio:not(.products-mode) .studio-shell{height:calc(var(--os-viewport-height,800px) - 140px);min-height:600px}
}
@media(max-width:850px){
 .os-embedded body.catalog-studio>header{padding-inline:16px}
 .os-embedded .catalog-studio:not(.products-mode) .studio-shell{height:auto;min-height:0}
 .os-embedded .catalog-studio:not(.products-mode) .canvas{min-height:0}
 .os-embedded .catalog-studio:not(.products-mode) .scene{height:auto;min-height:290px;flex:none}
 .os-embedded .catalog-studio:not(.products-mode) .catalog-stage{height:250px;flex:none}
 .os-embedded .products-intro h1{font-size:36px;letter-spacing:-1.5px}
 .os-embedded .products-intro p{font-size:14px}
}


/* Keep controls in document flow; iframe height is not the phone viewport. */
.os-embedded .catalog-studio:not(.products-mode) #categoryTabs{overflow-x:auto;overflow-y:hidden;justify-content:flex-start;scrollbar-width:thin}
.os-embedded .catalog-studio:not(.products-mode) #categoryTabs button{flex-shrink:0}
.os-embedded .catalog-studio #toast{position:relative;inset:auto;transform:none;width:fit-content;max-width:calc(100% - 32px);margin:0 auto;height:0;min-height:0;padding:0;overflow:hidden;pointer-events:none;transition:none}
.os-embedded .catalog-studio #toast.show{height:auto;padding:10px 16px;margin:12px auto}
/* Blend the scene against its canvas; perspective otherwise isolates the photos. */
.catalog-studio .scene{perspective:none;mix-blend-mode:multiply}
.catalog-studio .artwork-viewport .bottle-visual{mix-blend-mode:normal}
.catalog-studio .artwork-viewport .photo-crop{mix-blend-mode:multiply}
.catalog-studio .artwork-viewport .photo-crop img{filter:none}
.catalog-studio .artwork-viewport .live-label{filter:none}
@media(max-width:850px){
 .os-embedded .catalog-studio .canvas-top,.os-embedded .catalog-studio .mobile-tray{min-width:0;width:100%;box-sizing:border-box}
 .os-embedded .catalog-studio .mobile-tray{height:auto;overflow:visible;padding-bottom:16px}
 .os-embedded .catalog-studio .view-switch{position:relative;inset:auto;transform:none;align-self:center;margin:8px auto 12px;max-width:calc(100% - 24px);display:flex;flex-wrap:wrap;justify-content:center}
 .os-embedded .catalog-studio .scene{padding-bottom:0}
 .os-embedded .catalog-studio .catalog-stage:not(.collection-stage)>.catalog-product{width:100%;max-height:none}
 .os-embedded .catalog-studio .catalog-stage:not(.collection-stage) .artwork-viewport{width:88%;height:100%;margin:auto}
 .os-embedded .catalog-studio .collection-stage{height:290px}
 .os-embedded .catalog-studio .studio-actions{margin-top:12px}
}

/* Composite the packaging against the scene, not an isolated white rectangle. */
.catalog-studio .try-stage{isolation:auto}
.catalog-studio .artwork-viewport .product-composition{filter:none;mix-blend-mode:multiply}
/* Use the whole editor panel for readable, comfortably clickable layer tabs. */
@media(min-width:851px){
 html.os-embedded body.catalog-studio:not(.products-mode) #categoryTabs{display:flex;width:100%;max-width:none;flex-wrap:wrap;justify-content:space-between;gap:2px;overflow:visible}
 html.os-embedded body.catalog-studio:not(.products-mode) #categoryTabs button{flex:1 0 auto;min-height:44px;padding:10px 2px;font-size:14px;line-height:1.3;text-align:center}
}