/* SLIVYXZ: unified grid rhythm, full-width empty states and cross-browser selects. */
:root{--max:1380px;--gutter:clamp(18px,2.35vw,34px)}
html{scroll-padding-top:calc(var(--top) + 16px)}
body{overflow-x:clip}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
#main,.page,.section,.footer,.footer-inner{min-width:0}
.page{padding-top:clamp(22px,3vw,38px);padding-bottom:clamp(38px,5vw,74px)}
.breadcrumbs{margin:0 0 clamp(22px,2.6vw,32px);min-width:0;line-height:1.5}
.page-heading{margin:0 0 clamp(22px,2.9vw,35px);min-width:0;align-items:flex-start}
.page-heading h1{margin:0 0 12px}
.page-heading p{max-width:780px;overflow-wrap:anywhere}
.section{min-width:0}
.creator-grid,.post-grid,.category-tiles{width:100%;min-width:0}
.creator-grid > .empty,.post-grid > .empty,.category-tiles > .empty,
#saved-creators > .empty,#saved-posts > .empty{grid-column:1/-1;width:100%;min-width:0;min-height:148px;align-self:stretch}
.empty{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;width:100%;max-width:100%;min-height:148px;padding:28px clamp(18px,3vw,36px);text-align:center;border-radius:16px;background:#28282c;color:#eaeaf0;overflow-wrap:anywhere}
.empty h3{font-size:clamp(15px,1.4vw,19px);margin:0;line-height:1.45}
.empty p{font-size:13px;line-height:1.6;max-width:520px;margin:0;color:#a7a7b0}
.saved-heading{margin:clamp(30px,3.6vw,46px) 0 18px}
#saved-creators,#saved-posts{align-items:stretch}
.public-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin:0 0 24px;min-width:0}
.public-toolbar .sort-label{color:#aaaab4;font-size:14px;line-height:1.5;white-space:nowrap}
.public-toolbar select{min-width:0}
/* Global native fallback: JavaScript swaps the menu for a fully themed popup. */
select{color-scheme:dark}
select option,select optgroup{background:#343438;color:#f7f7f9;padding:12px}
select:focus-visible{outline:2px solid #f04f94;outline-offset:3px}
.ui-select{position:relative;display:inline-block;vertical-align:middle;min-width:0;max-width:100%;width:100%;color:#f6f6f8;font-size:14px;font-weight:650;isolation:isolate}
.ui-native-select{position:absolute!important;width:1px!important;height:1px!important;left:0;top:0;opacity:0!important;pointer-events:none!important;z-index:-1;overflow:hidden}
.ui-select-button{width:100%;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 16px;background:#303035;color:#f7f7f9;border:0;border-radius:12px;text-align:left;font:inherit;line-height:1.45;cursor:pointer;transition:background .12s ease}
.ui-select-button:hover,.ui-select.is-open .ui-select-button{background:#3b3b41}
.ui-select-button:focus-visible{outline:2px solid #f04f94;outline-offset:3px}
.ui-select-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-select-chevron{flex:0 0 11px;width:11px;height:8px;background:#bdbdc6;clip-path:polygon(0 0,50% 70%,100% 0,100% 26%,50% 100%,0 26%);transition:transform .12s ease}
.ui-select.is-open .ui-select-chevron{transform:rotate(180deg)}
.ui-select-menu{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:350;min-width:100%;max-width:min(100%,calc(100vw - 36px));max-height:268px;overflow:auto;overscroll-behavior:contain;padding:7px;background:#343439;border:0;border-radius:14px;box-shadow:0 16px 46px #0009;scrollbar-color:#65656c transparent;scrollbar-width:thin}
.ui-select.is-up .ui-select-menu{top:auto;bottom:calc(100% + 8px)}
.ui-select-menu[hidden]{display:none!important}
.ui-select-option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:40px;padding:10px 12px;background:transparent;color:#e1e1e6;border:0;border-radius:9px;text-align:left;font:inherit;line-height:1.4;cursor:pointer}
.ui-select-option:hover,.ui-select-option:focus-visible{background:#45454c;color:white;outline:0}
.ui-select-option[aria-selected="true"]{color:#ff8dbb;background:#49323e}
.ui-select-option[aria-selected="true"]::after{content:'✓';font-size:15px;color:#ff8dbb}
.ui-select-option:disabled{opacity:.45;cursor:not-allowed}
.public-toolbar .ui-select{width:240px;max-width:100%}
.public-toolbar .ui-select-button{min-height:46px}
.admin-form .field .ui-select{width:100%}
.admin-form .field .ui-select-button{min-height:47px;background:#35353a;font-size:14px}
.admin-form .field .ui-select-menu{background:#35353b}
/* Footer: never push right-hand information outside the shared content gutters. */
.footer{margin-top:auto;width:100%;padding-block:31px 35px}
.footer-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) minmax(0,1.05fr);gap:clamp(18px,2.4vw,35px);align-items:start}
.footer-inner>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
.footer .brand{max-width:100%}
.footer-nav{gap:11px 17px}
.footer-right{max-width:100%;line-height:1.8;white-space:normal}
.footer-right span{display:inline-flex;align-items:flex-start;justify-content:flex-end;gap:5px;max-width:100%;text-align:right}
.footer-right .ico{flex:0 0 14px;margin-top:3px}
.footer-right div{max-width:100%;line-height:1.9}
@media(max-width:1100px){
 .footer-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px 26px}
 .footer-right{grid-column:1/-1;text-align:center}
 .footer-right span{justify-content:center;text-align:center}
 .footer-mid{text-align:right}
 .footer-nav{justify-content:flex-end}
}
@media(max-width:700px){
 :root{--gutter:18px}
 .page{padding-top:23px;padding-bottom:43px}
 .breadcrumbs{margin-bottom:22px}
 .page-heading{margin-bottom:22px}
 .public-toolbar{justify-content:flex-start;flex-wrap:wrap;margin:3px 0 23px;gap:10px 13px}
 .public-toolbar .ui-select{width:min(100%,255px)}
 .empty{min-height:130px;padding:25px 19px}
 .footer{padding:30px 0 calc(99px + env(safe-area-inset-bottom))}
 .footer-inner{grid-template-columns:minmax(0,1fr);gap:23px;text-align:center}
 .footer-mid,.footer-right{text-align:center;grid-column:auto}
 .footer .brand{justify-content:center}
 .footer-nav{justify-content:center;gap:12px 17px}
 .footer-right span{justify-content:center;text-align:center}
 .saved-heading{margin:30px 0 16px}
}
@media(max-width:380px){
 :root{--gutter:14px}
 .public-toolbar{align-items:stretch}
 .public-toolbar .sort-label{width:100%}
 .public-toolbar .ui-select{width:100%}
 .ui-select-menu{max-width:calc(100vw - 28px)}
}
/* Keep open menus above the next card row without borders or layout movement. */
.public-toolbar{position:relative;z-index:40}
.ui-select.is-open{z-index:310}
.footer::before{display:none}
