.dl{
  --accent: #B4CF32;                  --ink: #C0C0C0;
  --ink-strong: #E9E9E9;
  --glass: rgba(12,14,18,.62);
  --stroke: rgba(255,255,255,.12);
  --shadow: 0 14px 36px rgba(0,0,0,.55);
  --black: #0B0E13;

  color: var(--ink);
  padding: clamp(44px, 6vw, 120px) 0;
}
.dl__inner{ max-width:1200px; margin:0 auto; padding:0 clamp(16px,3vw,32px); }

.dl__header{ text-align:center; margin-bottom: clamp(22px, 3.5vw, 36px); }
.dl__title{
  margin:0 0 12px; font-weight:900; font-size:clamp(28px,4.4vw,44px); line-height:1.08;
  color: var(--ink-strong);
  letter-spacing:.2px; filter: drop-shadow(0 4px 20px rgba(255,255,255,.08));
}
.dl__rule{
  display:inline-block; height:4px; width:min(340px,46%);
  border-radius:999px;
  background: linear-gradient(90deg, transparent, var(--ink-strong), transparent);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 3px 8px rgba(0,0,0,.55);
}

.dl__grid{
  display:grid; gap:clamp(18px,2.2vw,26px);
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items:start;
}
@media (max-width:1100px){ .dl__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){  .dl__grid{ grid-template-columns: 1fr; } }

.dl__card{
  position:relative; background: var(--glass);
  -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%);
  border:1px solid var(--stroke); border-radius:18px; box-shadow:var(--shadow); overflow:hidden;

  display:grid; grid-template-columns:44% 1fr; column-gap:clamp(12px,2vw,18px);
  min-height:230px;
}
.dl__card--featured{ grid-column:1 / -1; grid-template-columns:48% 1fr; min-height:300px; }

.dl__media, .dl__body{ min-width:0; }
.dl__media{ position:relative; background:rgba(255,255,255,.03); aspect-ratio:16 / 10; }
.dl__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
@media (max-width:880px){
  .dl__card, .dl__card--featured{ grid-template-columns:1fr; }
  .dl__media{ aspect-ratio:16 / 9; }
}

.dl__body{
  padding: clamp(16px,2.2vw,26px) clamp(18px,2.6vw,30px);
  display:grid; grid-template-rows:auto auto 1fr auto; row-gap:8px;
}
.dl__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

.dl__name, .dl__desc{ white-space:normal; overflow-wrap:anywhere; word-break:break-word; hyphens:auto; }
.dl__name{ margin:0; font-weight:900; font-size:clamp(18px,2.2vw,24px); line-height:1.2; color:var(--ink-strong); }
.dl__name a{ color:inherit; text-decoration:none; }
.dl__desc{ margin:0; font-weight:600; font-size:clamp(14px,1.6vw,16px); line-height:1.7; max-width:70ch; color:var(--ink); }

.dl__badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:12px;
  border:1px solid color-mix(in oklab, var(--accent) 55%, transparent);
  background: rgba(255,255,255,.04); color: var(--accent); font-weight:900; letter-spacing:.02em;
  box-shadow: 0 8px 18px rgba(0,0,0,.35); white-space:nowrap;
}
.dl__badge svg{ width:18px; height:18px; display:block; }
.dl__badge svg *{ fill:none!important; stroke:currentColor!important; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.dl__date{
  color:#c9d0d6; font-weight:800; font-size:.95rem; white-space:nowrap;
  max-width:50%; text-overflow:ellipsis; overflow:hidden; display:inline-block;
}

.dl__actions{ display:flex; align-items:center; gap:12px; margin-top:4px; flex-wrap:wrap; }
.dl__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:12px;
  background: var(--accent); color:#0b0e13; font-weight:900; text-decoration:none;
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
  border:1px solid color-mix(in oklab, var(--accent) 50%, black 0%);
}
.dl__link{
  color: var(--ink); text-decoration:none; font-weight:800;
  border-bottom:2px solid color-mix(in oklab, var(--ink) 30%, transparent); padding-bottom:2px;
}

.post-type-archive-deal .dl__card,
.page-template-archive-deal .dl__card{
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 100%, white 0%) 0%,
                           color-mix(in oklab, var(--accent) 95%, black 5%) 100%);
  border-color: color-mix(in oklab, var(--accent) 60%, black 40%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

.post-type-archive-deal .dl__body,
.page-template-archive-deal .dl__body{ color: var(--black); }

.post-type-archive-deal .dl__name,
.page-template-archive-deal .dl__name{ color: var(--black); }

.post-type-archive-deal .dl__desc,
.page-template-archive-deal .dl__desc{ color: color-mix(in oklab, var(--black) 92%, white 8%); }

.post-type-archive-deal .dl__badge,
.page-template-archive-deal .dl__badge{
  background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.18); color: var(--black);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

.post-type-archive-deal .dl__date,
.page-template-archive-deal .dl__date{ color: color-mix(in oklab, var(--black) 75%, white 25%); max-width: 60%; }

.post-type-archive-deal .dl__btn,
.page-template-archive-deal .dl__btn{
  background: var(--black);
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 55%, var(--black) 45%);
  box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.post-type-archive-deal .dl__btn:hover,
.page-template-archive-deal .dl__btn:hover{
  filter: brightness(1.03);
  box-shadow: 0 12px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
}

.post-type-archive-deal .dl__link,
.page-template-archive-deal .dl__link{
  color: var(--black);
  border-bottom-color: rgba(11,14,19,.25);
}
.post-type-archive-deal .dl__link:hover,
.page-template-archive-deal .dl__link:hover{
  border-bottom-color: rgba(11,14,19,.45);
}

@media (hover:hover){
  .dl__card{
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease, filter .25s ease;
    will-change: transform;
  }
  .dl__card:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(0,0,0,.58);
    border-color: color-mix(in oklab, var(--accent) 22%, var(--stroke));
  }
}

@media (prefers-reduced-motion: reduce){
  .dl__card, .dl__btn, .dl__link{ transition: none !important; }
}

.single-deal .dl{ padding: clamp(36px,6vw,90px) 0; }
.single-deal .dl__grid{ grid-template-columns: 1fr; }
.single-deal .dl__card{ grid-template-columns:1fr; min-height:0; background:var(--glass); border:1px solid var(--stroke); }
.single-deal .dl__media{ aspect-ratio:16 / 9; }
.single-deal .dl__media img{ object-fit:cover; object-position:center; }
.single-deal .dl__body{ padding-top: clamp(16px, 2.2vw, 26px); }

@media (max-width:520px){
  .dl__top{ align-items:start; flex-direction:column; gap:8px; }
  .dl__date{ max-width:100%; }
}

.dl--hot .dl__card{
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--accent) 100%, white 0%) 0%,
      color-mix(in oklab, var(--accent) 95%, black 5%) 100%);
  border-color: color-mix(in oklab, var(--accent) 60%, black 40%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dl--hot .dl__body{ color:#0B0E13; }
.dl--hot .dl__name{ color:#0B0E13; }
.dl--hot .dl__name a{ color:inherit; text-decoration:none; }
.dl--hot .dl__desc{ color: color-mix(in oklab, #0B0E13 92%, white 8%); }

.dl--hot .dl__badge{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.18);
  color:#0B0E13;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.dl--hot .dl__date{
  color: color-mix(in oklab, #0B0E13 75%, white 25%);
  max-width: 60%;
}

.dl--hot .dl__btn{
  background:#0B0E13;
  color: var(--accent);
  border:1px solid color-mix(in oklab, var(--accent) 55%, #0B0E13 45%);
  box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.dl--hot .dl__btn:hover{
  filter: brightness(1.03);
  box-shadow: 0 12px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
}

.dl--hot .dl__link{
  color:#0B0E13;
  border-bottom-color: rgba(11,14,19,.25);
}
.dl--hot .dl__link:hover{
  border-bottom-color: rgba(11,14,19,.45);
}

.dl--hot .dl__card{
  position: relative;
  overflow: hidden !important;         border-radius: 18px;               }
.dl--hot .dl__card::after{
    clip-path: inset(0 round 18px);      pointer-events: none;
  z-index: 1;
}

.dl.dl--hot .dl__card.dl__card--featured{
  }

.dl.dl--hot .dl__card.dl__card--featured .dl__media{
  grid-column: 2;                       align-self: stretch;                  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  position: relative;                 }

.dl.dl--hot .dl__card.dl__card--featured .dl__media img,
.dl.dl--hot .dl__card.dl__card--featured .dl__media .dl__thumb{
  position: absolute !important;
  inset: 0 !important;                  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;       object-position: right top !important;
}

@media (max-width: 880px){
  .dl.dl--hot .dl__card.dl__card--featured .dl__media{
    grid-column: 1;
    height: auto !important;
    aspect-ratio: auto !important;
  }
  .dl.dl--hot .dl__card.dl__card--featured .dl__media img,
  .dl.dl--hot .dl__card.dl__card--featured .dl__media .dl__thumb{
    position: static !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
  }
}


  .dl.dl--hot .dl__card.dl__card--featured {
    position: relative;
  }

    .dl.dl--hot .dl__card.dl__card--featured .dl__media {
    position: static !important;
  }

    .dl.dl--hot .dl__card.dl__card--featured .dl__media img,
  .dl.dl--hot .dl__card.dl__card--featured .dl__media .dl__thumb {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;

        width: auto !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: right top !important;

    z-index: 0;
  }
  @media (max-width: 767px) {
  .dl.dl--hot .dl__card.dl__card--featured .dl__media img,
  .dl.dl--hot .dl__card.dl__card--featured .dl__media .dl__thumb {
    height: 50% !important;      width: auto !important;
    object-fit: cover !important;

  }
}