/* ============ Clean layer (dimuat setelah style.css) ============
   Tema tetap ceria (ungu, pink, lemon) tapi lebih tenang & profesional: garis tipis, bayangan lembut, ruang napas lebih lega. */
:root{--bw:1.5px;--r:14px;--sh:0 1px 2px rgba(21,18,58,.06),0 6px 18px rgba(21,18,58,.07);--sh-lg:0 2px 4px rgba(21,18,58,.08),0 12px 28px rgba(21,18,58,.12);--soft:#e4e0f5}
body{background-image:none;background:linear-gradient(180deg,#f6f4ff 0,#fbfaff 320px,#fbfaff 100%) fixed}
.card,.panel,.pcard,.rail,.sheet,.modal .sheet,.drawer{border-color:var(--soft)!important;box-shadow:var(--sh)!important}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)!important}
.card:nth-child(n):hover{background:var(--paper)}
.slab{border-color:var(--soft)}
.btn{box-shadow:none!important;border-width:1.5px;transition:background .15s,transform .1s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(107,76,255,.25)!important}
.btn:active{transform:none}
input,select,textarea{border-color:var(--soft)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(107,76,255,.15)}
.top{border-bottom:1px solid var(--soft)!important;box-shadow:0 1px 0 rgba(21,18,58,.03)}
.anav{border-bottom:1px solid var(--soft)!important}
.tabs button,.grpsel,.fbar input[type=search],.anav .menubtn{box-shadow:none!important;border-color:var(--soft)!important}
.tabs button.on{border-color:var(--ink)!important}
.fsheetwrap,.stat,.k{box-shadow:var(--sh)!important;border-color:var(--soft)!important}
button.stat:hover,.k:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)!important}
.flash{border-radius:12px}.flash.warn{background:#fff7d6;border:1px solid #f0d96b;padding:10px 14px}
.flash.warn a{color:var(--violet-d)}

/* ---- login / daftar ---- */
.or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:.85rem}.or:before,.or:after{content:"";flex:1;height:1px;background:var(--soft)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 16px;border:1.5px solid var(--soft);border-radius:999px;background:#fff;color:var(--ink);font-weight:700;text-decoration:none;transition:box-shadow .15s,border-color .15s}
.gbtn:hover{border-color:#c9c2ee;box-shadow:var(--sh)}
.linkbtn{border:0;background:none;color:var(--violet-d);font-weight:600;cursor:pointer;text-decoration:underline}
.check{display:flex;gap:8px;align-items:flex-start;font-weight:500;font-size:.9rem}.check input{width:auto;margin-top:4px}

/* ---- Akun pembeli ---- */
.acc-hero{display:flex;align-items:center;gap:16px;padding:20px;border-radius:18px;background:linear-gradient(135deg,#5b3df5,#8b5cf6);color:#fff;margin-bottom:16px;box-shadow:var(--sh-lg)}
.acc-hero .av{width:56px;height:56px;border-radius:50%;background:#fff;color:var(--violet-d);display:grid;place-items:center;font:800 1.4rem var(--display);flex:none;overflow:hidden}.acc-hero .av img{width:100%;height:100%;object-fit:cover}
.acc-id{min-width:0;flex:1}.acc-id h1{font-size:1.35rem;color:#fff;margin:0 0 2px}.acc-id p{margin:0;opacity:.9;font-size:.9rem;overflow:hidden;text-overflow:ellipsis}
.chips2{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.chip{font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.18);color:#fff}.chip.ok{background:#d9fbe9;color:#0b6b48}.chip.warn{background:#ffe9e9;color:#a31d2f}
.acc-edit{background:#fff!important;color:var(--violet-d)!important;flex:none}
.acctabs{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;margin-bottom:6px;scrollbar-width:none;align-items:center}.acctabs::-webkit-scrollbar{display:none}
.acctabs a{flex:none;padding:8px 16px;border-radius:99px;border:1.5px solid var(--soft);background:#fff;text-decoration:none;color:var(--ink);font-weight:700;font-size:.9rem}
.acctabs a.on{background:var(--ink);color:#fff;border-color:var(--ink)}.tabout{margin-left:auto;flex:none}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:8px}
.tile{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:#fff;border:1px solid var(--soft);border-radius:14px;text-decoration:none;color:var(--ink);box-shadow:var(--sh)}
.tile b{font:800 1.6rem var(--display)}.tile span{font-size:.82rem;color:var(--muted);font-weight:600}.tile small{font-size:.74rem;color:#b45309;font-weight:700}.tile.hot b{color:#d97706}
.tile:hover{border-color:var(--violet)}
.fchips{display:flex;gap:6px;overflow-x:auto;margin:8px 0 14px;scrollbar-width:none}.fchips a{flex:none;padding:6px 14px;border-radius:99px;background:#fff;border:1.5px solid var(--soft);text-decoration:none;color:var(--ink);font-weight:700;font-size:.85rem}
.fchips a.on{background:var(--violet);border-color:var(--violet);color:#fff}.fchips i{font-style:normal;opacity:.7;margin-left:4px}
.oc{background:#fff;border:1px solid var(--soft);border-radius:16px;padding:14px;margin-bottom:12px;box-shadow:var(--sh)}
.oc-h{display:flex;gap:12px;align-items:flex-start}
.oc-img{width:48px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--soft);background:#f1eefc;flex:none}
.oc-m{flex:1;min-width:0}.oc-m small{color:var(--muted)}.oc-code{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.oc .otitles{margin:4px 0 0;font-size:.88rem;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.oamt{text-align:right;flex:none}.oamt b{display:block;font:800 1rem var(--display)}.oamt small{color:var(--muted);font-size:.74rem}
.pbar{height:8px;background:#ece8fb;border-radius:99px;overflow:hidden;margin:12px 0 4px}.pbar i{display:block;height:100%;background:linear-gradient(90deg,#35d9a0,#16a679);border-radius:99px;transition:width .4s}
.pbar.big{height:12px}.pbar.sm{height:6px;margin:6px 0 4px}
.pbar-t{margin:0 0 10px;font-size:.84rem;color:var(--muted)}.pbar-t b{color:var(--ink)}.pbar-t .late{color:var(--red);font-style:normal;font-weight:700}.pbar-t .wait{color:#b45309;font-weight:700}
.stp{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin:10px 0 12px;padding:0;position:relative}
.stp li{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.7rem;font-weight:700;color:#9a97b8;position:relative}
.stp li i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#ece8fb;font-style:normal;font-size:.72rem;position:relative;z-index:1}
.stp li:not(:last-child)::after{content:"";position:absolute;top:11px;left:50%;width:100%;height:2px;background:#ece8fb}
.stp li.ok{color:#0b6b48}.stp li.ok i{background:var(--mint);color:#06432d}.stp li.ok::after{background:var(--mint)!important}
.stp li.now{color:var(--violet-d)}.stp li.now i{background:var(--violet);color:#fff;box-shadow:0 0 0 4px rgba(107,76,255,.18)}
.oacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.more{position:relative}.more summary{list-style:none;cursor:pointer}.more summary::-webkit-details-marker{display:none}
.more-m{position:absolute;right:0;bottom:calc(100% + 6px);z-index:20;min-width:200px;background:#fff;border:1px solid var(--soft);border-radius:12px;box-shadow:var(--sh-lg);padding:6px;display:grid}
.more-m a,.more-m button{display:block;text-align:left;padding:9px 12px;border:0;background:none;border-radius:8px;color:var(--ink);font-weight:600;text-decoration:none;cursor:pointer;width:100%;font-size:.9rem}.more-m a:hover,.more-m button:hover{background:#f3f0ff}
.inst{list-style:none;margin:0;padding:0;display:grid;gap:10px}.inst li{padding:10px 12px;border:1px solid var(--soft);border-radius:12px}.inst li.ok{background:#f0fcf7;border-color:#bdeed9}.inst li.late{background:#fff3f3;border-color:#f6c4c9}
.inst .ir{display:flex;justify-content:space-between}.inst small{color:var(--muted)}
.ipill{display:inline-block;padding:1px 8px;border-radius:99px;background:#efeafe;color:var(--violet-d);font-weight:700;font-size:.72rem}
.flashp{border-radius:12px}
@media(max-width:640px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .acc-hero{flex-wrap:wrap;padding:16px}.acc-edit{width:100%;text-align:center}
  .oc{padding:12px}.oc-img{width:40px;height:54px}
  .oacts .btn{flex:1 1 auto;text-align:center}.more{flex:none}
}

/* ---- Katalog: tampilan daftar ringkas (bawaan di HP) ---- */
.viewsw{display:inline-flex;border:1.5px solid var(--soft);border-radius:99px;overflow:hidden;background:#fff}
.viewsw button{border:0;background:none;padding:6px 12px;font-weight:700;font-size:.8rem;cursor:pointer;color:var(--muted)}.viewsw button.on{background:var(--ink);color:#fff}
.grid.as-list{grid-template-columns:1fr;gap:10px}
.grid.as-list .card{display:grid;grid-template-columns:76px 1fr;grid-template-areas:"pic title" "pic meta" "pic who" "pic origin" "pic price";column-gap:12px;row-gap:2px;padding:10px;align-items:start}
.grid.as-list .card .slab{grid-area:pic;aspect-ratio:5/7;transform:none!important;border-radius:8px}
.grid.as-list .card h3{grid-area:title;font-size:.92rem}.grid.as-list .card .meta{grid-area:meta}.grid.as-list .card .who{grid-area:who}
.grid.as-list .card .origin{grid-area:origin}.grid.as-list .card .by{display:none}.grid.as-list .card .price{grid-area:price;margin-top:4px;font-size:1rem}
.grid.as-list .card .tag{top:-6px;left:6px;font-size:.68rem;padding:1px 8px}.grid.as-list .card .tag.gr{display:none}
.grid.as-list .card .foil{display:none}
.grid.as-list .card.merch{display:grid;grid-template-columns:76px 1fr;grid-template-areas:none}
.grid.as-list .card.merch .mpic{grid-column:1;grid-row:1/span 4;aspect-ratio:1}
@media(max-width:640px){
  .grid:not(.as-list){grid-template-columns:repeat(2,1fr);gap:10px}
  .grid:not(.as-list) .card{padding:8px;gap:6px}.grid:not(.as-list) .card h3{font-size:.84rem}
  .bar{flex-wrap:wrap;gap:8px}
}

/* ---- Dashboard penjual ---- */
.rembox{display:grid;gap:6px;margin:10px 0;padding:12px;border:1px dashed #d8cffb;border-radius:12px;background:#faf8ff}.rembox .acts{display:flex;gap:6px;flex-wrap:wrap}
.msbox{display:grid;gap:6px;margin:10px 0;padding:12px;border:1px solid var(--soft);border-radius:12px;background:#fbfaff}
.isel{display:flex;gap:8px;align-items:center;cursor:pointer}.isel input{width:auto}
.bslist{display:grid;gap:6px;max-height:44vh;overflow:auto;border:1px solid var(--soft);border-radius:12px;padding:8px}
.bsrow{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:8px;cursor:pointer}.bsrow:hover{background:#f3f0ff}.bsrow input{width:auto;margin-top:4px}.bsrow small{display:block;color:var(--muted)}
.flashrow td,.flashrow{animation:flashrow 1.8s ease-out}@keyframes flashrow{0%{background:#fff3a8}100%{background:transparent}}
.fxform .panel{margin-bottom:14px}.stickybar{position:sticky;bottom:10px;z-index:5}
.prevbox{position:sticky;top:78px}
@media(max-width:860px){.prevbox{position:static}}
.commf{display:flex;gap:4px;align-items:center;justify-content:flex-end;margin-top:6px}.commf input{width:56px;padding:3px 6px;text-align:right}.commf span{color:var(--muted)}
.trkbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;margin:0 0 10px;border:1px dashed #d8cffb;border-radius:12px;background:#faf8ff}.trkbar.on{border-style:solid;border-color:var(--violet);background:#f3f0ff}.trkbar input[name=note]{flex:1;min-width:160px}.trkbar select{width:auto}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cmp a{display:block;text-align:center;text-decoration:none;color:var(--ink);font-weight:700}.cmp img{width:100%;border:1px solid var(--soft);border-radius:10px;background:#fff}

/* ============ Perbaikan tampilan HP / tablet / PC (v12.6) ============ */
html{-webkit-text-size-adjust:100%}
body{overflow-x:clip}
img,svg,video{max-width:100%}
input,select,textarea{max-width:100%;box-sizing:border-box}

/* Keranjang: tidak lagi melebar keluar layar */
.drawer{width:min(440px,100vw);max-width:100vw;box-sizing:border-box;padding:18px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.drawer ul{flex:0 1 auto;max-height:38vh;max-height:38dvh;min-height:40px}
.drawer li div{min-width:0;overflow-wrap:anywhere}
.dfoot{grid-template-columns:minmax(0,1fr)}
.dfoot p{display:block;font:400 .88rem var(--body);overflow-wrap:anywhere;margin:0}
.dfoot > p:first-of-type{display:flex;justify-content:space-between;gap:10px;font:700 1rem var(--display)}
.dfoot .btn{width:100%;box-sizing:border-box;text-align:center}
.dfoot .lbl{display:grid;gap:4px;font-weight:700;font-size:.88rem}
.dfoot input{width:100%}

/* Panel dropdown tidak terpotong (desktop) */
.more-m{max-width:calc(100vw - 24px)}
.repbox .repform{max-width:calc(100vw - 24px)}

/* Ringkasan dashboard: kotak 3 kolom di tablet, 2 kolom di HP */
@media(min-width:641px) and (max-width:1000px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
  .stat{padding:12px 12px 10px;border-radius:14px}
  .stat b{font-size:clamp(.95rem,4.6vw,1.2rem);line-height:1.2}
  .stat span{display:block;margin-top:3px;font-size:.76rem;line-height:1.25}
  .stats .stat:last-child:nth-child(odd){grid-column:1/-1}
  .stat:hover{transform:none}
  h1{font-size:1.4rem}
}

/* Menu admin di HP: bisa di-scroll kalau item banyak */
@media(max-width:860px){
  .anav .navlinks.open{max-height:calc(100vh - 78px);max-height:calc(100dvh - 78px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}

/* Dropdown jadi lembar bawah (bottom sheet) di HP: tidak terpotong sisi kiri/kanan */
@media(max-width:640px){
  details.more[open]::before,details.repbox[open]::before{content:"";position:fixed;inset:0;background:rgba(21,18,58,.45);z-index:88}
  .more-m,.repbox .repform{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:100%!important;max-width:none!important;min-width:0!important;box-sizing:border-box;
    max-height:78vh;max-height:78dvh;overflow-y:auto;border:0!important;border-radius:20px 20px 0 0!important;background:#fff;z-index:90;
    padding:16px 16px calc(20px + env(safe-area-inset-bottom))!important;box-shadow:0 -12px 32px rgba(21,18,58,.28)!important}
  .more-m a,.more-m button{padding:14px 12px;font-size:1rem}
  .repbox .repbtns .btn{flex:1 1 40%;text-align:center}
}

/* Halaman masuk / daftar: formulir langsung terlihat di HP */
@media(max-width:820px){
  body.auth{min-height:100vh;min-height:100dvh}
  .auth-art{min-height:0;padding:18px 20px 22px;gap:8px}
  .auth-art .demo{display:none}
  .auth-art h1{font-size:1.45rem;max-width:none}
  .auth-art p{font-size:.92rem;margin:4px 0 0}
  .auth-form{padding:16px 14px 28px}.auth-form form{padding:22px 18px}
}
/* Akun pembeli di layar sempit */
@media(max-width:640px){.acctabs a{padding:7px 14px}.pgrid{grid-template-columns:1fr!important}}
/* Tombol aksi di tabel/kartu: boleh turun baris di layar sempit (tidak bikin halaman melebar) */
@media(max-width:860px){
  td.acts,.acts{white-space:normal!important;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  td.nw{white-space:normal}
  .tbar{flex-wrap:wrap}.tbar .btn{flex:0 1 auto}
}
@media(max-width:860px){.anav .navlinks.open>*{flex-shrink:0}}
@media(max-width:860px){.anav .navlinks.open{flex-wrap:nowrap}}

/* ===== Dua bahasa (ID / EN), perkiraan mata uang, batal pesanan ===== */
.langsw{display:inline-flex;align-items:center;gap:2px;padding:3px;border:2px solid var(--ink);border-radius:999px;background:#fff;margin-left:auto}
.langsw a{font:700 .78rem var(--body,inherit);letter-spacing:.04em;color:var(--ink);text-decoration:none;padding:5px 11px;border-radius:999px;line-height:1}
.langsw a:hover{background:var(--lemon,#ffe14d)}.langsw a.on{background:var(--ink);color:#fff}
.langsw .cursel{font:700 .78rem var(--body,inherit);border:0;background:transparent;color:var(--ink);padding:4px 2px 4px 6px;margin-left:2px;border-left:2px solid var(--ink);cursor:pointer;max-width:70px}
body.auth>.langsw{position:fixed;top:14px;right:14px;z-index:30;margin:0}
body.shop .top .langsw{margin-left:0}
@media(max-width:860px){body.shop .top .langsw{order:4}}
.fx{font-weight:600;color:var(--muted,#625f86);white-space:nowrap}
small.fx{font-size:.78em;margin-left:.3em}
.price .fx,.mstock .fx{display:block;margin:0;font-size:.72em}
/* jendela pilih bahasa untuk pengunjung baru */
.lw{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(21,18,58,.55);backdrop-filter:blur(3px)}
.lw-box{position:relative;width:100%;max-width:440px;background:#fff;border:2px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);padding:26px 22px 20px;text-align:center}
.lw-x{position:absolute;top:8px;right:10px;border:0;background:transparent;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--ink);padding:4px 8px}
.lw-eyebrow{margin:0 0 6px;font:700 .74rem var(--body,inherit);letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#625f86)}
.lw-box h2{margin:0 0 16px;font-size:1.35rem;line-height:1.25}.lw-box h2 span{color:var(--muted,#625f86);font-weight:600;font-size:.9em}
.lw-opts{display:grid;gap:10px}
.lw-opt{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:2px solid var(--ink);border-radius:14px;text-decoration:none;color:var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);transition:transform .08s}
.lw-opt:hover{transform:translate(-1px,-1px);background:var(--lemon,#ffe14d)}.lw-opt.sug{background:var(--lemon,#ffe14d)}
.lw-opt b{font-size:1.05rem}.lw-opt small{color:var(--muted,#625f86)}
.lw-note{margin:14px 0 0;font-size:.78rem;color:var(--muted,#625f86);line-height:1.45}
/* batal pesanan */
.cancelbox{margin:14px 0;border:2px dashed #d9a3ae;border-radius:14px;padding:10px 12px;background:#fff7f8}
.cancelbox>summary{cursor:pointer;list-style:none;display:inline-block}.cancelbox>summary::-webkit-details-marker{display:none}
.cancelbox .pform{margin-top:10px;display:grid;gap:10px}.cancelbox .coerr{color:#b31a3a;font-weight:600;margin:0}
.btn.ghost.danger,.btn.sm.ghost.danger{background:#fff;color:#b31a3a;border-color:#b31a3a;box-shadow:none}
.btn.ghost.danger:hover{background:#ffe9ed}
.cancelf{display:inline}.cancelmenu{display:block;width:100%;text-align:left;border:0;background:transparent;padding:9px 12px;font:600 .9rem var(--body,inherit);color:#b31a3a;cursor:pointer}
.cancelmenu:hover{background:#ffe9ed}
.intl{margin:12px 0;padding:12px 14px;border:2px solid var(--ink);border-radius:14px;background:#eef6ff;font-size:.9rem;line-height:1.5}.intl b{display:block;margin-bottom:2px}.intl p{margin:0}

/* ===== Fan Merch: kartu per artis ===== */
.mg-tools{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center;margin:14px 0 6px}
.mg-tools input{flex:1 1 220px;max-width:340px;border:2px solid var(--ink);border-radius:999px;padding:9px 16px;font:500 .95rem var(--body,inherit);background:#fff}
.mg{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin:12px 0 18px}
.mg-card{display:flex;flex-direction:column;border:2px solid var(--ink);border-radius:16px;background:#fff;text-decoration:none;color:var(--ink);overflow:hidden;box-shadow:4px 4px 0 var(--ink);transition:transform .08s}
.mg-card:hover{transform:translate(-2px,-2px)}
.mg-img{aspect-ratio:1/1;background:var(--lemon,#ffe14d);display:flex;align-items:center;justify-content:center;border-bottom:2px solid var(--ink);overflow:hidden}
.mg-img img{width:100%;height:100%;object-fit:cover}.mg-img span{font:800 3rem var(--display,inherit)}
.mg-b{padding:10px 12px 12px}.mg-b h3{margin:0 0 3px;font-size:1rem;line-height:1.25;overflow-wrap:anywhere}.mg-b p{margin:0;font-size:.82rem;color:var(--muted,#625f86)}.mg-b small{display:block;margin-top:3px;font-size:.76rem;color:var(--muted,#625f86)}
.mg-tabs{display:inline-flex;padding:3px;border:2px solid var(--ink);border-radius:999px;background:#fff}
.mg-tabs button{border:0;background:transparent;font:700 .85rem var(--body,inherit);padding:7px 14px;border-radius:999px;cursor:pointer;color:var(--ink)}
.mg-tabs button.on{background:var(--ink);color:#fff}
.mg-art{grid-column:span 1}
.mg-strip{display:flex;gap:2px;aspect-ratio:3/2;background:var(--lemon,#ffe14d);border-bottom:2px solid var(--ink);overflow:hidden}
.mg-strip img{flex:1 1 0;min-width:0;height:100%;object-fit:cover}.mg-strip span{flex:1;display:flex;align-items:center;justify-content:center;font:800 3rem var(--display,inherit)}
.mg-b .bio{margin:0 0 4px;color:var(--ink);font-size:.82rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mg:has(.mg-art){grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}