/* SHEET / MODAL */
dialog{position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;overflow:hidden;
  border:0;padding:0;background:transparent;color:var(--ink)}
dialog::backdrop{background:rgba(20,15,12,.55);backdrop-filter:blur(4px)}
.modal{width:100%;height:100%;display:grid;place-items:center;padding:20px}
.modal .box{width:min(468px,100%);max-height:calc(100vh - 36px);overflow-y:auto;overflow-x:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;animation:pop .2s ease-out;position:relative}
.modal .box.wide{width:min(780px,100%)}
.modal .box.nopop{animation:none}
.modal .box.nopop>[data-dlg-body]{animation:fade .18s ease-out}
.modal .box.full{width:min(1120px,96vw);height:min(900px,94vh);max-height:none;padding:0;
  display:flex;flex-direction:column;overflow:hidden}
.modal .box.full>[data-dlg-body]{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.prod-top{flex:none;padding:22px 26px 16px;border-bottom:1px solid var(--line);padding-right:60px}
.prod-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:22px 26px 26px}
.prod-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(304px,.8fr);gap:26px;align-items:start}
.prod-hero{width:100%;aspect-ratio:16/9;height:auto !important;padding:18px;gap:12px;margin:0 0 18px}
.sec{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.sec:first-child{margin:0;padding-top:0;border-top:0}
.sec>h3{font-size:15.5px;margin:0 0 12px}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 20px}
.feat-grid .step{margin:0}
.prod-meta{display:flex;flex-wrap:wrap;gap:0 26px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.prod-meta div{min-width:96px}
.prod-meta span{display:block;font-family:var(--fm);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.prod-meta b{font-size:13.5px}
.prod-cols2{columns:2;column-gap:24px}
.pay-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);gap:26px;align-items:start}
.pay-mid{max-width:520px;margin:0 auto}
@media (max-width:900px){.pay-grid{grid-template-columns:1fr;gap:18px}}
@media (max-width:900px){.prod-cols2{columns:1}}
.prod-buy{position:sticky;top:0}
@media (max-width:900px){.prod-grid{grid-template-columns:1fr;gap:18px}.prod-buy{position:static}
  .modal .box.full{width:100%;height:92vh;border-radius:22px 22px 0 0}
  .prod-top{padding:18px 16px 14px;padding-right:56px}.prod-body{padding:16px 16px calc(20px + env(safe-area-inset-bottom))}}
.modal .box.fixed{width:min(940px,96vw);height:min(640px,calc(100vh - 36px));max-height:none;padding:0;
  display:flex;flex-direction:column;overflow:hidden}
.modal .box.fixed>[data-dlg-body]{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.dlg-top{flex:none;padding:20px 22px 0}
.dlg-top h2{font-size:19.8px}
.dlg-tabs{display:flex;gap:2px;margin:14px 0 0;border-bottom:1px solid var(--line)}
.dlg-tabs button{border:0;background:none;color:var(--sub);font-size:13.5px;font-weight:600;padding:10px 14px;white-space:nowrap;
  border-radius:10px 10px 0 0;border-bottom:2px solid transparent;min-height:40px}
.dlg-tabs button:hover{color:var(--ink);background:var(--surface2)}
.dlg-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.dlg-pane{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:18px 24px 16px;animation:fade .18s ease-out}
.key-two{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;align-items:start;
  margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.key-two .kv{padding:8px 0}
.key-two .item{padding:10px 0}
@media (max-width:760px){.key-two{grid-template-columns:1fr;gap:16px}}
@media (max-width:640px){.modal .box.fixed{height:88vh;border-radius:22px 22px 0 0}
  .dlg-top{padding:18px 16px 0}.dlg-pane{padding:16px 16px calc(20px + env(safe-area-inset-bottom))}
  .dlg-tabs button{flex:1;padding:10px 6px;font-size:12.6px}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.sheet{width:100%;height:100%;display:flex;justify-content:flex-end}
.sheet .box{width:min(512px,100%);height:100%;overflow-y:auto;overflow-x:hidden;background:var(--surface);border-left:1px solid var(--line);
  padding:22px;animation:slide .24s cubic-bezier(.22,1,.36,1);position:relative}
@keyframes slide{from{transform:translateX(28px);opacity:.6}to{transform:none;opacity:1}}
.x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--sub);display:grid;place-items:center}
.x:hover{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.dlg-h{padding-right:46px;margin-bottom:17px}
.dlg-h h2{font-size:19.8px}
.dlg-h p{color:var(--sub);font-size:13.1px;margin:7px 0 0}
.dlg-f{display:flex;gap:10px;margin-top:18px}
.dlg-f .btn{flex:1}
@media (max-width:640px){
  .modal{padding:0;place-items:end}
  .modal .box,.sheet .box{width:100%;max-height:92vh;border-radius:22px 22px 0 0;border-left:0;
    animation:up .26s cubic-bezier(.22,1,.36,1);padding:22px 18px calc(22px + env(safe-area-inset-bottom))}
  .sheet{align-items:flex-end}
  .sheet .box{height:auto}
  @keyframes up{from{transform:translateY(30px)}to{transform:none}}
  .grab{width:44px;height:4px;border-radius:99px;background:var(--line2);margin:-6px auto 14px}
}