:root{
  --ocw-primary: var(--e-global-color-primary, #DC2626);
  --ocw-secondary: var(--e-global-color-secondary, #F29F05);
  --ocw-accent: var(--e-global-color-accent, #BF3617);
  --ocw-text: var(--e-global-color-text, #444444);
  --ocw-grad: linear-gradient(90deg, #f6b210 0%, #dc4f0c 50%, #a00b0b 100%);
}

.ocw-sd-wrap{margin:20px auto;padding:0 12px;}
.ocw-sd-card{
  color: var(--ocw-text);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 18px;
  background: #fff;
}
.ocw-sd-image{
  width:100%;
  height:auto;
  border-radius:12px;
  margin-bottom:14px;
  border:1px solid rgba(0,0,0,.06);
}
.ocw-sd-title{margin:0 0 10px;font-weight:800;letter-spacing:-.02em;}
.ocw-sd-desc{margin:0 0 16px;line-height:1.6;}
.ocw-sd-btn{
  display:inline-block;
  background: var(--ocw-grad);
  color:#fff !important;
  text-decoration:none !important;
  font-weight:800;
  padding:12px 18px;
  border-radius:12px;
}
.ocw-sd-meta{margin-top:10px;font-size:12px;opacity:.7;}
.ocw-sd-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:16px;
}

.ocw-sd-item{
  color: var(--ocw-text);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 18px;
  background: #fff;
}

.ocw-sd-item .ocw-sd-image{
  width:100%;
  height:auto;
  border-radius:12px;
  margin-bottom:14px;
  border:1px solid rgba(0,0,0,.06);
}

@media (max-width: 1024px){
  .ocw-sd-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .ocw-sd-grid{ grid-template-columns: 1fr; }
}
/* Grid */
.ocw-sd-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:16px;
}
.ocw-sd-item{
  color: var(--ocw-text);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 18px;
  background: #fff;
}
@media (max-width: 1024px){
  .ocw-sd-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .ocw-sd-grid{ grid-template-columns: 1fr; }
}

/* Filter */
.ocw-sd-filter{ margin: 0 0 16px; }
.ocw-sd-filter-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.ocw-sd-input,
.ocw-sd-select{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  min-height:42px;
}
.ocw-sd-input{ flex: 1 1 260px; }
.ocw-sd-select{ flex: 0 0 220px; }

.ocw-sd-filter-btn{
  padding:10px 14px;
  min-height:42px;
  border-radius:12px;
  border:0;
  font-weight:800;
  color:#fff;
  background: var(--ocw-grad);
  cursor:pointer;
}

/* Pagination */
.ocw-sd-pagination ul{
  list-style:none;
  padding:0;
  margin:18px 0 0;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.ocw-sd-pagination li a,
.ocw-sd-pagination li span{
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  text-decoration:none;
}
.ocw-sd-pagination .current{
  background: var(--ocw-grad);
  color:#fff;
  border:0;
}