#products .page-not-found:has(.codebo-empty-products) {
  max-width: none;
  margin: 30px 0 70px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.codebo-empty-products {
  position: relative;
  display: grid;
  min-height: 350px;
  grid-template-columns: minmax(240px, .72fr) 1.28fr;
  align-items: center;
  gap: clamp(30px, 6vw, 85px);
  padding: clamp(38px, 6vw, 78px);
  overflow: hidden;
  border: 1px solid rgba(0, 2, 24, .08);
  border-radius: 28px;
  background: linear-gradient(135deg, #f3eee8 0%, #fff 52%, #f5f3ef 100%);
  box-shadow: 0 25px 70px rgba(0, 2, 24, .09);
  isolation: isolate;
  animation: codeboEmptyEnter .65s cubic-bezier(.22, .8, .25, 1) both;
}

.codebo-empty-products::after {
  position: absolute;
  z-index: -1;
  right: -100px;
  bottom: -150px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: rgba(154, 99, 63, .07);
  content: '';
}

.codebo-empty-products__visual {
  position: relative;
  display: flex;
  width: min(250px, 100%);
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  margin: auto;
  border: 1px solid rgba(154, 99, 63, .16);
  border-radius: 34% 66% 55% 45% / 45% 42% 58% 55%;
  background: #fff;
  color: #9A633F;
  box-shadow: 0 24px 55px rgba(0, 2, 24, .11);
  animation: codeboEmptyFloat 5s ease-in-out infinite;
}

.codebo-empty-products__visual svg { position: relative; z-index: 2; width: 108px; height: 108px; }
.codebo-empty-products__halo { position: absolute; inset: 17%; border-radius: 50%; background: #f3ece5; }
.codebo-empty-products__eyebrow { color: #9A633F; font-size: 10px; font-weight: 850; letter-spacing: .17em; }
.codebo-empty-products__message .h4 { margin: 12px 0 10px; color: #000218; font-size: clamp(27px, 3.2vw, 43px); font-weight: 820; line-height: 1.12; letter-spacing: -.045em; }
.codebo-empty-products__message > p:not(.h4) { margin: 0; color: #616775; font-size: 15px; line-height: 1.7; }
.codebo-empty-products__promise { max-width: 590px; margin: 16px 0 0; color: #737986; font-size: 13px; line-height: 1.65; }
.codebo-empty-products__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.codebo-empty-products__primary,
.codebo-empty-products__secondary {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none !important;
  transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.codebo-empty-products__primary { border: 1px solid #000218; background: #000218; color: #fff !important; box-shadow: 0 10px 25px rgba(0, 2, 24, .18); }
.codebo-empty-products__secondary { border: 1px solid rgba(154, 99, 63, .34); background: #fff; color: #9A633F !important; }
.codebo-empty-products__primary i { font-size: 18px; transition: transform .2s ease; }
.codebo-empty-products__primary:hover { border-color: #9A633F; background: #9A633F; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(154, 99, 63, .24); }
.codebo-empty-products__primary:hover i { transform: translateX(4px); }
.codebo-empty-products__secondary:hover { border-color: #9A633F; background: #f4eee8; transform: translateY(-3px); }

@keyframes codeboEmptyEnter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes codeboEmptyFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1deg); } }

@media (max-width: 767.98px) {
  #products .page-not-found:has(.codebo-empty-products) { margin: 18px 0 45px; }
  .codebo-empty-products { grid-template-columns: 1fr; gap: 28px; padding: 34px 22px; border-radius: 21px; text-align: center; }
  .codebo-empty-products__visual { width: 150px; border-radius: 38% 62% 56% 44% / 45% 45% 55% 55%; }
  .codebo-empty-products__visual svg { width: 72px; height: 72px; }
  .codebo-empty-products__actions { flex-direction: column; }
  .codebo-empty-products__primary, .codebo-empty-products__secondary { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .codebo-empty-products, .codebo-empty-products__visual { animation: none; }
}
