/* ===== UI kit (store + admin). Themes provide the --ui-* tokens. ===== */
:root{
  --ui-surface:#fff; --ui-surface-2:#f6f5f3; --ui-ink:#1c1917; --ui-muted:#78716c; --ui-line:#e7e5e4; --ui-line-strong:#d6d3d1;
  --ui-hover:#f5f5f4; --ui-accent:#1c1917; --ui-accent-ink:#fff; --ui-ring:rgba(28,25,23,.12); --ui-danger:#dc2626;
  --ui-success:#16a34a; --ui-radius:12px; --ui-radius-lg:16px; --ui-control-h:48px;
  --ui-shadow:0 18px 50px -12px rgba(20,16,12,.28),0 4px 12px rgba(20,16,12,.06);
  --ui-ease:cubic-bezier(.2,.8,.2,1);
}
html.ui-locked,html.ui-locked body{overflow:hidden}

/* ---------- Combobox ---------- */
.combo{position:relative;display:block}
.combo-native{position:absolute!important;inset-inline-start:0;bottom:0;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.combo-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--ui-control-h);padding:0 14px;border:1.5px solid var(--ui-line-strong);border-radius:var(--ui-radius);background:var(--ui-surface);color:var(--ui-ink);font:inherit;text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .2s,background .15s}
.combo-btn:hover{border-color:var(--ui-muted)}
.combo-btn:focus-visible,.combo.is-open .combo-btn{outline:none;border-color:var(--ui-accent);box-shadow:0 0 0 4px var(--ui-ring)}
.combo-btn:disabled{opacity:.55;cursor:not-allowed}
.combo-lead:empty{display:none}
.combo-lead{display:inline-flex;align-items:center}
.combo-value{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo.is-placeholder .combo-value{color:var(--ui-muted)}
.combo.is-invalid .combo-btn{border-color:var(--ui-danger);box-shadow:0 0 0 4px rgba(220,38,38,.1)}
.combo-chev{width:18px;height:18px;flex:none;color:var(--ui-muted);transition:transform .25s var(--ui-ease)}
.combo.is-open .combo-chev{transform:rotate(180deg)}
.combo-icon{width:20px;height:20px;color:var(--ui-muted);flex:none}
.combo-pop{position:absolute;z-index:70;top:calc(100% + 6px);inset-inline:0;min-width:220px;max-width:calc(100vw - 24px);background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top center;transition:opacity .16s ease,transform .22s var(--ui-ease),visibility 0s linear .22s}
.combo.is-up .combo-pop{top:auto;bottom:calc(100% + 6px);transform-origin:bottom center;transform:translateY(6px) scale(.98)}
.combo.is-open .combo-pop{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.combo-head{display:none}
.combo-search{position:relative;margin-bottom:6px}
.combo-search svg{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--ui-muted);pointer-events:none}
.combo .combo-search input{width:100%;height:44px;min-height:0;box-shadow:none;border:1px solid var(--ui-line);border-radius:calc(var(--ui-radius) - 2px);padding-inline:40px 12px;background:var(--ui-surface-2);color:var(--ui-ink);font:inherit;font-size:16px;outline:none}
.combo .combo-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.combo .combo-search input:focus{border-color:var(--ui-accent);background:var(--ui-surface);box-shadow:none}
.combo-list{list-style:none;margin:0;padding:0;max-height:280px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.combo-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:calc(var(--ui-radius) - 4px);cursor:pointer;color:var(--ui-ink);transition:background .1s}
.combo-opt.is-active{background:var(--ui-hover)}
.combo-opt[aria-selected="true"]{font-weight:600}
.combo-opt[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.combo-opt[hidden]{display:none}
.combo-label{flex:1;min-width:0}
.combo-meta{color:var(--ui-muted);font-size:.85em;font-weight:400;white-space:nowrap}
.combo-check{width:16px;height:16px;flex:none;opacity:0;color:var(--ui-accent);transform:scale(.6);transition:opacity .15s,transform .2s var(--ui-ease)}
.combo-opt[aria-selected="true"] .combo-check{opacity:1;transform:none}
.combo-swatch{display:inline-block;width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.combo-empty{padding:18px 12px;text-align:center;color:var(--ui-muted);margin:0}
.combo.is-sheet .combo-pop{position:fixed;inset:auto 0 0 0;top:auto;bottom:0;min-width:0;max-width:none;max-height:min(82vh,620px);display:flex;flex-direction:column;border-radius:22px 22px 0 0;border:0;padding:4px 12px calc(12px + env(safe-area-inset-bottom));transform:translateY(100%);z-index:91;transition:transform .32s var(--ui-ease),opacity .2s,visibility 0s linear .32s}
.combo.is-sheet.is-open .combo-pop{transform:none;opacity:1;visibility:visible;transition-delay:0s}
.combo.is-sheet .combo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 4px 10px;position:relative}
.combo.is-sheet .combo-title{font-size:1.05rem}
.combo-grip{position:absolute;top:6px;left:50%;width:42px;height:4px;margin-left:-21px;border-radius:2px;background:var(--ui-line-strong)}
.combo-x{display:inline-grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:var(--ui-surface-2);color:var(--ui-ink);cursor:pointer}
.combo.is-sheet .combo-list{max-height:none;flex:1}
.combo.is-sheet .combo-opt{padding:14px 12px;font-size:1.02rem}
.ui-backdrop{position:fixed;inset:0;z-index:90;background:rgba(12,10,9,.45);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s linear .25s;-webkit-tap-highlight-color:transparent}
.ui-backdrop.is-open{opacity:1;visibility:visible;transition-delay:0s}

/* ---------- Dropdown menus ---------- */
.dd{position:relative;display:inline-block}
.dd-menu{position:absolute;z-index:70;top:calc(100% + 8px);inset-inline-start:0;min-width:210px;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);transform-origin:top;transition:opacity .15s,transform .2s var(--ui-ease),visibility 0s linear .2s}
.dd-end .dd-menu,.dd-flip .dd-menu{inset-inline-start:auto;inset-inline-end:0}
.dd-up .dd-menu{top:auto;bottom:calc(100% + 8px);transform-origin:bottom}
.dd.is-open .dd-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dd-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:calc(var(--ui-radius) - 4px);background:none;color:var(--ui-ink);font:inherit;font-size:.95rem;text-align:start;text-decoration:none;cursor:pointer;white-space:nowrap}
.dd-item:hover,.dd-item:focus-visible{background:var(--ui-hover);outline:none}
.dd-item svg{width:18px;height:18px;flex:none;color:var(--ui-muted)}
.dd-item .dd-check{margin-inline-start:auto;color:var(--ui-accent);opacity:0}
.dd-item.is-current{font-weight:600}
.dd-item.is-current .dd-check{opacity:1}
.dd-item.is-danger,.dd-item.is-danger svg{color:var(--ui-danger)}
.dd-sep{height:1px;background:var(--ui-line);margin:6px 4px}
.dd-label{padding:8px 12px 4px;font-size:.72rem;font-weight:600;color:var(--ui-muted);text-transform:uppercase;letter-spacing:.06em}

/* ---------- Layers ---------- */
.layer{position:fixed;inset:0;z-index:95}
.layer[hidden]{display:none}
.layer-backdrop{position:absolute;inset:0;background:rgba(12,10,9,.48);opacity:0;transition:opacity .3s ease;-webkit-tap-highlight-color:transparent}
.layer.is-open .layer-backdrop{opacity:1}
.layer-panel{position:absolute;background:var(--ui-surface);color:var(--ui-ink);outline:none}
.layer-drawer .layer-panel{inset-block:0;inset-inline-start:0;width:min(88vw,380px);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .34s var(--ui-ease);box-shadow:var(--ui-shadow)}
[dir="rtl"] .layer-drawer .layer-panel{transform:translateX(100%)}
.layer-drawer.is-open .layer-panel{transform:none}
.layer-drawer.from-end .layer-panel{inset-inline-start:auto;inset-inline-end:0;transform:translateX(100%)}
[dir="rtl"] .layer-drawer.from-end .layer-panel{transform:translateX(-100%)}
.layer-drawer.from-end.is-open .layer-panel{transform:none}
.layer-sheet .layer-panel{inset-inline:0;bottom:0;max-height:90vh;display:flex;flex-direction:column;border-radius:22px 22px 0 0;transform:translateY(100%);transition:transform .34s var(--ui-ease);padding-bottom:env(safe-area-inset-bottom)}
.layer-sheet.is-open .layer-panel{transform:none}
.sheet-grip{width:42px;height:4px;border-radius:2px;background:var(--ui-line-strong);margin:8px auto 0;flex:none}
.layer-modal .layer-panel,.layer-center .layer-panel{top:50%;left:50%;width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;border-radius:20px;padding:24px;transform:translate(-50%,-46%) scale(.96);opacity:0;transition:transform .26s var(--ui-ease),opacity .2s;box-shadow:var(--ui-shadow)}
.layer-center .layer-panel{width:min(640px,calc(100vw - 32px));padding:0}
.layer-modal.is-open .layer-panel,.layer-center.is-open .layer-panel{transform:translate(-50%,-50%);opacity:1}
@media (min-width:768px){
  .layer-sheet.sheet-dialog .layer-panel{inset:auto;top:50%;left:50%;bottom:auto;width:min(620px,calc(100vw - 48px));max-height:calc(100vh - 64px);border-radius:20px;transform:translate(-50%,-46%) scale(.97);opacity:0;transition:transform .26s var(--ui-ease),opacity .2s}
  .layer-sheet.sheet-dialog.is-open .layer-panel{transform:translate(-50%,-50%);opacity:1}
  .layer-sheet.sheet-dialog .sheet-grip{display:none}
}
.modal-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--ui-surface-2);color:var(--ui-ink);margin-bottom:14px}
.modal-icon svg{width:26px;height:26px}
.modal-icon.is-danger{background:rgba(220,38,38,.1);color:var(--ui-danger)}
.modal-title{font-size:1.08rem;font-weight:600;line-height:1.45;margin:0 0 20px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.ui-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:var(--ui-radius);border:1px solid var(--ui-line-strong);background:var(--ui-surface);color:var(--ui-ink);font:inherit;font-weight:600;cursor:pointer;transition:transform .1s,background .15s}
.ui-btn:active{transform:scale(.97)}
.ui-btn-primary{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-ink)}
.ui-btn-danger{background:var(--ui-danger);border-color:var(--ui-danger);color:#fff}

/* ---------- Toasts ---------- */
.toasts{position:fixed;z-index:99;inset-inline:12px;top:12px;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
@media (min-width:768px){.toasts{inset-inline:auto 20px;top:auto;bottom:20px;align-items:flex-end}[dir="rtl"] .toasts{inset-inline:20px auto}}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;width:min(420px,100%);padding:12px 12px 12px 14px;border-radius:14px;background:var(--ui-ink);color:var(--ui-surface);box-shadow:var(--ui-shadow);opacity:0;transform:translateY(-12px) scale(.98);transition:opacity .25s,transform .35s var(--ui-ease)}
@media (min-width:768px){.toast{transform:translateY(12px) scale(.98)}}
.toast.is-in{opacity:1;transform:none}
.toast.is-out{opacity:0;transform:scale(.96)}
.toast-ic{display:inline-grid;place-items:center;flex:none;color:#4ade80}
.toast-error .toast-ic{color:#f87171}
.toast-msg{flex:1;min-width:0;font-size:.95rem;line-height:1.4}
.toast-msg a{color:inherit;font-weight:700;text-decoration:underline}
.toast-x{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;border:0;border-radius:50%;background:transparent;color:inherit;opacity:.7;cursor:pointer}
.toast-x:hover{opacity:1;background:rgba(255,255,255,.12)}

/* ---------- Reveal on scroll ---------- */
.js [data-reveal]{opacity:0;transform:translateY(18px)}
.js [data-reveal].is-visible{opacity:1;transform:none;animation:ui-rise .7s var(--ui-ease) backwards;animation-delay:calc(var(--i,0) * 70ms)}
@media print{.js [data-reveal]{opacity:1!important;transform:none!important}}
@keyframes ui-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ui-spin{to{transform:rotate(360deg)}}
@keyframes ui-fade{from{opacity:0}to{opacity:1}}
@keyframes ui-pop{0%{transform:scale(.9);opacity:0}60%{transform:scale(1.03);opacity:1}100%{transform:none}}
.is-loading{position:relative;color:transparent!important;pointer-events:none}
.is-loading>*{visibility:hidden}
.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:ui-spin .7s linear infinite}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;animation:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}