/**
 * Shop by Category — polished tiles
 */
.duo-card-categories {
  background: linear-gradient(180deg, #ffffff 0%, #fffafc 100%) !important;
  border: 1px solid rgba(233, 30, 99, 0.1) !important;
}
.duo-card-categories .duo-head h2 {
  font-size: clamp(14px, 3.5vw, 16px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #1a1218 !important;
}
.duo-card-categories .duo-head h2 em {
  font-style: normal;
  color: #e91e63;
}
.duo-card-categories .duo-icon {
  background: linear-gradient(135deg, #e91e63, #ff4081) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(233, 30, 99, 0.35);
}
.duo-cat-matrix {
  gap: 10px !important;
  padding: 2px 0 6px !important;
}
.duo-cat-tile {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 4px 16px rgba(26, 18, 24, 0.08) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
.duo-cat-tile:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 28px rgba(233, 30, 99, 0.18) !important;
}
.duo-cat-tile .cat-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: #1a1218 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 3;
}
.duo-cat-tile .cat-photo-full {
  transition: transform 0.35s ease;
}
.duo-cat-tile:hover .cat-photo-full {
  transform: scale(1.06);
}
@media (max-width: 1023px) {
  .duo-cat-matrix {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    gap: 10px !important;
  }
  .duo-cat-tile {
    aspect-ratio: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: unset !important;
  }
}
@media (min-width: 1024px) {
  .duo-cat-tile {
    flex: 0 0 calc(25% - 9px) !important;
    min-width: calc(25% - 9px) !important;
    max-width: calc(25% - 9px) !important;
    width: calc(25% - 9px) !important;
  }
}