/* ============================
   DG LANDING FILTER (dg-landing)
   ============================ */
.dg-landing{ max-width:1200px; margin:0 auto; padding:0 12px; }
.dg-landing .dgFL-filters{ display:flex; gap:8px; align-items:center; margin:10px 0 8px; flex-wrap:wrap; }
.dg-landing .dgFL-filters form{ display:flex; gap:8px; flex-wrap:wrap; }
.dg-landing .dgFL-filters select, .dg-landing .dgFL-filters button{
  padding:8px 10px; border:1px solid #e6e6e6; border-radius:8px; background:#fff;
}
.dg-landing .dgFL-filters button{ cursor:pointer; }

.dg-landing .grid-mabee{
  --dg-cols: 4;
  --dg-cols-m: 2;
  display:grid !important;
  gap:14px;
  grid-template-columns: repeat(var(--dg-cols), minmax(0,1fr)) !important;
}

.dg-landing .card-mabee{
  display:block; border:1px solid #eee; border-radius:14px; overflow:hidden; background:#fff;
  text-decoration:none; color:inherit; transition:transform .12s ease, box-shadow .18s ease;
}
.dg-landing .card-mabee:hover{
  transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.dg-landing .thumb-mabee{ aspect-ratio:1/1; background:#f5f7fb; display:flex; align-items:center; justify-content:center; }
.dg-landing .thumb-mabee img{ max-width:100%; max-height:100%; display:block; }

.dg-landing .body-mabee{ padding:10px; }
.dg-landing .title-mabee{ font-size:15px; line-height:1.4; margin:0 0 6px; }
.dg-landing .meta-mabee{ color:#777; font-size:12px; margin-top:2px; }
.dg-landing .price-mabee{ font-weight:800; margin-top:6px; }
.dg-landing .price-old{ color:#999; text-decoration:line-through; margin-left:6px; font-weight:400; }
.dg-landing .desc-mabee{ color:#444; font-size:13px; }

.dg-landing .hl-mabee mark{
  background:#fff2a8; padding:0 .2em; border-radius:3px;
}

.dg-landing .dgFL-empty,
.dg-landing .dgFL-error,
.dg-landing .dgFL-loading{
  padding:18px 12px; background:#fafafa; border:1px dashed #ddd; border-radius:10px;
  margin:16px 0; text-align:center;
}

.dg-landing .sk-card{ border:1px solid #eee; border-radius:14px; overflow:hidden; }
.dg-landing .skeleton{
  background:linear-gradient(90deg,#f2f4f7 25%,#e9edf3 37%,#f2f4f7 63%);
  background-size:400% 100%; animation:dgfl-shimmer 1.2s ease-in-out infinite;
}
.dg-landing .sk-thumb{ aspect-ratio:1/1; }
.dg-landing .sk-body{ padding:10px; }
.dg-landing .sk-line{ height:12px; border-radius:6px; margin:8px 0; }

@keyframes dgfl-shimmer{
  0%{background-position:100% 0}
  100%{background-position:-100% 0}
}

.dg-landing .dgFL-pager{
  display:flex; gap:6px; flex-wrap:wrap; margin:16px 0 24px; justify-content:center;
}
.dg-landing .dgFL-pager a,
.dg-landing .dgFL-pager span{
  padding:8px 12px; border:1px solid #e6e6e6; border-radius:8px;
  text-decoration:none; color:#111; background:#fff;
}
.dg-landing .dgFL-pager .is-active{
  background:#111; color:#fff; border-color:#111;
}
.dg-landing .dgFL-pager .is-gap{
  border-style:dashed; color:#777;
}

@media (max-width: 600px){
  .dg-landing .grid-mabee{
    grid-template-columns: repeat(var(--dg-cols-m), minmax(0,1fr)) !important;
    gap:10px;
  }
  .dg-landing .body-mabee{ padding:8px; }
  .dg-landing .title-mabee{ font-size:14px; }
  .dg-landing .desc-mabee{ font-size:12.5px; }
  .dg-landing .meta-mabee{ font-size:12px; }
  .dg-landing .dgFL-filters{ gap:6px; }
}
@media (max-width: 600px){
  .dg-landing .grid-mabee{ --dg-cols-m: 3; }
}


/* ====================================================
   DG BRAND GRID (dg-brand-grid)
   ==================================================== */
:root{
  --dg-gap:12px;
  --dg-radius:10px;
  --dg-pad:12px;
  --dg-border:#e9e9e9;
  --dg-border-hover:#dcdcdc;
  --dg-bg:#fff;
  --dg-bg-hover:#fff;
  --dg-shadow:0 1px 0 rgba(0,0,0,.02);
  --dg-shadow-hover:0 6px 20px rgba(0,0,0,.07);
  --dg-title-color:#1a1a1a;
  --dg-title-hover:#0986d9;
}

@media (prefers-color-scheme: dark){
  :root{
    --dg-border:#2a2a2a;
    --dg-border-hover:#3a3a3a;
    --dg-bg:#111;
    --dg-bg-hover:#141414;
    --dg-shadow:none;
    --dg-shadow-hover:none;
  }
}

.dg-brand-grid .grid-item,
.dg-brand-grid .grid-item:link,
.dg-brand-grid .grid-item:visited{
  color: var(--dg-title-color) !important;
  text-decoration:none !important;
}

.dg-brand-grid .grid-item:hover,
.dg-brand-grid .grid-item:focus,
.dg-brand-grid .grid-item:active{
  color: var(--dg-title-hover) !important;
  text-decoration:none !important;
}

.dg-brand-grid .grid-title{
  color:inherit !important;
}

.dg-brand-grid.skin-cards .grid-item::after{
  color:currentColor !important;
}

.dg-brand-grid{
  display:grid; gap:var(--dg-gap);
}
.dg-brand-grid.cols-1{grid-template-columns:repeat(1,1fr)}
.dg-brand-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.dg-brand-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.dg-brand-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.dg-brand-grid.cols-5{grid-template-columns:repeat(5,1fr)}
.dg-brand-grid.cols-6{grid-template-columns:repeat(6,1fr)}
.dg-brand-grid.auto-fit{
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr))
}

.dg-brand-grid.skin-cards .grid-item{
  position:relative;
  padding-right:32px;
  display:block;
  padding:var(--dg-pad);
  background:var(--dg-bg);
  border:1px solid var(--dg-border);
  border-radius:var(--dg-radius);
  text-decoration:none;
  box-shadow:var(--dg-shadow);
  transition:border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.dg-brand-grid.skin-cards .grid-item:hover{
  border-color:var(--dg-border-hover);
  box-shadow:var(--dg-shadow-hover);
  transform:translateY(-1px);
  background:var(--dg-bg-hover);
}

.dg-brand-grid.skin-cards .grid-title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.35; font-weight:500;
}

.dg-brand-grid.skin-cards .grid-item::after{
  content:"›";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  line-height:1;
  opacity:.35;
  transition:opacity .2s ease, transform .15s ease;
}
.dg-brand-grid.skin-cards .grid-item:hover::after{
  opacity:.6;
  transform:translate(4px,-50%);
}

.dg-brand-grid.skin-chips .grid-item{
  display:inline-block; padding:8px 12px; border:1px solid var(--dg-border);
  border-radius:999px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:.95rem; transition:border-color .2s ease, background .2s ease;
}
.dg-brand-grid.skin-chips .grid-item:hover{
  border-color:var(--dg-border-hover); background:var(--dg-bg-hover);
}

.dg-brand-grid.skin-list{ grid-template-columns:1fr; gap:8px }
.dg-brand-grid.skin-list .grid-item{
  display:block; padding:8px 2px; border-bottom:1px dashed var(--dg-border);
  text-decoration:none;
}
.dg-brand-grid.skin-list .grid-item:hover{
  border-color:var(--dg-border-hover)
}
.dg-brand-grid.skin-list .grid-title{
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
  overflow:hidden;
}

.dg-brand-grid-intro{
  margin:0 0 10px 0; font-weight:600;
}

@media (max-width: 640px){
  .dg-brand-grid{ --dg-gap:10px }
  .dg-brand-grid.skin-cards .grid-item{ padding:10px }
}