:root{}
.rzoc-el{direction: rtl;}
.rzoc-el .rzoc-el-count{margin-bottom:8px;opacity:.8;font-size:.9rem}
.rzoc-el .rzoc-el-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px 0}
.rzoc-el .rzoc-el-bar.is-sticky{position:sticky;top:var(--rzoc-sticky-top,0);z-index:5;background:inherit;padding:8px 0}
.rzoc-el .rzoc-el-bar input[type=text], .rzoc-el .rzoc-el-bar select{padding:8px 10px;border:1px solid #e5e7eb;border-radius:10px}
.rzoc-el .rzoc-el-bar .button{padding:8px 14px;border-radius:10px;background:var(--rzoc-accent,#059669);color:#fff;border:0;cursor:pointer}

.rzoc-el-grid{display:grid;grid-template-columns:repeat(var(--rzoc-cols-d,3),minmax(0,1fr));gap:var(--rzoc-gap,16px);justify-content:var(--rzoc-grid-justify,stretch)}
@media (max-width:1024px){.rzoc-el-grid{grid-template-columns:repeat(var(--rzoc-cols-t,2),minmax(0,1fr));}}
@media (max-width:768px){.rzoc-el-grid{grid-template-columns:repeat(var(--rzoc-cols-m,1),minmax(0,1fr));}}

/* Auto fill grid based on card min width */
.rzoc-el-grid.rzoc-el-grid-auto{grid-template-columns:repeat(auto-fill, minmax(var(--rzoc-card-minw,240px), 1fr));}

.rzoc-el-list{display:flex;flex-direction:column;gap:var(--rzoc-gap,16px)}
.rzoc-el-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:calc(100% / var(--rzoc-cols-d,3));gap:var(--rzoc-gap,16px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.rzoc-el-carousel > *{scroll-snap-align:center}
.rzoc-el .rzoc-el-nav{display:flex;justify-content:space-between;margin-top:8px}
.rzoc-el .rzoc-el-nav button{border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:6px 12px;cursor:pointer}

/* Cards */
.rzoc-el .rzo-card{background:#fff;border-radius:var(--rzoc-radius,16px);overflow:hidden;border:1px solid #eef2f7;transition:transform .2s ease, box-shadow .2s ease;box-shadow:0 2px 8px rgba(0,0,0,.04);max-width:var(--rzoc-card-maxw, none);justify-self:var(--rzoc-align,stretch)}
.rzoc-el.has-hover-lift .rzo-card:hover{transform:translateY(-3px)}
.rzoc-el .rzo-thumb{display:block;position:relative;border-top-left-radius:var(--rzoc-thumb-radius,12px);border-top-right-radius:var(--rzoc-thumb-radius,12px);overflow:hidden}
/* ratio mode */
.rzoc-el.thumb-mode-ratio .rzo-thumb{aspect-ratio:var(--rzoc-aspect, 16/9)}
.rzoc-el.thumb-mode-ratio .rzo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* fixed height mode */
.rzoc-el.thumb-mode-fixed .rzo-thumb{height:var(--rzoc-thumb-h,200px)}
.rzoc-el.thumb-mode-fixed .rzo-thumb img{width:100%;height:100%;object-fit:cover;display:block}

.rzoc-el .rzo-badge{position:absolute;top:10px;left:10px;background:var(--rzoc-badge,#10b981);color:#fff;padding:4px 8px;border-radius:999px;font-size:.75rem}
.rzoc-el .rzo-card-body{padding:var(--rzoc-card-pad,12px)}
.rzoc-el .rzo-card-title{margin:0 0 6px 0;font-size:1.05rem;line-height:1.6}
.rzoc-el .rzo-card-title a{text-decoration:none;display:-webkit-box;-webkit-line-clamp:var(--rzoc-title-lines,2);-webkit-box-orient:vertical;overflow:hidden}
.rzoc-el .rzo-card-meta{display:flex;gap:10px;opacity:.8;font-size:.85rem;margin-bottom:10px;flex-wrap:wrap}
.rzoc-el .rzo-card-actions{display:flex;gap:8px;flex-wrap:wrap}
.rzoc-el .button{display:inline-block;padding:8px 12px;border-radius:10px;border:1px solid #e5e7eb;text-decoration:none}
.rzoc-el .button-primary{background:var(--rzoc-accent,#059669);border-color:var(--rzoc-accent,#059669);color:#fff}


/* --- Robust placement: make filters and counters full-width blocks inside wrapper --- */
.rzoc-el > .rzoc-el-bar,
.rzoc-el > .rzoc-el-count,
.rzoc-el > .rzoc-el-nav { width:100%; display:block; flex:0 0 100%; }

/* ensure container blocks occupy full width */
.rzoc-el > .rzoc-el-grid,
.rzoc-el > .rzoc-el-list,
.rzoc-el > .rzoc-el-carousel,
.rzoc-el > .rzoc-el-wide { width:100%; display:block; }

/* avoid side-by-side with grid if parent is flex */
.rzoc-el{display:block}

/* Wide layout: horizontal cards */
.rzoc-el-wide{display:grid;grid-template-columns:repeat(var(--rzoc-cols-d,2), minmax(0,1fr));gap:var(--rzoc-gap,16px);justify-content:var(--rzoc-grid-justify,stretch)}
@media (max-width:1024px){.rzoc-el-wide{grid-template-columns:repeat(var(--rzoc-cols-t,1),minmax(0,1fr));}}
@media (max-width:768px){.rzoc-el-wide{grid-template-columns:repeat(var(--rzoc-cols-m,1),minmax(0,1fr));}}

.rzoc-el-wide .rzo-card{display:flex;align-items:stretch}
.rzoc-el-wide .rzo-thumb{width:var(--rzoc-wide-thumb,220px);min-width:var(--rzoc-wide-thumb,220px);border-radius:var(--rzoc-thumb-radius,12px);overflow:hidden}
.rzoc-el-wide.thumb-mode-ratio .rzo-thumb{aspect-ratio:var(--rzoc-aspect,16/9)}
.rzoc-el-wide.thumb-mode-fixed .rzo-thumb{height:var(--rzoc-thumb-h,200px)}
.rzoc-el-wide .rzo-thumb img{width:100%;height:100%;object-fit:cover;display:block}

.rzoc-el-wide .rzo-card-body{flex:1;display:flex;flex-direction:column;padding:var(--rzoc-card-pad,12px)}
.rzoc-el-wide .rzo-card-actions{margin-top:auto}

/* Button alignment stable */
.rzoc-el .rzoc-el-bar .button{align-self:flex-start}

/* NEW DESIGN VARS */
.rzoc-el .rzo-card{background:var(--rzoc-card-bg,#fff);border-width:var(--rzoc-card-border-w,1px);border-style:solid;border-color:var(--rzoc-card-border,#eef2f7)}
.rzoc-el.has-hover-lift .rzo-card:hover{transform:translateY(-3px) scale(var(--rzoc-hover-scale,1));background:var(--rzoc-card-bg-hover,inherit)}
.rzoc-el .rzo-card-actions{display:flex;gap:var(--rzoc-btn-gap,8px);flex-wrap:wrap;justify-content:var(--rzoc-actions-align,flex-start)}
.rzoc-el .button,.rzoc-el .button-primary{border-radius:var(--rzoc-btn-radius,10px)}
.rzoc-el .rzo-card-meta{gap:var(--rzoc-meta-gap,10px)}
.rzoc-el .rzo-card-title{text-align:var(--rzoc-title-align,inherit)}
.rzoc-el .rzo-badge{font-size:var(--rzoc-badge-fs,.75rem)}

/* === RZOC EL Frontend (safe append) === */
.rzoc-el{display:block}
.rzoc-el > .rzoc-el-bar,
.rzoc-el > .rzoc-el-count,
.rzoc-el > .rzoc-el-nav{width:100%;display:block;flex:0 0 100%}
.rzoc-el > .rzoc-el-grid,
.rzoc-el > .rzoc-el-list,
.rzoc-el > .rzoc-el-carousel,
.rzoc-el > .rzoc-el-wide{width:100%;display:block}

/* Grid fixed columns */
.rzoc-el .rzoc-el-grid{display:grid;gap:var(--rzoc-gap,16px);justify-content:var(--rzoc-grid-justify,stretch);}
.rzoc-el .rzoc-el-grid{grid-template-columns:repeat(var(--rzoc-cols-d,3),minmax(0,1fr));}
@media (max-width:1024px){.rzoc-el .rzoc-el-grid{grid-template-columns:repeat(var(--rzoc-cols-t,2),minmax(0,1fr));}}
@media (max-width:768px){.rzoc-el .rzoc-el-grid{grid-template-columns:repeat(var(--rzoc-cols-m,1),minmax(0,1fr));}}

/* Grid auto-fill */
.rzoc-el .rzoc-el-grid.rzoc-el-grid-auto{grid-template-columns:repeat(auto-fill,minmax(var(--rzoc-card-minw,240px),1fr));}

/* Wide layout */
.rzoc-el .rzoc-el-wide{display:grid;grid-template-columns:repeat(var(--rzoc-cols-d,2),minmax(0,1fr));gap:var(--rzoc-gap,16px);justify-content:var(--rzoc-grid-justify,stretch)}
@media (max-width:1024px){.rzoc-el .rzoc-el-wide{grid-template-columns:repeat(var(--rzoc-cols-t,1),minmax(0,1fr));}}
@media (max-width:768px){.rzoc-el .rzoc-el-wide{grid-template-columns:repeat(var(--rzoc-cols-m,1),minmax(0,1fr));}}

.rzoc-el .rzo-card{border-radius:var(--rzoc-radius,16px);padding:var(--rzoc-card-pad,12px);background:var(--rzoc-card-bg,#fff);border-width:var(--rzoc-card-border-w,1px);border-style:solid;border-color:var(--rzoc-card-border,#eef2f7);max-width:var(--rzoc-card-maxw,none)}
.rzoc-el .rzo-card.has-shadow{box-shadow:0 4px 16px rgba(0,0,0,.06)}
.rzoc-el.has-hover-lift .rzo-card:hover{transform:translateY(-3px) scale(var(--rzoc-hover-scale,1));background:var(--rzoc-card-bg-hover,inherit)}

.rzoc-el .rzo-thumb{display:block;overflow:hidden;border-radius:var(--rzoc-thumb-radius,12px)}
.rzoc-el.thumb-mode-ratio .rzo-thumb{aspect-ratio:var(--rzoc-aspect,16/9)}
.rzoc-el.thumb-mode-fixed .rzo-thumb{height:var(--rzoc-thumb-h,200px)}
.rzoc-el .rzo-thumb img{width:100%;height:100%;object-fit:cover;display:block}

.rzoc-el .rzo-card-body{display:flex;flex-direction:column;gap:8px}
.rzoc-el .rzo-card-title{display:-webkit-box;-webkit-line-clamp:var(--rzoc-title-lines,2);-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;text-align:var(--rzoc-title-align,inherit)}
.rzoc-el .rzo-card-meta{display:flex;gap:var(--rzoc-meta-gap,10px);flex-wrap:wrap}
.rzoc-el .rzo-badge{position:absolute;top:8px;left:8px;background:var(--rzoc-badge,#10b981);color:#fff;border-radius:999px;padding:2px 8px;font-size:var(--rzoc-badge-fs,.75rem)}

.rzoc-el .rzo-card-actions{display:flex;gap:var(--rzoc-btn-gap,8px);flex-wrap:wrap;justify-content:var(--rzoc-actions-align,flex-start)}
.rzoc-el .button,.rzoc-el .button-primary{border-radius:var(--rzoc-btn-radius,10px)}

/* Wide horizontal card internals */
.rzoc-el .rzoc-el-wide .rzo-card{display:flex;align-items:stretch}
.rzoc-el .rzoc-el-wide .rzo-thumb{width:var(--rzoc-wide-thumb,220px);min-width:var(--rzoc-wide-thumb,220px)}