
/* DaruGet professional category hero slider */
.dd-category-hero{
  --hero:#0f9f76;--hero-soft:#ecfbf5;--hero-accent:#bfeedd;
  margin:0 0 18px;
  padding:0;
}
.dd-category-hero-shell{
  position:relative;
  min-height:300px;
  overflow:hidden;
  border-radius:28px;
  background:linear-gradient(135deg,var(--hero-soft),#fff 62%);
  border:1px solid color-mix(in srgb,var(--hero) 14%,#fff);
  box-shadow:0 16px 44px rgba(15,23,42,.07);
}
.dd-category-slide{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);
  gap:20px;
  align-items:center;
  padding:28px 34px;
  opacity:0;
  visibility:hidden;
  transform:translateX(-14px);
  transition:opacity .45s ease,transform .45s ease,visibility .45s;
}
.dd-category-slide.is-active{
  opacity:1;visibility:visible;transform:none;
}
.dd-category-copy{position:relative;z-index:2;max-width:720px}
.dd-category-kicker{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;margin-bottom:10px;
  border-radius:999px;
  background:#fff;
  color:var(--hero);
  border:1px solid var(--hero-accent);
  font-size:12px;font-weight:900;
}
.dd-category-copy h1{
  margin:0 0 8px;
  font-size:clamp(29px,3.2vw,44px);
  line-height:1.25;
  color:#0f172a;
}
.dd-category-copy h2{
  margin:0 0 8px;
  font-size:15px;
  line-height:1.7;
  color:var(--hero);
}
.dd-category-copy p{
  margin:0;
  max-width:620px;
  font-size:11.5px;
  line-height:2;
  color:#475569;
}
.dd-category-chips{
  display:flex;flex-wrap:wrap;gap:7px;
  margin-top:14px;
}
.dd-category-chips span{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid var(--hero-accent);
  font-size:12px;font-weight:850;color:#334155;
}
.dd-category-media{
  position:relative;
  height:240px;
  display:grid;place-items:center;
}
.dd-category-media::before{
  content:"";
  position:absolute;inset:20px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff 0 24%,var(--hero-accent) 65%,transparent 70%);
  opacity:.72;
}
.dd-category-media img{
  position:relative;z-index:2;
  display:block;
  width:100%;height:100%;
  object-fit:contain;
  filter:drop-shadow(0 18px 24px rgba(15,23,42,.12));
}
.dd-category-nav{
  position:absolute;
  right:28px;
  bottom:18px;
  z-index:8;
  display:flex;align-items:center;gap:7px;
}
.dd-category-dot{
  width:8px;height:8px;padding:0;border:0;border-radius:999px;
  background:color-mix(in srgb,var(--hero) 30%,#fff);
  transition:.25s;cursor:pointer;
}
.dd-category-dot.is-active{
  width:24px;background:var(--hero);
}
.dd-category-arrows{
  position:absolute;
  left:20px;bottom:16px;
  z-index:8;display:flex;gap:6px;
}
.dd-category-arrow{
  width:34px;height:34px;
  display:grid;place-items:center;
  border:1px solid rgba(15,23,42,.08);
  border-radius:50%;
  background:rgba(255,255,255,.88);
  color:#0f172a;
  cursor:pointer;
}
.dd-category-slide::after{
  content:"";
  position:absolute;
  width:210px;height:210px;
  left:-60px;top:-90px;
  border-radius:50%;
  background:var(--hero);
  opacity:.06;
}
@media(max-width:760px){
  .dd-category-hero{margin-bottom:12px}
  .dd-category-hero-shell{min-height:228px;border-radius:22px}
  .dd-category-slide{
    grid-template-columns:minmax(0,1fr) 110px;
    gap:8px;padding:18px 16px 44px;
  }
  .dd-category-copy h1{font-size:25px;margin-bottom:5px}
  .dd-category-copy h2{font-size:12px;margin-bottom:5px}
  .dd-category-copy p{
    font-size:12px;line-height:1.85;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .dd-category-kicker{font-size:12px;padding:5px 8px;margin-bottom:6px}
  .dd-category-chips{
    flex-wrap:nowrap;overflow:hidden;margin-top:8px;gap:5px;
  }
  .dd-category-chips span{font-size:12px;padding:4px 7px;white-space:nowrap}
  .dd-category-media{height:132px}
  .dd-category-media::before{inset:17px}
  .dd-category-nav{right:16px;bottom:14px}
  .dd-category-arrows{left:14px;bottom:11px}
  .dd-category-arrow{width:30px;height:30px;font-size:12px}
}
@media(max-width:420px){
  .dd-category-hero-shell{min-height:215px}
  .dd-category-slide{grid-template-columns:minmax(0,1fr) 90px;padding:16px 14px 42px}
  .dd-category-media{height:112px}
  .dd-category-copy h1{font-size:23px}
}

/* Visual refinement: product photography + colored identity background */
.dd-category-hero-shell{
  background:
    radial-gradient(circle at 84% 28%,color-mix(in srgb,var(--hero) 16%,transparent),transparent 34%),
    radial-gradient(circle at 18% 82%,color-mix(in srgb,var(--hero-accent) 46%,transparent),transparent 33%),
    linear-gradient(135deg,var(--hero-soft) 0%,#fff 62%,color-mix(in srgb,var(--hero-soft) 78%,#fff) 100%)!important;
}
.dd-category-media{
  height:250px!important;
  padding:10px!important;
}
.dd-category-media::before{
  inset:26px 18px 20px!important;
  border-radius:34px!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,255,255,.68)),
    radial-gradient(circle at 50% 45%,var(--hero-accent),transparent 72%)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.82),0 16px 38px rgba(15,23,42,.06)!important;
  opacity:1!important;
}
.dd-category-media img{
  width:92%!important;
  height:92%!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:0!important;
  transform:none!important;
  filter:drop-shadow(0 18px 22px rgba(15,23,42,.16))!important;
}
@media(max-width:760px){
  .dd-category-media{height:138px!important;padding:4px!important}
  .dd-category-media::before{inset:14px 7px 10px!important;border-radius:22px!important}
  .dd-category-media img{width:96%!important;height:96%!important}
}

/* Arch art integration — visual belongs to the hero background */
.dd-category-media{
  position:relative!important;
  height:252px!important;
  padding:0 6px 0 0!important;
  isolation:isolate!important;
}
.dd-category-media::before{
  content:""!important;
  position:absolute!important;
  inset:6px 8px 0 26px!important;
  z-index:0!important;
  border-radius:52% 52% 34% 34% / 62% 62% 23% 23%!important;
  background:
    linear-gradient(155deg,rgba(255,255,255,.92),rgba(255,255,255,.48)),
    radial-gradient(circle at 50% 28%,var(--hero-accent),transparent 68%)!important;
  border:1px solid rgba(255,255,255,.84)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hero) 8%,transparent),0 18px 36px rgba(15,23,42,.07)!important;
}
.dd-category-media::after{
  content:""!important;
  position:absolute!important;
  width:72px!important;height:72px!important;
  left:8px!important;bottom:12px!important;
  border-radius:50%!important;
  background:color-mix(in srgb,var(--hero) 14%,#fff)!important;
  box-shadow:inset 0 0 0 12px rgba(255,255,255,.58)!important;
  z-index:0!important;
}
.dd-category-media img{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  padding:0!important;
  margin:0!important;
  transform:none!important;
  filter:drop-shadow(0 18px 20px rgba(15,23,42,.10))!important;
}
@media(max-width:760px){
  .dd-category-media{height:138px!important;padding:0!important}
  .dd-category-media::before{inset:6px 0 0 8px!important;border-radius:52% 52% 30% 30% / 62% 62% 22% 22%!important}
  .dd-category-media::after{width:42px!important;height:42px!important;left:0!important;bottom:6px!important}
}

/* FINAL hero composition */
.dd-category-hero-shell{
  min-height:286px!important;
  background:
    linear-gradient(110deg,var(--hero-soft) 0%,#fff 52%,color-mix(in srgb,var(--hero) 8%,#fff) 100%)!important;
  border:1px solid color-mix(in srgb,var(--hero) 13%,#fff)!important;
}
.dd-category-slide{
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr)!important;
  gap:24px!important;
  padding:24px 30px!important;
}
.dd-category-media{
  height:236px!important;
  padding:0!important;
  position:relative!important;
}
.dd-category-media::before{
  content:""!important;
  position:absolute!important;
  inset:8px 18px 5px 10px!important;
  border-radius:42% 42% 28% 28% / 54% 54% 26% 26%!important;
  background:linear-gradient(145deg,rgba(255,255,255,.92),color-mix(in srgb,var(--hero) 10%,#fff))!important;
  border:1px solid rgba(255,255,255,.86)!important;
  box-shadow:0 18px 40px rgba(15,23,42,.07)!important;
}
.dd-category-media img{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:42% 42% 28% 28% / 54% 54% 26% 26%!important;
  padding:0!important;
  margin:0!important;
  transform:none!important;
  filter:none!important;
}
.dd-category-copy h1{font-size:clamp(28px,3vw,41px)!important}
.dd-category-copy h2{font-size:14px!important}
.dd-category-copy p{font-size:11px!important;line-height:1.95!important}
@media(max-width:760px){
  .dd-category-hero-shell{min-height:218px!important}
  .dd-category-slide{
    grid-template-columns:minmax(0,1fr) 112px!important;
    padding:16px 15px 42px!important;
    gap:10px!important;
  }
  .dd-category-media{height:118px!important}
  .dd-category-copy h1{font-size:24px!important}
  .dd-category-copy h2{font-size:11.5px!important}
}

/* DaruGet image-free category hero visual */
.dd-category-media{
  position:relative!important;
  height:236px!important;
  overflow:hidden!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 62% 40%,rgba(255,255,255,.95) 0 17%,transparent 18%),
    radial-gradient(circle at 64% 44%,color-mix(in srgb,var(--hero) 18%,#fff) 0 30%,transparent 31%),
    linear-gradient(145deg,rgba(255,255,255,.92),color-mix(in srgb,var(--hero) 11%,#fff))!important;
  border:1px solid rgba(255,255,255,.78)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hero) 7%,transparent),0 16px 36px rgba(15,23,42,.06)!important;
}
.dd-category-media img{display:none!important}
.dd-category-media::before{
  content:""!important;
  position:absolute!important;
  width:150px!important;height:150px!important;
  right:48px!important;top:38px!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 38% 35%,#fff 0 18%,color-mix(in srgb,var(--hero) 24%,#fff) 19% 56%,transparent 57%)!important;
  box-shadow:0 20px 32px rgba(15,23,42,.08)!important;
}
.dd-category-media::after{
  content:""!important;
  position:absolute!important;
  width:220px!important;height:110px!important;
  left:20px!important;bottom:18px!important;
  border-radius:70% 30% 65% 35% / 60% 35% 65% 40%!important;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--hero) 22%,#fff),color-mix(in srgb,var(--hero-accent) 68%,#fff))!important;
  transform:rotate(-7deg)!important;
  opacity:.76!important;
}
.dd-category-media .dd-hero-shape{
  position:absolute!important;
  display:block!important;
  z-index:2!important;
}
@media(max-width:760px){
  .dd-category-media{height:118px!important;border-radius:20px!important}
  .dd-category-media::before{width:80px!important;height:80px!important;right:22px!important;top:20px!important}
  .dd-category-media::after{width:118px!important;height:58px!important;left:4px!important;bottom:9px!important}
}

/* FINAL replaceable hero image slot */
.dd-category-media{
  position:relative!important;
  height:236px!important;
  overflow:hidden!important;
  border-radius:28px!important;
  background:#f8fbf9!important;
  border:1px solid rgba(15,23,42,.06)!important;
  box-shadow:0 14px 34px rgba(15,23,42,.055)!important;
}
.dd-category-media::before,
.dd-category-media::after{
  content:none!important;
  display:none!important;
}
.dd-category-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border-radius:inherit!important;
  transform:none!important;
  filter:none!important;
}

/* smaller hero arrows */
.dd-category-arrow{
  width:28px!important;
  height:28px!important;
  font-size:11px!important;
  border-radius:50%!important;
}
.dd-category-arrows{
  left:14px!important;
  bottom:13px!important;
  gap:5px!important;
}
@media(max-width:760px){
  .dd-category-media{
    height:118px!important;
    border-radius:18px!important;
  }
  .dd-category-arrow{
    width:25px!important;
    height:25px!important;
    font-size:12px!important;
  }
  .dd-category-arrows{
    left:10px!important;
    bottom:9px!important;
  }
}

/* FINAL category-specific hero image panel */
.dd-category-media{
  position:relative!important;
  height:236px!important;
  overflow:hidden!important;
  border-radius:26px!important;
  background:linear-gradient(145deg,var(--hero-soft),#fff)!important;
  border:1px solid color-mix(in srgb,var(--hero) 10%,#fff)!important;
  box-shadow:0 15px 34px rgba(15,23,42,.06)!important;
}
.dd-category-media::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  background:linear-gradient(90deg,rgba(255,255,255,.28),transparent 36%,color-mix(in srgb,var(--hero) 8%,transparent))!important;
  pointer-events:none!important;
}
.dd-category-media::after{content:none!important;display:none!important}
.dd-category-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border-radius:inherit!important;
  transform:none!important;
  filter:none!important;
}
.dd-category-arrow{
  width:25px!important;
  height:25px!important;
  min-width:25px!important;
  min-height:25px!important;
  padding:0!important;
  font-size:12px!important;
  border-radius:50%!important;
}
.dd-category-arrows{
  left:12px!important;
  bottom:11px!important;
  gap:4px!important;
}
@media(max-width:760px){
  .dd-category-media{height:116px!important;border-radius:17px!important}
  .dd-category-arrow{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;font-size:12px!important}
}

/* DaruGet dedicated brand hero images */
.dd-category-media{
  background:var(--hero-soft)!important;
  overflow:hidden!important;
}
.dd-category-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center!important;
  padding:0!important;
  margin:0!important;
  transform:none!important;
  filter:none!important;
}
.dd-category-media::before,
.dd-category-media::after{
  content:none!important;
  display:none!important;
}

/* FINAL simple replaceable hero placeholder */
.dd-category-media{
  background:#f7f9f8!important;
  overflow:hidden!important;
}
.dd-category-media::before,
.dd-category-media::after{
  content:none!important;
  display:none!important;
}
.dd-category-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center!important;
  padding:0!important;
  margin:0!important;
  transform:none!important;
  filter:none!important;
  border-radius:inherit!important;
}

/* Category advertising hero image */
.dd-category-media img[src*="hero-advertising.webp"]{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border-radius:inherit!important;
}

/* FINAL 720x440 hero exact-fit frame */
.dd-category-media{
  width:100%!important;
  height:auto!important;
  aspect-ratio:720 / 440!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:transparent!important;
  border-radius:22px!important;
}
.dd-category-media img,
.dd-category-media img[src*="hero-advertising.webp"]{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:fill!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:inherit!important;
  transform:none!important;
  filter:none!important;
}
@media(max-width:760px){
  .dd-category-media{
    width:100%!important;
    height:auto!important;
    aspect-ratio:720 / 440!important;
  }
}

/* FINAL rounded 720x440 advertising hero */
.dd-category-media{
  width:100%!important;
  height:auto!important;
  aspect-ratio:720/440!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  border-radius:28px!important;
  background:transparent!important;
  border:1px solid rgba(15,23,42,.055)!important;
  box-shadow:0 10px 28px rgba(15,23,42,.07)!important;
}
.dd-category-media img[src*="hero-advertising.webp"]{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  object-position:center!important;
  border-radius:28px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  transform:none!important;
}
@media(max-width:760px){
  .dd-category-media,
  .dd-category-media img[src*="hero-advertising.webp"]{
    border-radius:20px!important;
  }
}
