/* Shared outer surface only: preserve each page's contents and desktop layout. */
html body .favorite-collection-filter{display:grid;gap:8px;margin:12px 0 24px;min-width:0}
html body .favorite-collection-filter[hidden]{display:none!important}
html body .favorite-collection-filter select{width:100%;min-width:0;min-height:48px;box-sizing:border-box;padding:10px 14px;border:1px solid var(--frame-line);border-radius:16px;background:var(--frame-paper);color:inherit;font:inherit;direction:rtl}
html:root{background:#fff;--frame-canvas:#fff;--frame-paper:#fff;--frame-line:#eee;--frame-shadow:0 10px 30px #0000000a;--phone-radius:28px!important;--app-paper:#fff;--app-page:#fff}
html:root[data-theme="dark"]{background:#161317;--frame-canvas:#161317;--frame-paper:#211c22;--frame-line:#383239;--frame-shadow:0 10px 30px #0004;--app-paper:#211c22;--app-page:#161317}
html:root body,html:root body.ui-consistent.ui-consistent{background:#fff!important}
html:root[data-theme="dark"] body,html:root[data-theme="dark"] body.ui-consistent.ui-consistent{background:#000!important}
html:root[data-theme="dark"]{background:#000!important;--frame-canvas:#000;--app-page:#000}
html:root body .page-transition-status{position:fixed;inset:0;z-index:2147483647;display:grid;place-content:center;background:#fff!important;color:#111;font:16px Cairo,sans-serif}
html:root[data-theme="dark"] body .page-transition-status{background:#000!important;color:#fff}
html:root body :is(main#main,main.reels-shell,main.stores-shell,main.contact-shell,main.shopper-shell,main.dashboard-main,main.sa-main,main.clofit-legal-page,main.shared-look-page){border-radius:28px!important;border:1px solid var(--frame-line)!important;background-color:var(--frame-paper)!important;box-shadow:var(--frame-shadow)!important;box-sizing:border-box}
html:root body main.clofit-legal-page{margin:8px auto;min-height:calc(100svh - 16px);color:var(--app-ink,#292329)}
html:root[data-theme="dark"] body main.clofit-legal-page{color:#faf6f8;--app-ink:#faf6f8;--app-muted:#c8bdc5}
html:root[data-theme="dark"] .clofit-legal-page .legal-date{color:#c8bdc5}
@media(max-width:480px){
 html:root{--phone-width:calc(100vw - 16px)!important;--phone-height:calc(100svh - 16px)!important;--phone-inset:8px!important}
 html:root body{padding:8px 0!important;box-sizing:border-box}
 html:root body :is(main#main,main.reels-shell,main.stores-shell,main.contact-shell,main.shopper-shell,main.dashboard-main,main.sa-main,main.clofit-legal-page,main.shared-look-page){width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;margin:0 auto!important;min-width:0!important}
 html:root body :is(main.reels-shell,main.shopper-shell){height:var(--phone-height)!important;min-height:0!important;overflow:hidden}
 html:root body.phone-shell-page main{min-height:0!important}
}
/* Desktop keeps the established content width, but uses the available height. */
@media screen and (min-width:481px){
 html:root{--phone-height:calc(100vh - 16px)!important;--phone-height:calc(100dvh - 16px)!important;--phone-inset:8px!important}
 html:root body.phone-shell-page,html:root body:has(>main.reels-shell){min-height:100vh;min-height:100dvh;box-sizing:border-box;padding:8px 0!important}
 html:root body main.reels-shell,html:root body.phone-shell-page :is(main#main,main.stores-shell){height:var(--phone-height)!important;min-height:0!important;max-height:none!important;margin:0 auto!important}
}
@media print{html:root body{background:#fff!important;padding:0!important}html:root body main{border:0!important;border-radius:0!important;box-shadow:none!important}}