.wcaps {
position: relative;
margin: 0;
}
.wcaps-head {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-bottom: 10px;
}
.wcaps-btn {
border: 1px solid rgba(0,0,0,.15);
background: #fff;
padding: 6px 10px;
border-radius: 10px;
cursor: pointer;
font-size: 18px;
line-height: 1;
}
.wcaps-viewport {
overflow: hidden;
border-radius: 14px;
}
.wcaps-track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% / var(--wcaps-cols, 4)) - 14px);
gap: 14px;
align-items: stretch;
transition: transform 280ms ease;
will-change: transform;
padding: 2px;
}
.wcaps-card {
border: 1px solid rgba(0,0,0,.08);
border-radius: 16px;
padding: 12px;
background: #fff;
height: 100%;
}
.wcaps-link {
display: block;
text-decoration: none;
color: inherit;
}
.wcaps-media {
border-radius: 12px;
overflow: hidden;
background: rgba(0,0,0,.03);
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
}
.wcaps-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.wcaps-title {
font-size: 15px;
margin: 10px 0 6px;
}
.wcaps-price {
margin: 0 0 10px;
}
.wcaps-cart .button {
width: 100%;
text-align: center;
border-radius: 12px;
} @media (max-width: 1024px) {
.wcaps-track { grid-auto-columns: calc((100% / var(--wcaps-cols-md, 3)) - 14px); }
}
@media (max-width: 640px) {
.wcaps-track { grid-auto-columns: calc((100% / var(--wcaps-cols-sm, 2)) - 14px); }
} .wcaps-title{
text-align: center;
font-size: 20px; font-weight: 700;
line-height: 1.2;
margin: 12px 0 8px;
}
.wcaps-price{
text-align: center;
font-size: 16px;
margin: 0 0 12px;
} .wcaps-cart{
display: flex;
justify-content: center;
} .wcaps{
position: relative; } .wcaps-head{
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 0 10px; pointer-events: none; z-index: 10;
}
.wcaps-btn{
pointer-events: auto;
width: 44px;
height: 44px;
border: none;
background: transparent;
padding: 0;
border-radius: 999px;
cursor: pointer; font-size: 0;
line-height: 0;
} .wcaps-prev{
margin-left: -40px;
background: no-repeat center/28px 28px
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='%23444' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.wcaps-next{
margin-right: -40px;
background: no-repeat center/28px 28px
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23444' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
} .wcaps-btn:hover{
background-color: rgba(0,0,0,.06);
}
.wcaps-btn:active{
background-color: rgba(0,0,0,.10);
} .wcaps-track{
display:flex !important;
gap:0 !important;
transition: transform 280ms ease;
will-change: transform;
}
.wcaps-page{
flex: 0 0 100% !important; display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap:14px;
} @media (max-width: 640px){
.wcaps-page{ grid-template-columns: 1fr; }
}
.wcaps-viewport { touch-action: pan-y; } .block-editor-page .wcaps a{
pointer-events: none !important;
} .block-editor-page .wcaps .wcaps-btn{
pointer-events: none !important;
}