.wccc-wrap { --wccc-gap: 30px; width: 100%; }

.wccc-grid {
    display: grid;
    grid-template-columns: 30% calc(100% - 30% - var(--wccc-gap));
    gap: var(--wccc-gap);
    align-items: stretch;
}

.wccc-left,
.wccc-right { min-width: 0; }

/* Category card */
.wccc-cat {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 380px;
    overflow: hidden;
    border-radius: 16px;
    background: #f4f4f4;
    text-decoration: none;
    color: #fff;
}
.wccc-cat__img,
.wccc-cat__img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.wccc-cat:hover .wccc-cat__img img { transform: scale(1.06); }
.wccc-cat__title {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 20px;
    font-size: 20px; font-weight: 700;
    background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
    z-index: 2;
}

/* Product card */
.wccc-prod {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, box-shadow .25s ease;
}
.wccc-prod:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,.08); }
.wccc-prod__img {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    background: #f6f6f6;
    overflow: hidden;
}
.wccc-prod__img img { width: 100%; height: 100%; object-fit: cover; }
.wccc-prod__placeholder { display: block; width: 100%; height: 100%; background: #eee; }
.wccc-prod__body { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.wccc-prod__title { font-size: 14px; font-weight: 600; line-height: 1.35; }
.wccc-prod__price { font-size: 13px; font-weight: 700; }

/* Swiper overrides */
.wccc-cat-swiper,
.wccc-prod-swiper { width: 100%; }
.wccc-cat-swiper .swiper-slide,
.wccc-prod-swiper .swiper-slide { height: auto; }

.wccc-cat-swiper .swiper-button-prev,
.wccc-cat-swiper .swiper-button-next,
.wccc-prod-swiper .swiper-button-prev,
.wccc-prod-swiper .swiper-button-next {
    width: 34px; height: 34px;
    background: #fff;
    color: #222;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.wccc-cat-swiper .swiper-button-prev::after,
.wccc-cat-swiper .swiper-button-next::after,
.wccc-prod-swiper .swiper-button-prev::after,
.wccc-prod-swiper .swiper-button-next::after { font-size: 14px; }

.wccc-empty {
    padding: 20px;
    border: 2px dashed #ccc;
    border-radius: 8px;
    text-align: center;
    color: #777;
}

/* Responsive — stack on mobile */
@media (max-width: 767px) {
    .wccc-grid { grid-template-columns: 1fr !important; }
    .wccc-cat { min-height: 240px; }
}

/* RTL support */
[dir="rtl"] .wccc-cat__title {
    text-align: right;
}
[dir="rtl"] .wccc-prod__body {
    text-align: right;
}