.pag{
margin:var(--gap) auto;
text-align:center;
display:flex;
justify-content:center;
align-items:center;
gap:6px;
width:100%;
max-width:var(--pw2);
flex-wrap:wrap;
}
.pag a,
.pag span{
display:inline-flex;
justify-content:center;
align-items:center;
min-width:48px;
height:48px;
padding:14px;
font-size:18px;
font-weight:400;
line-height:1;
color:var(--tx1);
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
white-space:nowrap;
border-radius:var(--br1);
font-family:var(--ff1);
user-select:none;
}
.pag .arrow{
width:48px;
padding:0;
}
.pag .arrow svg{
width:24px;
height:24px;
}
.pag span.active{
color:var(--bc1);
background-color:var(--cl1);
border-color:var(--cl1);
font-weight:600;
}
.pag a:hover{
background:var(--hv1);
}
.pag .disabled{
opacity:0.22;
cursor:not-allowed;
pointer-events:none;
background-color:var(--hv1);
}
.load-more-wrap{
margin:var(--gap) auto;
text-align:center;
width:var(--pw2);display:flex;
flex-direction:column;
align-items:center;
gap:var(--gap);
}
.load-more-wrap:empty{
display:none;
margin:0;
}
.load-more-btn,
.load-more-next,
.load-more-prev{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:12px 24px;
background-color:var(--cl1);
color:var(--blk);
border:none;
border-radius:var(--br0);
font-family:var(--ff2);
font-size:18px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
cursor:pointer;}
.load-more-btn:hover,
.load-more-btn.pressed,
.load-more-next:hover,
.load-more-next.pressed{
background-color:var(--oh2);
}
.load-more-btn:active,
.load-more-btn.pressed,
.load-more-next:active,
.load-more-next.pressed,
.load-more-prev:active,
.load-more-prev.pressed{
transform:scale(0.98);
}
.load-more-count{
font-weight:500;
opacity:0.8;
}
.load-more-arrow{
width:20px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
}
.load-more-arrow svg{
width:20px;
height:20px;
fill:var(--blk);
stroke:var(--blk);
}
.load-more-prev{
background-color:var(--bg2);
color:var(--tx1);
border:var(--bw1) solid var(--bc1);
}
.load-more-prev:hover,
.load-more-prev.pressed{
background-color:var(--hv1);
border-color:var(--cl1);
}
.load-more-prev .load-more-arrow svg{
fill:var(--tx1);
stroke:var(--tx1);
}
.load-more-prev:hover .load-more-arrow svg,
.load-more-prev.pressed .load-more-arrow svg{
fill:var(--cl1);
stroke:var(--cl1);
}