:root {
    --wcrs-gap: 1.1rem;
    --wcrs-primary: #2563eb;
    --wcrs-surface: #ffffff;
    --wcrs-border: rgba(15,23,42,.06);
    --wcrs-text: #0f172a;
}
.wcrs-wrapper { margin-top: 2.5rem; }
.wcrs-title {
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-bottom: 1.25rem;
    color: var(--wcrs-text);
}
.wcrs-title:before {
    content: "";
    width: 11px;
    height: 20px;
    border-radius: 999px;
    background: #2563eb;
}
.wcrs-products {
    display: grid;
    gap: var(--wcrs-gap);
    grid-template-columns: repeat(auto-fit, minmax(185px,1fr));
}
.wcrs-product {
    background: var(--wcrs-surface);
    border-radius: 1.05rem;
    border: 1px solid var(--wcrs-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: .17s ease-out;
}
.wcrs-thumb { display:block; aspect-ratio: 4/3; background:#fff; }
.wcrs-thumb img, .wcrs-thumb .wcrs-thumb-img { width:100%; height:100%; object-fit:cover; display:block; }
.wcrs-body { padding: .85rem 1rem 1rem; display:flex; flex-direction:column; gap:.4rem; color:var(--wcrs-text); }
.wcrs-name { margin:0; font-size:.9rem; font-weight:600; line-height:1.4; }
.wcrs-name a { color:inherit; text-decoration:none; }
.wcrs-price { font-size:.83rem; font-weight:600; color:#0f172a; }
.wcrs-btn {
    margin-top:.35rem; display:inline-flex; align-items:center; justify-content:center;
    background:var(--wcrs-primary); color:#fff; border-radius:999px;
    padding:.35rem 1.05rem .45rem; font-size:.73rem; text-decoration:none; gap:.3rem;
}
.wcrs-btn:hover { opacity:.92; }

/* STYLE 1 */
.wcrs-wrapper.style-1 .wcrs-product { box-shadow:0 7px 25px rgba(15,23,42,.035); }
.wcrs-wrapper.style-1 .wcrs-product:hover { transform:translateY(-3px); border-color:rgba(37,99,235,.25); }

/* STYLE 2 */
.wcrs-wrapper.style-2 .wcrs-product { background:#f8fafc; border:1px solid rgba(148,163,184,.33); }
.wcrs-wrapper.style-2 .wcrs-thumb { border-radius:1rem; margin:.75rem .75rem 0; overflow:hidden; }
.wcrs-wrapper.style-2 .wcrs-body { padding-inline:.75rem; }

/* STYLE 3 */
.wcrs-wrapper.style-3 .wcrs-product { position:relative; box-shadow:none; }
.wcrs-wrapper.style-3 .wcrs-product:before { content:""; position:absolute; inset:0; width:4px; background:var(--wcrs-primary); }
.wcrs-wrapper.style-3 .wcrs-body { padding-left:1.3rem; }

/* STYLE 4 */
.wcrs-wrapper.style-4 .wcrs-products { gap:1rem; }
.wcrs-wrapper.style-4 .wcrs-product { flex-direction:row; min-height:130px; }
.wcrs-wrapper.style-4 .wcrs-thumb { width:40%; aspect-ratio:auto; }
.wcrs-wrapper.style-4 .wcrs-body { flex:1; }
@media(max-width:768px){ .wcrs-wrapper.style-4 .wcrs-product{flex-direction:column;} .wcrs-wrapper.style-4 .wcrs-thumb{width:100%; aspect-ratio:4/3;} }

/* STYLE 5 */
.wcrs-wrapper.style-5 .wcrs-product { border:none; box-shadow:0 14px 32px rgba(15,23,42,.06); }

/* STYLE 6 */
.wcrs-wrapper.style-6 .wcrs-thumb { aspect-ratio:16/9; border-radius:999px; margin:.8rem .8rem 0; overflow:hidden; }
.wcrs-wrapper.style-6 .wcrs-product { border-radius:1.5rem; }

/* STYLE 7 */
.wcrs-wrapper.style-7 .wcrs-product { background:rgba(15,23,42,.9); border:1px solid rgba(255,255,255,.02); backdrop-filter:blur(6px); }
.wcrs-wrapper.style-7 .wcrs-body, .wcrs-wrapper.style-7 .wcrs-name a, .wcrs-wrapper.style-7 .wcrs-price { color:#fff; }
.wcrs-wrapper.style-7 .wcrs-btn { background:rgba(255,255,255,.25); color:#fff; }

/* STYLE 8 */
.wcrs-wrapper.style-8 .wcrs-product { border-top:5px solid var(--wcrs-primary); }

/* STYLE 9 */
.wcrs-wrapper.style-9 .wcrs-body { text-align:center; align-items:center; }
.wcrs-wrapper.style-9 .wcrs-btn { width:100%; justify-content:center; }

/* STYLE 10 */
.wcrs-wrapper.style-10 .wcrs-products { gap:.75rem; }
.wcrs-wrapper.style-10 .wcrs-product { border-radius:.7rem; }
.wcrs-wrapper.style-10 .wcrs-body { padding:.6rem .75rem .75rem; }
.wcrs-wrapper.style-10 .wcrs-name { font-size:.78rem; }

/* COLOR CLASSES */
.wcrs-color-default .wcrs-title:before { background:#2563eb; }
.wcrs-color-blue    .wcrs-title:before { background:#1d4ed8; }
.wcrs-color-emerald .wcrs-title:before { background:#059669; }
.wcrs-color-amber   .wcrs-title:before { background:#f97316; }
.wcrs-color-red     .wcrs-title:before { background:#ef4444; }
.wcrs-color-purple  .wcrs-title:before { background:#7c3aed; }
.wcrs-color-slate   .wcrs-title:before { background:#0f172a; }
.wcrs-color-neutral .wcrs-title:before { background:#94a3b8; }

/* responsive */
@media(max-width:768px){
    .wcrs-products { grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); }
}

/* === user layout override: desktop 4 cols, mobile 2 cols === */
.wcrs-products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
}
@media (max-width: 768px) {
    .wcrs-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* === force color accents with !important === */
.wcrs-color-default .wcrs-title:before,
.wcrs-color-default .wcrs-btn {
    background: #2563eb !important;
    border-color: #2563eb !important;
}
.wcrs-color-blue .wcrs-title:before,
.wcrs-color-blue .wcrs-btn {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}
.wcrs-color-emerald .wcrs-title:before,
.wcrs-color-emerald .wcrs-btn {
    background: #059669 !important;
    border-color: #059669 !important;
}
.wcrs-color-amber .wcrs-title:before,
.wcrs-color-amber .wcrs-btn {
    background: #f97316 !important;
    border-color: #f97316 !important;
}
.wcrs-color-red .wcrs-title:before,
.wcrs-color-red .wcrs-btn {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
}
.wcrs-color-purple .wcrs-title:before,
.wcrs-color-purple .wcrs-btn {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
}
.wcrs-color-slate .wcrs-title:before,
.wcrs-color-slate .wcrs-btn {
    background: #0f172a !important;
    border-color: #0f172a !important;
}
.wcrs-color-neutral .wcrs-title:before,
.wcrs-color-neutral .wcrs-btn {
    background: #94a3b8 !important;
    border-color: #94a3b8 !important;
}